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.
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.
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.
//jquery
function printDetail() {
window.print();
}
//html
<button type="button" class="btn" value="Print Div" onclick="printDetail()"><i class="icon-print"></i> Print</button>
//css
@media print{
.header{display:none;}
.footer{display:none;}
.leftside{display:none;}
.rightside{display:block;}
}
// http://jsfiddle.net/kisspa/52H7g/
Creo que tengo una pequeña manera inteligente de lograr esto:
¿Puedo suponer que el botón IMPRIMIR estará en la página html como ocurre en el enlace jsfiddle.net anterior?
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?
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.