Using Selenium to determine the visibility of elements for print media

Question

I would like to determine if individual elements are visible on the page when printing using CSS rules @media.

Is there a way to do this with Selenium?

I know there is a isDisplayed method that takes CSS into account, but I can’t say anything to tell Selenium what type of media to apply.

Is there any way to do this?

Or is there another way to test web pages to make sure the items you need are printed (and you don’t have this)?

Update:

For clarity, there are no plans to have a javascript print button. Users will print using the normal browser printing features (Chrome, FF, and IE). @mediaThe css rules will be used to control what is shown and hidden. I would like Selenium to pretend that it is a printer instead of a screen, so I can check if some elements will be visible in the printed version of the page.

Answer 1

I managed to write a script that does exactly what you want: it hides screen-only styles and sets only screen-only print styles.

You need to enter the following Selenium script:

(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");
            }
        }
    }
})()

You can see it in action in the JSFiddle .

Bookmarklet

.

:

• mediaList
• 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

, :

• , PRINT html-, jsfiddle.net ?

• , FILE- > PRINT RIGHT CLICK- > PRINT , - , html, jsfiddle , , ?

• , , Chrome, firefox? , PRINT - Chrome, Firefox. Chrome.