Tres formas de automatizar tu navegador, y por qué estamos agregando una cuarta: WebDriver BiDi

Rate this content
Bookmark

Un recorrido por las abrumadoras formas de automatizar navegadores. Únete a Michael en un recorrido para ver qué sucede detrás de escena de "await page.goto('https://example.com');" y otros. Descubre los pros y los contras de cada una de las tres formas de automatización de navegadores.


Entiende por qué estamos agregando una cuarta: WebDriver BiDi.

This talk has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

La automatización del navegador es un proceso que automatiza las interacciones del usuario con un navegador web, simulando las acciones de un usuario real. Funciona almacenando estas interacciones, como código fuente, y luego reproduciéndolas para ejecutar pruebas, extraer datos o manipular elementos de la página.

Los principales beneficios incluyen la reducción de los costos continuos de prueba, la mejora de la precisión en la detección de errores y deficiencias en aplicaciones, y la posibilidad de realizar pruebas repetitivas sin intervención manual, lo que permite a los desarrolladores centrarse en tareas más complejas.

Herramientas como Selenium, Nightwatch.js y WebDriverIO utilizan el Protocolo WebDriver para automatizar navegadores, permitiendo la ejecución de pruebas a través de comandos que se traducen en acciones dentro del navegador.

WebDriver Bidi es un nuevo estándar para la automatización de navegadores que combina los beneficios de WebDriver y CDP, ofreciendo controles de bajo nivel y comunicación bidireccional. Proporciona soporte multi-navegador y está diseñado específicamente para pruebas, mejorando la eficiencia y la capacidad de realizar pruebas más complejas.

CDP, usado por herramientas como Puppeteer, ofrece un control de bajo nivel y es rápido ya que comunica directamente con navegadores basados en Chromium sin necesidad de un controlador. WebDriver, aunque es más lento y menos detallado en control, es un estándar con soporte multi-navegador. Ambos tienen ventajas únicas según el contexto de uso.

Puppeteer es una biblioteca de automatización de Chrome que utiliza internamente el protocolo Chrome DevTools (CDP) para automatizar navegadores basados en Chromium. Permite enviar comandos directamente al navegador a través de WebSockets, facilitando la automatización de pruebas y otras tareas de automatización del navegador.

Con WebDriver Bidi, herramientas como Selenium y Puppeteer pueden comenzar a utilizar controles bidireccionales, permitiendo una integración más eficiente y avanzada con el navegador. Esto reduce la necesidad de utilizar directamente CDP y aprovecha las ventajas de una comunicación más fluida y controles más detallados.

Michael Hablich
Michael Hablich
19 min
05 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla discute técnicas de automatización de navegadores, incluida la introducción de un nuevo controlador web. Cubre la historia de la automatización de navegadores, diferentes técnicas para automatizar navegadores y el uso de API web y extensiones de navegador. La charla también explica cómo las herramientas de automatización se comunican con los controladores de navegador y los desafíos de esperar a que los elementos aparezcan en la pantalla. Destaca las diferencias entre el protocolo WebDriver y el protocolo Chrome DevTools, e introduce el proyecto WebDriver Bidirection que tiene como objetivo combinar las mejores partes de ambos protocolos. Por último, menciona el soporte de WebDriver Bidi para la supervisión de la consola e introduce WebDriver ByteEye como una opción estable de automatización.

1. Introducción a la Automatización del Navegador

Short description:

Soy Michael Hablich, un gerente de producto en el equipo de Chrome, trabajando en reducir la fricción de probar y depurar aplicaciones web. Hoy hablaré sobre las técnicas de automatización del navegador y por qué estamos agregando una cuarta, el controlador web. La garantía de calidad y las actividades de prueba representan una gran parte del costo de desarrollo de software, y la automatización de pruebas es una forma muy buena de reducir los costos continuos de prueba. La automatización del navegador automatiza las interacciones del usuario y finge ser un usuario, con casos de uso típicos que incluyen la automatización de pruebas, la extracción de datos web y la representación de partes de páginas como anuncios. Hagamos un breve recorrido por la historia de la automatización del navegador, desde las API nativas en los años 90 hasta las complejidades de los applets de Java y Flash en los años 2000.

