使用 Selenium 确定印刷媒体元素的可见性

Question

我想确定页面上的特定元素在受 CSS @media 规则控制时是否可见。

有没有办法用 Selenium 做到这一点？

我知道有 isDisplayed 方法，它考虑了 CSS，但我找不到任何东西告诉 Selenium 应用哪种媒体类型。

有没有办法做到这一点？

或者是否有另一种方法来测试网页以确保打印您想要的元素（以及您不想要的元素）？

更新：

为了清楚起见，没有计划提供 javascript 打印按钮。用户将使用浏览器（Chrome、FF 和 IE）的正常打印功能进行打印。 @media css 规则将用于控制显示和隐藏的内容。 我希望 Selenium 将它伪装成打印机而不是屏幕，这样我就可以测试某些元素是否会在页面的打印版本中可见。

Answer 1

我已经设法编写了一个脚本，它可以满足您的需求：它隐藏仅屏幕样式并将仅打印样式设置为仅屏幕样式。

您需要使用 Selenium 注入以下 JavaScript：

(function pretendToBeAPrinter() {
    //For looking up if something is in the media list
    function hasMedia(list, media) {
        if (!list) return false;

        var i = list.length;
        while (i--) {
            if (list[i] === media) {
                return true;
            }
        }
        return false;
    }

    //Loop though all stylesheets
    for (var styleSheetNo = 0; styleSheetNo < document.styleSheets.length; styleSheetNo++) {
        //Current stylesheet
        var styleSheet = document.styleSheets[styleSheetNo];

        //Output debug information
        console.info("Stylesheet #" + styleSheetNo + ":");
        console.log(styleSheet);

        //First, check if any media queries have been defined on the <style> / <link> tag

        //Disable screen-only sheets
        if (hasMedia(styleSheet.media, "screen") && !hasMedia(styleSheet.media, "print")) {
            styleSheet.disabled = true;
        }

        //Display "print" stylesheets
        if (!hasMedia(styleSheet.media, "screen") && hasMedia(styleSheet.media, "print")) {
            //Add "screen" media to show on screen
            styleSheet.media.appendMedium("screen");
        }

        // Get the CSS rules in a cross-browser compatible way
        var rules;
        try {
            rules = styleSheet.cssRules;
        } catch (error) {
            console.log(error);
        }

        try {
          rules = styleSheet.rules;
        } catch (error) {
          console.log(error);
        }

        // Handle cases where styleSheet.rules is null
        if (!rules) {
            continue;
        }

        //Second, loop through all the rules in a stylesheet
        for (var ruleNo = 0; ruleNo < rules.length; ruleNo++) {
            //Current rule
            var rule = rules[ruleNo];

            //Hide screen-only rules
            if (hasMedia(rule.media, "screen") && !hasMedia(rule.media, "print")) {
                //Rule.disabled doesn't work here, so we remove the "screen" rule and add the "print" rule so it isn't shown
                console.info('Rule.media:');
                console.log(rule.media)
                rule.media.appendMedium(':not(screen)');
                rule.media.deleteMedium('screen');
                console.info('Rule.media after tampering:');
                console.log(rule.media)
            }

            //Display "print" rules
            if (!hasMedia(rule.media, "screen") && hasMedia(rule.media, "print")) {
                //Add "screen" media to show on screen
                rule.media.appendMedium("screen");
            }
        }
    }
})()

你可以see it in action at JSFiddle。

书签

你也可以install it as a bookmarklet。

更多信息：

• About mediaList
• About document.styleSheets

注意：我只在 Google Chrome 和 Mozilla Firefox 中测试过。它在其他浏览器中可能有效，也可能无效。

Answer 2

在某些情况下，使用 applitools 等可视化自动化工具会很有用。 我们在一些测试中实现了它，到目前为止效果很好。

Answer 3

      //jquery

     function printDetail() {
         window.print();
     }
     //html
      <button type="button" class="btn" value="Print Div" onclick="printDetail()"><i class="icon-print"></i> &nbsp;Print</button>

      //css
      @media print{
          .header{display:none;}
          .footer{display:none;}
          .leftside{display:none;}
          .rightside{display:block;}

     }

  // http://jsfiddle.net/kisspa/52H7g/

Answer 4

我想我有一个聪明的方法可以做到这一点：

1. 我可以假设 PRINT 按钮将出现在 html 页面上，就像上面 jsfiddle.net 链接中的情况一样？

2. 基本上，我可以排除 FILE->PRINT 或 RIGHT CLICK->PRINT 选项吗，并且只假设有人可以打印您的页面的唯一方法是单击嵌入在您的 html 页面中的打印按钮，如图所示如果不是上面的 jsfiddle 链接，其他测试用例是什么？

3. 最后，我可以假设您的 selenium 测试只能在 Chrome 浏览器中运行，而不能在 firefox 中运行吗？这很重要，因为 PRINT 命令在 Chrome 中的行为与在 Firefox 中的行为不同。我的修复只适用于 Chrome。