Cómo tomar una captura de pantalla con Selenium
Diferentes navegadores web utilizan diferentes motores de renderizado para realizar páginas web. Por lo tanto, el mismo código frontend puede no rendir de la misma manera en todos los navegadores web. Para solucionar este problema, es posible que deba agregar algunos códigos frontends específicos del navegador en su sitio web. Sin embargo, esa no es la única parte difícil al 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 objetivo, 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 usar 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 objetivo 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.
Requisitos previos
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) Los navegadores web de Mozilla Firefox y Google Chrome instalados en su computadora.
6) Conocimiento de cómo instalar el controlador Gecko Firefox y el controlador web Chrome en su sistema.
Para cumplir con los requisitos 4, 5 y 6, puede leer mi artículo Introducción al selenio con Python 3 en Linuxhint.comunicarse.
Puede encontrar muchos otros artículos sobre los temas requeridos en Linuxhint.comunicarse. Asegúrese de revisar estos artículos si necesita asistencia adicional.
Configuración de un directorio de proyecto
Para mantener todo organizado, cree el nuevo directorio de proyectos Selenium-screenshot/, como sigue:
$ mkdir -pv selenium -screenshot/imágenes, controladores
Navegar al Selenium-screenshot/ Directorio de proyectos, como sigue:
$ CD Selenium-screenshot/
Cree un entorno virtual de Python en el directorio del proyecto, de la siguiente manera:
$ virtualenv .venado
Active el entorno virtual, como sigue:
$ fuente .venv/bin/activar
Instale selenio usando PIP3, como sigue:
$ PIP3 Instalar selenioDescargue e instale el controlador web requerido en el conductores/ directorio del proyecto. Le expliqué el proceso de descarga e instalación de controladores web en el artículo Introducción al selenio con Python 3. Si necesita alguna ayuda sobre este tema, busque Linuxhint.comunicarse Para este artículo.
Conceptos básicos de tomar capturas de pantalla con Selenium
Esta sección le dará un ejemplo muy simple de tomar capturas de pantalla del navegador con Selenium.
Primero, crea un nuevo script de Python ex01_google-chrome.py y escriba las siguientes líneas de códigos en el script.
Desde Selenium Import WebDriverde Selenium.webdriver.común.llaves de importación de teclas
googlechromeOptions = webdriver.cromo.opción.Opciones ()
googlechromeoptions.Sin cabeza = verdadero
googlechromeoptions.add_argument ('-window-size = 1280,720')
googlechrome = webdriver.Chrome (ejecutable_path = "./controladores/cromedriver ",
opciones = googlechromeoptions)
pageUrl = "https: // www.W3Schools.com ";
Google Chrome.Get (Pageurl)
Google Chrome.save_screenshot ('Images/W3Schools_Google-Chrome.png ')
Google Chrome.cerca()
Una vez que haya terminado, guarde el ex01_google-chrome.py Guión de pitón.
La línea 4 crea un Opción Objeto para el navegador web Google Chrome.
La línea 5 habilita el modo sin cabeza para Google Chrome.
La línea 6 establece el tamaño de la ventana a 1280 × 720 píxeles.
La línea 8 crea un objeto del navegador usando el controlador Chrome y guárdelo en el Google Chrome variable.
La línea 10 define un URL de la página variable. El URL de la página La variable contiene la URL de la página web de que Selenium va a capturar la captura de pantalla.
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, ejecuta el ex01_google-chrome.py Python script, como sigue:
$ python3 ex01_google-crome.pyEn 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 el nuevo script de Python ex01_firefox.py y escriba las siguientes líneas de códigos en el script.
Desde Selenium Import WebDriverde Selenium.webdriver.común.llaves de importación de teclas
FirefoxOptions = webdriver.Firefox.opción.Opciones ()
Firefoxoptions.Sin cabeza = verdadero
Firefoxoptions.add_argument ('-width = 1280')
Firefoxoptions.add_argument ('-altura = 720')
Firefox = webdriver.Firefox (ejecutable_path = "./controladores/geckodriver ", options = firefoxoptions)
pageUrl = "https: // www.W3Schools.com ";
Firefox.Get (Pageurl)
Firefox.save_screenshot ('Images/w3schools_firefox.png ')
Firefox.cerca()
Una vez que haya terminado, guarde el ex01_firefox.py Guión de pitón.
La línea 4 crea un Opción Objeto para el navegador web Firefox.
La línea 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 a 720 píxeles.
La línea 9 crea un objeto del navegador usando el controlador de gecko de Firefox y lo almacena en el Firefox variable.
La línea 11 define un URL de la página variable. El URL de la página La variable contiene la URL de la página web de que Selenium va a capturar la captura de pantalla.
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, ejecuta el ex01_firefox.py Python script, como sigue:
$ python3 ex01_firefox.pyEn la ejecución exitosa del script, la captura de pantalla debe guardar 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.
Tomar 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 puede usar Firefox o cualquier otro navegador para esta sección.
Primero, crea el nuevo script de Python ex02.py y escriba las siguientes líneas de código en el script.
Desde Selenium Import WebDriverde Selenium.webdriver.común.llaves de importación de teclas
pageUrl = "https: // www.W3Schools.com/";
Resoluciones = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
Para resolución en resoluciones:
Imprimir ("Tomar captura de pantalla para resolución % s ..." % (Resolución.reemplazar (',', 'x')))
ChromeOptions = webdriver.ChromeOptions ()
cromeoptions.Sin cabeza = verdadero
cromeoptions.add_argument ('-window-size =' + resolución)
Chrome = webdriver.Chrome (ejecutable_path = "./controladores/cromedriver ", options = ChromeOptions)
cromo.Get (Pageurl)
OutputImage = 'Images/HomePage_Chrome_' + Resolución.reemplazar (',', '_') + '.png '
cromo.save_screenshot (outputinImage)
cromo.cerca()
imprimir ('guardado en %s.' % (outputinImage))
Una vez que haya terminado, guarde el ex02.py Guión de pitón.
La línea 4 define un URL de la página variable que contiene la URL de la página web. Me gustaría tomar capturas de pantalla en diferentes resoluciones de pantalla.
La línea 5 define un resolución Lista que contiene una lista de las resoluciones que me gustaría tomar capturas de pantalla de.
La línea 7 itera a través de cada uno de los resolucións en el resolución lista.
Dentro del bucle, la línea 8 imprime un mensaje significativo en la consola.
Líneas 10-15 Cree un objeto de navegador con el resolución de la iteración de 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 salida de salida variable.
La línea 20 toma una captura de pantalla de la ventana del navegador y la almacena en el camino salida de salida.
La línea 21 cierra el navegador.
La línea 22 imprime un mensaje significativo en la consola y finaliza el bucle.
Luego, el bucle comienza nuevamente con la siguiente resolución de pantalla (yo.mi., el siguiente elemento de la lista).
A continuación, ejecuta el ex02.py Python script, como sigue:
$ python3 ex02.pyEl guión 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.comunicarse en 320 píxeles de ancho.
Captura de pantalla de W3Schools.comunicarse en 500 píxeles de ancho.
Captura de pantalla de W3Schools.comunicarse En el ancho de 720 píxeles.
Captura de pantalla de W3Schools.comunicarse En 1366 píxeles de ancho.
Captura de pantalla de W3Schools.comunicarse 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. Usando 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 de tomar capturas de pantalla usando 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.