fricción de probar y depurar aplicaciones web. Hoy tengo el honor de hablar sobre las técnicas de automatización del navegador y por qué estamos agregando una cuarta, el controlador web. He pasado alrededor de 20 años trabajando en tecnología. Gran parte de esto ha sido construyendo soluciones de automatización de pruebas para empresas. Se podría decir que me he divertido mucho automatizando navegadores, aplicaciones .NET y tecnologías más especializadas como Power Builder. Entonces, ¿por qué estoy aquí? Bueno, el equipo de Chrome revisa periódicamente la satisfacción de los desarrolladores web y, sorpresa, la prueba, en particular, en diferentes navegadores, es uno de los principales puntos problemáticos para los desarrolladores web. La garantía de calidad y las actividades de prueba representan una gran parte del costo de desarrollo de software, y no se pueden eliminar fácilmente. La garantía de calidad es necesaria porque o bien sus aplicaciones de prueba o sus usuarios están llenos, y esto último tiene cierto riesgo asociado. Y la automatización de pruebas es una forma muy buena de reducir los costos continuos de prueba. Entonces, primero definamos un poco en qué consiste la automatización del navegador y veamos brevemente cómo funciona. La automatización del navegador simplificada automatiza las interacciones del usuario y finge ser un usuario. A menudo, estas interacciones se almacenan como código fuente, como se ve en el lado izquierdo. Estas interacciones se reproducen, como se puede ver en el lado derecho. Los casos de uso típicos de las tecnologías de automatización del navegador son la automatización de pruebas, la extracción de datos web o la representación de partes de páginas como anuncios. Hoy me enfocaré en la primera automatización de pruebas. Las diapositivas anteriores mostraron el estado actual de la automatización del navegador, pruebas definidas en JSON y JavaScript. Automatización rápida y estable, y así sucesivamente. Antes de llegar a este lugar tan acogedor, ocurrió mucha historia. Hagamos un breve recorrido. La web nació en los años 90. Las personas comenzaron a usar navegadores en un conjunto limitado de pantallas grandes. Las pruebas en estas décadas se realizaron principalmente con contenido. Navegadores como Netscape Navigator o Internet Explorer fueron lanzados. La automatización del navegador en ese momento se realizaba a través de las API nativas. Por ejemplo, todavía recuerdo usar Visual Basic 6 para automatizar Internet Explorer. En 1996, los applets de Java y Flash se hicieron populares. Esto complicó aún más la automatización de páginas web porque las API de automatización del navegador proporcionadas por los proveedores de navegadores no funcionaban para aplicaciones Java y contenedores Flash. Las pruebas manuales o la inyección de scripts eran la forma de proceder para estas tecnologías. En los años 2000, más navegadores se unieron

2. Técnicas de Automatización del Navegador

Short description:

Los desarrolladores comenzaron a construir experiencias web ricas e interactivas. Selenium y WebDriver fueron creados para abordar los desafíos de automatización de pruebas, siendo WebDriver un estándar de W3C. Se introdujeron múltiples bibliotecas de pruebas de JavaScript que utilizaban diferentes técnicas para automatizar navegadores. Cubriremos el Protocolo WebDriver, el Protocolo Chrome DevTools y las API web junto con las extensiones del navegador. Hay dos categorías principales: alto nivel, ejecutando JavaScript inyectado, y bajo nivel, ejecutando comandos remotos. Nos centraremos en el enfoque de utilizar las API web y las extensiones del navegador para construir una capa de automatización.

