Phenquestions
Diferentes navegadores web utilizan diferentes motores de renderizado para renderizar páginas web. Por lo tanto, es posible que el mismo código de interfaz no se muestre de la misma manera en todos los navegadores web. Para solucionar este problema, es posible que deba agregar algunos códigos de interfaz específicos del navegador en su sitio web. Sin embargo, esa no es la única parte difícil a la hora de diseñar un sitio web compatible con diferentes navegadores y dispositivos. Verificar manualmente cómo se ve el sitio web en cada uno de sus navegadores específicos puede llevar mucho tiempo. Tendría que abrir todos sus navegadores web específicos, visitar la página web, esperar a que se cargue la página y comparar las páginas renderizadas entre sí. Para ahorrar tiempo, puede utilizar la función de captura de pantalla de Selenium para tomar automáticamente capturas de pantalla de su sitio web en cada uno de sus navegadores específicos y comparar las imágenes usted mismo. Eso es mucho más rápido que el método manual. Este artículo le mostrará cómo tomar capturas de pantalla de las ventanas del navegador usando Selenium.
Prerrequisitos
Para probar los comandos y ejemplos discutidos en este artículo, debe tener:
1) Una distribución de Linux (preferiblemente Ubuntu) instalada en su computadora.
2) Python 3 instalado en su computadora.
3) PIP 3 instalado en su computadora.
4) El paquete Python virtualenv instalado en su computadora.
5) Navegadores web Mozilla Firefox y Google Chrome instalados en su computadora.
6) Conocimiento de cómo instalar el controlador Firefox Gecko y el controlador web de Chrome en su sistema.
Para cumplir con los requisitos 4, 5 y 6, puedes leer mi artículo Introducción al selenio con Python 3 en Linuxhint.com.
Puede encontrar muchos otros artículos sobre los temas obligatorios en LinuxHint.com. Asegúrese de consultar estos artículos si necesita ayuda adicional.
Configurar un directorio de proyectos
Para mantener todo organizado, cree el nuevo directorio del proyecto selenium-screenshot /, como sigue:
$ mkdir -pv selenium-screenshot / images, drivers
Navega al selenium-screenshot / directorio del proyecto, de la siguiente manera:
$ cd selenium-captura de pantalla /
Cree un entorno virtual de Python en el directorio del proyecto, de la siguiente manera:
$ virtualenv .venv
Active el entorno virtual de la siguiente manera:
$ fuente .venv / bin / activar
Instale Selenium usando PIP3, de la siguiente manera:
$ pip3 instalar selenium
Descargue e instale el controlador web requerido en el conductores / directorio del proyecto. Expliqué el proceso de descarga e instalación de controladores web en el artículo Introducción al selenio con Python 3. Si necesita ayuda sobre este tema, busque LinuxHint.com para este articulo.
Conceptos básicos para realizar capturas de pantalla con selenio
Esta sección le dará un ejemplo muy simple de tomar capturas de pantalla del navegador con Selenium.
Primero, cree una nueva secuencia de comandos de Python ex01_google-chrome.py y escriba las siguientes líneas de códigos en el script.
desde el controlador web de importación de seleniode selenio.webdriver.común.claves importar claves
googleChromeOptions = webdriver.cromo.opciones.Opciones ()
googleChromeOptions.headless = Verdadero
googleChromeOptions.add_argument ('- tamaño de ventana = 1280,720')
googleChrome = webdriver.Chrome (ruta_ejecutable = "./ drivers / chromedriver ",
options = googleChromeOptions)
pageUrl = "https: // www.w3schools.com ";
Google Chrome.obtener (pageUrl)
Google Chrome.save_screenshot ('imágenes / w3schools_google-chrome.png ')
Google Chrome.cerca()
Una vez que haya terminado, guarde el ex01_google-chrome.py Secuencia de comandos de Python.
La línea 4 crea una Opciones objeto para el navegador web Google Chrome.
Line 5 habilita el modo sin cabeza para Google Chrome.
La línea 6 establece el tamaño de la ventana en 1280 × 720 píxeles.
Line 8 crea un objeto de navegador usando el controlador de Chrome y lo almacena en el Google Chrome variable.
La línea 10 define un URL de la página variable. La URL de la página La variable contiene la URL de la página web que Selenium capturará.
La línea 11 carga el URL de la página en el navegador.
La línea 12 usa el guardar captura de pantalla() método para guardar una captura de pantalla de la ventana del navegador en el archivo w3schools_google-chrome.png en el imágenes / directorio del proyecto.
Finalmente, la línea 14 cierra el navegador.
A continuación, ejecute el ex01_google-chrome.py Secuencia de comandos de Python, de la siguiente manera:
$ python3 ex01_google-chrome.py
Tras la ejecución exitosa del script, la captura de pantalla se guardará en el archivo de imagen w3schools_google-chrome.png en el imágenes / directorio del proyecto, como puede ver en la captura de pantalla a continuación.
Para tomar una captura de pantalla del mismo sitio web pero en el navegador web Firefox, cree la nueva secuencia de comandos de Python ex01_firefox.py y escriba las siguientes líneas de códigos en el script.
desde el controlador web de importación de seleniode selenio.webdriver.común.claves importar claves
firefoxOptions = webdriver.Firefox.opciones.Opciones ()
firefoxOptions.headless = Verdadero
firefoxOptions.add_argument ('- ancho = 1280')
firefoxOptions.add_argument ('- altura = 720')
firefox = webdriver.Firefox (ruta_ejecutable = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3schools.com ";
Firefox.obtener (pageUrl)
Firefox.save_screenshot ('imágenes / w3schools_firefox.png ')
Firefox.cerca()
Una vez que haya terminado, guarde el ex01_firefox.py Secuencia de comandos de Python.
La línea 4 crea una Opciones objeto para el navegador web Firefox.
Line 5 habilita el modo sin cabeza para Firefox.
La línea 6 establece el ancho de la ventana del navegador en 1280 píxeles y la línea 7 establece la altura de la ventana del navegador en 720 píxeles.
La línea 9 crea un objeto de navegador usando el controlador Firefox Gecko y lo almacena en el Firefox variable.
La línea 11 define un URL de la página variable. La URL de la página La variable contiene la URL de la página web que Selenium capturará.
La línea 13 carga el URL de la página en el navegador.
La línea 14 usa el guardar captura de pantalla() método para guardar una captura de pantalla de la ventana del navegador en el archivo w3schools_firefox.png en el imágenes / directorio del proyecto.
Finalmente, la línea 15 cierra el navegador.
A continuación, ejecute el ex01_firefox.py Secuencia de comandos de Python, de la siguiente manera:
$ python3 ex01_firefox.py
En la ejecución exitosa del script, la captura de pantalla debe guardarse en el archivo de imagen w3schools_firefox.png en el imágenes / directorio del proyecto, como puede ver en la captura de pantalla a continuación.
Toma de capturas de pantalla de diferentes resoluciones de pantalla
Esta sección le mostrará cómo tomar capturas de pantalla de la misma página web en diferentes resoluciones de pantalla. En esta sección, usaré el navegador web Google Chrome, pero puedes usar Firefox o cualquier otro navegador para esta sección.
Primero, cree la nueva secuencia de comandos de Python ex02.py y escriba las siguientes líneas de código en el script.
desde el controlador web de importación de seleniode selenio.webdriver.común.claves importar claves
pageUrl = "https: // www.w3schools.com / ";
resoluciones = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
para resolución en resoluciones:
print ("Tomando captura de pantalla para resolución% s…"% (resolución.reemplazar (',', 'x')))
chromeOptions = webdriver.ChromeOptions ()
chromeOptions.headless = Verdadero
chromeOptions.add_argument ('- tamaño de ventana =' + resolución)
chrome = webdriver.Chrome (ruta_ejecutable = "./ drivers / chromedriver ", options = chromeOptions)
cromo.obtener (pageUrl)
outputImage = 'images / homepage_chrome_' + resolución.reemplazar (',', '_') + '.png '
cromo.guardar_pantalla (outputImage)
cromo.cerca()
print ('Guardado en% s.'% (outputImage))
Una vez que haya terminado, guarde el ex02.py Secuencia de comandos de Python.
La línea 4 define un URL de la página variable que contiene la URL de la página web de la que me gustaría tomar capturas de pantalla en diferentes resoluciones de pantalla.
La línea 5 define un resoluciones lista que contiene una lista de las resoluciones de las que me gustaría tomar capturas de pantalla.
La línea 7 itera a través de cada uno de los resolucións en el resoluciones lista.
Dentro del bucle, Line 8 imprime un mensaje significativo en la consola.
Las líneas 10-15 crean un objeto de navegador con el resolución de la iteración del bucle actual y la almacena en el cromo variable.
La línea 17 carga el URL de la página en el navegador.
La línea 19 genera una ruta de imagen, donde se guardará la captura de pantalla, y almacena la imagen en el outputImage variable.
La línea 20 toma una captura de pantalla de la ventana del navegador y la almacena en la ruta outputImage.
La línea 21 cierra el navegador.
La línea 22 imprime un mensaje significativo en la consola y finaliza el ciclo.
Luego, el ciclo comienza de nuevo con la siguiente resolución de pantalla (i.mi., el siguiente elemento de la lista).
A continuación, ejecute el ex02.py Secuencia de comandos de Python, de la siguiente manera:
$ python3 ex02.py
El script de Python ex02.py debe tomar capturas de pantalla de la URL dada en cada una de las resoluciones de pantalla elegidas.
Captura de pantalla de w3schools.com en 320 píxeles de ancho.
Captura de pantalla de w3schools.com en 500 píxeles de ancho.
Captura de pantalla de w3schools.com en 720 píxeles de ancho.
Captura de pantalla de w3schools.com en 1366 píxeles de ancho.
Captura de pantalla de w3schools.com en 1920 píxeles de ancho.
Si compara las capturas de pantalla, debería ver que la interfaz de usuario cambia con el ancho de la ventana del navegador. Con la función de captura de pantalla de Selenium, puede ver cómo se ve su sitio web en diferentes resoluciones de pantalla rápida y fácilmente.
Conclusión
Este artículo le mostró algunos de los conceptos básicos para tomar capturas de pantalla con Selenium y los controladores web de Chrome y Firefox. El artículo también le mostró cómo tomar capturas de pantalla en diferentes resoluciones de pantalla. Esto debería ayudarlo a comenzar con la función de captura de pantalla de Selenium.
