小书签

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。

更多信息：

注意：我只在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

我想我有一个聪明的方法来实现这个目标：

我可以假设PRINT按钮将在html页面上，就像上面的jsfiddle.net链接一样吗？
基本上，我可以排除FILE-＆gt; PRINT或RIGHT CLICK-＆gt; PRINT选项，并且只假设有人可以打印页面的唯一方法是点击html页面中嵌入的打印按钮如果没有其他测试用例，请在上面的jsfiddle链接中显示？
最后，我可以假设你的硒测试只能在Chrome浏览器中运行而不是firefox吗？这很重要，因为PRINT命令在Chrome中的行为与在Firefox中的行为不同。我的解决方案仅适用于Chrome。

使用Selenium确定打印介质元素的可见性

4 个答案:

小书签

更多信息：