Pregunta Uso de Selenium para determinar la visibilidad de los elementos para medios impresos


Me gustaría determinar si los elementos particulares en una página son visibles cuando se imprimen como controlado por CSS @media reglas.

¿Hay alguna manera de hacer esto con Selenium?

Sé que está el se visualiza método, que tiene en cuenta el CSS, pero no hay nada que pueda encontrar para decirle a Selenium qué tipo de medio aplicar.

¿Hay alguna forma de hacer esto?

¿O hay otra forma de probar las páginas web para asegurarse de que los elementos que desea estén impresos (y los que no lo son)?

Actualizar:

Para mayor claridad, no hay planes para tener un botón de impresión javascript. Los usuarios imprimirán utilizando la funcionalidad de impresión normal del navegador (Chrome, FF e IE). @media Se usarán las reglas de css para controlar lo que se muestra y se oculta. Me gustaría que Selenium pretenda que es una impresora en lugar de una pantalla, para poder probar si ciertos elementos serán visibles en la versión impresa de la página.


5
2018-06-02 02:40


origen


Respuestas:


Me las arreglé para escribir una secuencia de comandos que hace exactamente lo que usted quiere: oculta los estilos de solo pantalla y establece los estilos de solo impresión como solo de pantalla.

Necesita inyectar el siguiente JavaScript con Selenium:

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

Usted puede verlo en acción en JSFiddle.

Bookmarklet

Tú también puedes instalarlo como un bookmarklet.

Más información:

Nota: Solo he probado esto en Google Chrome y Mozilla Firefox. Puede o no funcionar en otros navegadores.


8
2018-06-10 15:09



Hay algunos casos en que puede ser útil usar herramientas de automatización visual como herramientas. Lo implementamos en algunas de nuestras pruebas, y es genial, muy gordo.


1
2018-06-02 11:55



      //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/

-1
2018-06-02 03:33



Creo que tengo una pequeña manera inteligente de lograr esto:

  1. ¿Puedo suponer que el botón IMPRIMIR estará en la página html como ocurre en el enlace jsfiddle.net anterior?

  2. Básicamente, puedo EXCLUIR las opciones de ARCHIVO-> IMPRIMIR O HACER CLIC A LA DERECHA-> IMPRIMIR y solo asumir que la única forma en que alguien puede imprimir su página es haciendo clic en un botón de impresión incrustado en su página html como se muestra en el enlace jsfiddle anterior, si no ¿Cuáles son otros casos de prueba?

  3. Finalmente, ¿puedo suponer que sus pruebas de selenio SOLO se ejecutarán en el navegador Chrome y no en Firefox? Esto es importante porque el comando PRINT se comporta de forma diferente en Chrome como en Firefox. Mi solución sólo funcionará con Chrome.


-1
2018-06-04 18:52