escenas, incluyendo Chrome. Los desarrolladores comenzaron a construir experiencias muy ricas e interactivas en la web. YouTube y Google Maps son algunos ejemplos tempranos muy buenos de esto. Con la aparición de los teléfonos inteligentes, aumentó la necesidad de automatización de pruebas debido a la compatibilidad entre navegadores y dispositivos. Surgieron Selenium y el proyecto WebDriver para resolver los desafíos de automatización de pruebas. En ese momento, era común escribir pruebas de Selenium en Java. En 2009, Node.js llevó el desarrollo de JavaScript al backend. Además, permitió ejecutar pruebas escritas en JavaScript. Aparecieron más frameworks de JavaScript. Al mismo tiempo, Selenium y WebDriver se fusionaron en un solo proyecto llamado Selenium-WebDriver. Con la creciente popularidad, el proyecto se convirtió en un estándar de W3C en 2018, y lo llamamos WebDriver Classic. Con más desarrolladores construyendo aplicaciones más ricas en JavaScript, estos desarrolladores también querían realizar automatización de pruebas en JavaScript. Se introdujeron múltiples bibliotecas de pruebas basadas en la web en respuesta a estas necesidades, y no todas utilizan WebDriver como tecnología de automatización subyacente. Utilizan diferentes técnicas para automatizar el navegador, de las cuales hablaremos hoy. Cubriremos el Protocolo WebDriver, utilizado por soluciones como Selenium, Nightwatch.js o WebDriverIO, el Protocolo Chrome DevTools, CDP en resumen, que impulsa Puppeteer, la propia biblioteca de automatización de Chrome, y PlayWrite, y las API web junto con las extensiones del navegador, utilizadas por Taskcafe o Cypress, por ejemplo. Comencemos y retrocedamos un poco y hablemos de cómo las herramientas automatizan los navegadores. Mencioné tres formas principales de automatizar un navegador. Bueno, también se dividen en dos categorías principales. Intensifiquemos un poco la complejidad, porque tenemos el alto nivel, que ejecuta JavaScript inyectado en el navegador, y el bajo nivel, que ejecuta comandos remotos. Por ejemplo, Cypress utiliza extensiones del navegador y Node.js para ejecutar una prueba directamente en el navegador. Para tener un mayor control del navegador, como abrir múltiples pestañas y probar iframes de terceros, debemos profundizar y ejecutar comandos remotos. Con otras técnicas, y llamémoslo simplemente protocolos. Los dos protocolos comunes son WebDriver, Chrome, y el protocolo DevTools de Chrome, Cpp en resumen. Exploraremos todo esto juntos en breve. No se preocupen. Voy a comenzar con el enfoque de utilizar las API web y las extensiones del navegador para construir su propia capa de automatización. Esencialmente, las soluciones aprovechan y lanzan las API web, la inyección de JS, extensiones del navegador, proxies, etc., para construir su propia capa de automatización. Detallar esto aquí sería demasiado extenso para la charla. Así que me detendré aquí y pasaré a WebDriver, la técnica de automatización basada en un estándar. Es uno de los niveles bajos.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Pruebas de ciclo completo con Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Pruebas de ciclo completo con Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.
Playwright Test Runner
TestJS Summit 2021TestJS Summit 2021
25 min
Playwright Test Runner
Top Content
The Playwright Test Runner is a cross-browser web testing framework that allows you to write tests using just a few lines of code. It supports features like parallel test execution, device emulation, and different reporters for customized output. Code-Gen is a new feature that generates code to interact with web pages. Playwright Tracing provides a powerful tool for debugging and analyzing test actions, with the ability to explore trace files using TraceViewer. Overall, Playwright Test offers installation, test authoring, debugging, and post-mortem debugging capabilities.

Workshops on related topic

Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Cómo empezar con Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
Cómo empezar con Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
La web ha evolucionado. Finalmente, también lo ha hecho el testing. Cypress es una herramienta de testing moderna que responde a las necesidades de testing de las aplicaciones web modernas. Ha ganado mucha popularidad en los últimos años, obteniendo reconocimiento a nivel mundial. Si has estado esperando aprender Cypress, ¡no esperes más! Filip Hric te guiará a través de los primeros pasos sobre cómo empezar a usar Cypress y configurar tu propio proyecto. La buena noticia es que aprender Cypress es increíblemente fácil. Escribirás tu primer test en poco tiempo y luego descubrirás cómo escribir un test de extremo a extremo completo para una aplicación web moderna. Aprenderás conceptos fundamentales como la capacidad de reintentar. Descubre cómo trabajar e interactuar con tu aplicación y aprende cómo combinar pruebas de API y de UI. A lo largo de todo este masterclass, escribiremos código y realizaremos ejercicios prácticos. Saldrás con una experiencia práctica que podrás aplicar a tu propio proyecto.
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Masterclass de Pruebas de API con Postman
TestJS Summit 2023TestJS Summit 2023
48 min
Masterclass de Pruebas de API con Postman
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
En el panorama siempre en evolución del desarrollo de software, garantizar la fiabilidad y funcionalidad de las API se ha vuelto primordial. "Pruebas de API con Postman" es una masterclass completa diseñada para equipar a los participantes con los conocimientos y habilidades necesarios para sobresalir en las pruebas de API utilizando Postman, una herramienta poderosa ampliamente adoptada por profesionales en el campo. Esta masterclass profundiza en los fundamentos de las pruebas de API, avanza a técnicas de prueba avanzadas y explora la automatización, las pruebas de rendimiento y el soporte multiprotocolo, proporcionando a los asistentes una comprensión holística de las pruebas de API con Postman.
Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.