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

Question

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

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

我知道有一个isDisplayed方法,它考虑了CSS,但我找不到告诉Selenium要应用哪种媒体类型.

有没有办法做到这一点？

或者是否有另一种方法来测试网页以确保打印所需的元素(以及那些不打印的元素)？

更新:

为清楚起见,没有计划使用javascript打印按钮.用户将使用浏览器的常规打印功能(Chrome,FF和IE)进行打印.@mediacss规则将用于控制显示和隐藏的内容.我希望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");
            }
        }
    }
})()

您可以在JSFiddle中看到它的运行情况.

小书签

您也可以将其安装为书签.

更多信息:

• 关于 mediaList
• 关于 document.styleSheets

注意:我只在Google Chrome和Mozilla Firefox中对此进行了测试.它可能会或可能不会在其他浏览器中工作.