Pruebas de Aplicaciones Web con Playwright

Rate this content
Bookmark

Las pruebas son difíciles, las pruebas requieren tiempo para aprender y escribir, y el tiempo es dinero. Como desarrolladores queremos probar. Sabemos que deberíamos pero no tenemos tiempo. Entonces, ¿cómo podemos conseguir que más desarrolladores hagan pruebas? Podemos crear mejores herramientas.

Permíteme presentarte a Playwright - Pruebas confiables de extremo a extremo en diferentes navegadores para aplicaciones web modernas, por Microsoft y completamente de código abierto. El codegen de Playwright genera pruebas para ti en JavaScript, TypeScript, Dot Net, Java o Python. Ahora realmente no tienes excusas. Es hora de jugar tus pruebas correctamente.

This talk has been presented at TestJS Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Playwright es una herramienta de pruebas de extremo a extremo para aplicaciones web modernas que funciona en cualquier navegador y plataforma. Permite ejecutar pruebas en aislamiento completo, mejorar la rapidez y la eficiencia de las pruebas, y soporta múltiples lenguajes de programación como C Sharp, Java, Python, JavaScript y TypeScript.

Playwright es compatible con los navegadores Chromium, Firefox y WebKit. Puedes elegir instalar todos ellos o solo uno específico según tus necesidades de prueba.

Sí, Playwright es multi-idioma y permite ejecutar pruebas en C Sharp, Java, Python, JavaScript y TypeScript, ofreciendo flexibilidad para que los equipos utilicen el lenguaje con el que se sientan más cómodos.

Al instalar Playwright y marcar la opción de GitHub Actions, se generará automáticamente una configuración que permite ejecutar tus pruebas en GitHub CI cada vez que hagas un push o una solicitud de extracción, sin necesidad de configuración adicional.

Los localizadores en Playwright son una forma de encontrar elementos en la página en cualquier momento, con espera automática incorporada y capacidad de reintento. Son estrictos por defecto y se utilizan para asegurar que las pruebas sean precisas y confiables.

Sí, Playwright incluye herramientas como Code Gen, que genera pruebas grabando tus acciones en el navegador, y el visor Trace, que permite ver un registro detallado de lo que sucede durante las pruebas para facilitar la depuración.

Puedes instalar Playwright en VSCode buscando la extensión de Playwright para VSCode de Microsoft en tu panel de comandos, luego escribe 'Instalar Playwright' y haz clic en eso. Esto te permitirá seleccionar los navegadores que deseas y configurar otras opciones.

Debbie O'Brien
Debbie O'Brien
20 min
03 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Pruebas de aplicaciones web con Playwright, una herramienta de prueba de extremo a extremo confiable. Playwright ofrece ejecución rápida, herramientas poderosas y soporte para múltiples idiomas. Proporciona selectores precisos, afirmaciones web-first y generación de código para pruebas fáciles. Playwright también ofrece características como depuración en vivo, rastreo y ejecución de pruebas en CI. El futuro de Playwright tiene como objetivo hacer las pruebas fáciles y divertidas, con un enfoque en la creación de experiencias web sin frustraciones.
Available in English: Boost Testing with Playwright

1. Introducción a las pruebas con Playwright

Short description:

Pruebas de aplicaciones web con Playwright. Las pruebas con Playwright son pruebas de extremo a extremo confiables para aplicaciones web modernas. Funciona en cualquier navegador y en cualquier plataforma. Las pruebas se ejecutan en total aislamiento, con una ejecución rápida y herramientas poderosas. Puedes ejecutar tus pruebas en varios idiomas, como C#, Java, Python, JavaScript o TypeScript. La extensión de VSCode para Playwright proporciona una integración perfecta y te permite elegir navegadores, configurar opciones y utilizar GitHub Actions para pruebas automatizadas.

♪♪♪ Pruebas de aplicaciones web con Playwright. Es hora de hacer tus pruebas correctamente. Hola a todos. Mi nombre es Debbie O'Brien. Soy Gerente de Programa Senior en Microsoft, y básicamente estoy trabajando en la promoción de Playwright. Soy una oradora internacional, profesora, YouTuber, contribuyente de open-source, y puedes seguirme en Twitter, devs underscore o'brien, para verme corriendo y haciendo ciclismo y todo tipo de deportes en la isla de Mallorca en España.

Así que estamos aquí para hablar de pruebas, así que vamos directo al grano. Pruebas con Playwright, pruebas de extremo a extremo confiables para aplicaciones web modernas, funciona en cualquier navegador. No importa en qué plataforma estés. Cualquier navegador, cualquier plataforma. Una API. Las pruebas se ejecutan en total aislamiento. Eso significa que una prueba está aquí con un contexto de navegador, otra prueba está aquí. No se filtran cosas entre sí, ¿verdad? Así que todo aquí está en total aislamiento de la otra prueba aquí. Ejecución rápida. Tenemos herramientas poderosas, de las que voy a hablar mucho en esta charla, y multi-idioma, lo que significa que puedes ejecutar tus pruebas en C Sharp, en Java, en Python, o en JavaScript y TypeScript. Te voy a mostrar TypeScript hoy, pero puedes elegir cualquiera de los otros idiomas que quieras. Así que te voy a mostrar la extensión de VSCode porque realmente me encanta la integración con VSCode. Es muy, muy genial, pero no te preocupes, todavía puedes usar Visual Studio. Todavía puedes usar simplemente una terminal o lo que prefieras. Pero déjame mostrarte la extensión. Así que busca la prueba de Playwright para la extensión de VSCode de Microsoft, y luego básicamente en tu panel de comandos, solo escribe Instalar Playwright, y haz clic en eso. Y lo que obtienes es, ahora puedes seleccionar los navegadores, y puedes elegir Chromium, Firefox o WebKit. Puedes elegir todos ellos o solo uno de ellos. Y más tarde puedes configurarlo, así que no te preocupes demasiado si no estás seguro de cuál quieres. Hay otra opción allí, usar JavaScript. Si no quieres usar TypeScript, es TypeScript por defecto, pero puedes usar JavaScript si lo prefieres. Y luego también las GitHub Actions. Al hacer clic en esa casilla, vamos a obtener una GitHub Actions, y básicamente va a funcionar de inmediato sin que tengas que configurar nada. Podrás ejecutar tus pruebas en GitHub, en CI en cada push y solicitud de extracción.

2. Ejecución de pruebas y depuración en vivo con Playwright

Short description:

Una vez que hayas instalado Playwright, tendrás acceso a la carpeta de GitHub con acciones, una carpeta de pruebas con archivos de ejemplo y la configuración de Playwright. Ejecutar pruebas es fácil con la extensión de VS Code, que proporciona depuración en vivo y mensajes de error. Al establecer puntos de interrupción, puedes analizar y depurar tus pruebas para resolver cualquier problema. Playwright también ofrece ejecución de pruebas en paralelo y la opción de mostrar u ocultar la ventana del navegador durante las pruebas.

Entonces, una vez que hayas instalado, obtendrás esto. Obtendrás esa carpeta de GitHub allí con las acciones dentro de ella, y obtienes una carpeta de pruebas, cuando tienes el archivo example.spec.ts. Eso tendrá una prueba muy pequeña allí, que vamos a repasar hoy, y luego hay un archivo de ejemplo de prueba, que tiene una aplicación de demostración de tareas pendientes, y puedes echarle un vistazo en más detalle.

Y luego la configuración de Playwright, en caso de que quisieras agregar más tarde o eliminar algunos de esos navegadores, o poner testing para Safari móvil, o configurar un servidor de desarrollo para ejecutar tu aplicación en localhost 3000 antes de ejecutar tus pruebas, etc. Puedes hacer todo eso en la configuración, pero rara vez necesitas tocar la configuración, porque todo simplemente funciona.

Entonces, cuando quieras ejecutar pruebas, puedes ejecutar todas las pruebas. Puedes ejecutar un conjunto de pruebas, una sola prueba, y las pruebas se ejecutan en paralelo. Sin que tengas que hacer nada, se ejecuta automáticamente en paralelo, lo que las hace súper rápidas. Así que voy a ejecutar las pruebas usando la extensión de VS Code. De nuevo, podrías usar la terminal y simplemente poner npx.playwritetest, pero aquí en la línea tres, verás este encantador triángulo verde. Así que voy a hacer clic en eso, y luego básicamente, va a ir bajando por cada línea, y va a ejecutar la prueba. Ahora, puedes ver que abrió una ventana del navegador para mí, y pude ver todo lo que está pasando. Lo voy a reproducir de nuevo. Puedes ver que es súper rápido, ¿verdad? Eso es porque tengo marcada esta opción de mostrar el navegador, y puedes desmarcar eso si quieres. Si no quieres ver el navegador, si quieres ver el navegador, asegúrate de que eso esté marcado.

Entonces, la depuración en vivo, si tienes algún error en tu prueba, quiero decir, nunca tienes errores, ¿verdad? Pero si tienes algún error o algo así, tienes depuración en vivo y mensajes de error en el propio VS Code. Entonces, de nuevo, tenemos nuestra prueba aquí en VS Code, y simplemente voy a romper esto aquí, ¿verdad? Entonces getByText, voy a ejecutar esa prueba, va a fallar, y dice, error, violación del modo estricto. Entonces Playwright está diciendo, Oye, mira, hay uno, dos, tres elementos allí, y puedes tener todo el registro. Ahora, si no quieres leer el registro o no entiendes el registro, básicamente podrías establecer un punto de interrupción, y podrías ejecutar esa prueba de nuevo, para que puedas verlo. Así que lo ejecuto en modo de depuración, y ahora podemos pasar por eso y ver qué está pasando. Entonces, en este punto en el tiempo, Playwright está diciendo, Oye, mira, getByText, se resolvió a tres elementos. Aquí está uno de ellos. Aquí está el otro. Y en la parte inferior, tenemos otro que tiene la palabra estrella dentro de ese texto de inicio. Entonces Playwright no sabe cuál quieres que elija. Así que está diciendo, Oye, esto está rompiendo la violación estricta. Entonces puedes jugar y depurar en vivo esto y decir, Bueno, ¿qué pasa si pongo obtener estrella? Obtener estrella solo se resuelve a uno, así que eso estaría bien. Eso funcionaría. De nuevo, podemos volver aquí y jugar y poner algo como, imagina que ponemos Playwright, ¿verdad? Ponemos Playwright. Hay demasiados, ¿vale? Oye, hay como 12 de estos.

QnA

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

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.
Todos pueden escribir pruebas fácilmente
TestJS Summit 2023TestJS Summit 2023
21 min
Todos pueden escribir pruebas fácilmente
Playwright is a reliable end-to-end testing tool for modern web apps that provides one API, full isolation, fast execution, and supports multiple languages. It offers features like auto-weighting, retrying assertions, seamless testing of iframes and shadow DOM, test isolation, parallelism, and scalability. Playwright provides tools like VS Code extension, UiMode, and Trace Viewer for writing, debugging, and running tests. Effective tests prioritize user-facing attributes, use playwright locators and assertions, and avoid testing third-party dependencies. Playwright simplifies testing by generating tests, providing code generation and UI mode, and allows for easy running and debugging of tests. It helps in fixing failed tests and analyzing DOM changes, fixing locator mismatches, and scaling tests. Playwright is open source, free, and continuously growing.
Pruebas pequeñas, grandes resultados
TestJS Summit 2022TestJS Summit 2022
21 min
Pruebas pequeñas, grandes resultados
Automated atomic tests are a great way to improve UI tests by making them less brittle and faster. The tests focus on testing a single feature or component and have minimal UI interactions. The Talk explores examples of automated atomic tests and their implementation on web applications. It also discusses the analysis of atomic tests, login tests, and working with JSON Web Tokens for authentication and authorization. The Talk concludes by highlighting the use of UI and web requests in automated atomic testing.
Quizá No Necesitemos Pruebas de Componentes
Vue.js Live 2024Vue.js Live 2024
26 min
Quizá No Necesitemos Pruebas de Componentes
Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.
Prueba del Servicio de Correo con Playwright
TestJS Summit 2022TestJS Summit 2022
17 min
Prueba del Servicio de Correo con Playwright
Top Content
This Talk discusses how to test mail service with Playwright, covering e-mail verification, reset password user journey, and more. It explores the use of third-party providers for reliable e-mail delivery and demonstrates how Playwright can help perform checks on e-mail content. The Talk also introduces the concept of a fake SMTP server and showcases how fixtures can be used to access the SMTP server and perform assertions on the HTML body of emails. Playwright's HTML rendering feature allows for interaction with email content as if it were a regular web page. It highlights the ability to render HTML from API calls, perform assertions on the rendered page, and exclude dynamically generated data from visual regression tests.
Pruebas E2E para Aplicaciones Web3
TestJS Summit 2022TestJS Summit 2022
21 min
Pruebas E2E para Aplicaciones Web3
Top Content
In this Talk, Rafaela discusses Web3, its decentralized and token-based model, and the architecture based on smart contracts. Testing Web3 poses challenges due to the need for third-party providers like MetaMask. Approaches such as mocking the Web3 flow and using end-to-end testing tools like Taskafar are suggested. The trade-offs in Web3 testing include test speed and dependency on third-party apps. Balancing unit, integration, and end-to-end tasks is crucial for a robust testing strategy.

Workshops on related topic

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
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Construyendo una suite de pruebas significativa que no sea todo E2E
TestJS Summit 2023TestJS Summit 2023
89 min
Construyendo una suite de pruebas significativa que no sea todo E2E
Workshop
David Burns
David Burns
Todos somos enseñados a seguir la Pirámide de Pruebas pero la realidad es que construimos el Árbol de Pruebas de Navidad. En esta masterclass, David te explicará cómo desglosar proyectos y poner las pruebas donde necesitan estar. Al final de la masterclass, podrás actualizar tus proyectos para que cualquiera y todos puedan empezar a contribuir y realmente vivir según "La calidad es el trabajo de todos".
Te guiará a través de:- Pruebas de Componentes- Pruebas de API- Pruebas de Regresión Visual- Pruebas A11Y
También te explicará cómo configurar todo esto en tu pipeline de CI/CD para que puedas obtener ciclos de feedback más cortos y rápidos.
Depuración en vivo de pruebas de extremo a extremo para una aplicación serverless distribuida
TestJS Summit 2021TestJS Summit 2021
146 min
Depuración en vivo de pruebas de extremo a extremo para una aplicación serverless distribuida
WorkshopFree
Serkan Ozal
Oguzhan Ozdemir
2 authors
En este masterclass, construiremos un entorno de pruebas para una aplicación preconstruida, luego escribiremos y automatizaremos pruebas de extremo a extremo para nuestra aplicación serverless. Y en el último paso, demostraremos lo fácil que es entender la causa raíz de una prueba errónea utilizando pruebas distribuidas y cómo depurarla en nuestro pipeline de CI/CD con Thundra Foresight.

Tabla de contenidos:
- Cómo configurar y probar tu infraestructura en la nube
- Cómo escribir y automatizar pruebas de extremo a extremo para tus cargas de trabajo serverless
- Cómo depurar, rastrear y solucionar problemas de fallas en las pruebas con Thundra Foresight en tus pipelines de CI/CD
Infraestructura Uniforme de Automatización de Navegadores
TestJS Summit - January, 2021TestJS Summit - January, 2021
127 min
Infraestructura Uniforme de Automatización de Navegadores
Workshop
Ivan Krutov
Ivan Krutov
En este masterclass, te mostraré cómo implementar y utilizar rápidamente una infraestructura de automatización de navegadores con la solución Moon. Comenzaremos implementando todo en tu estación de trabajo y pronto podrás ejecutar pruebas de Selenium, Playwright y Puppeteer en paralelo en el mismo clúster. Luego, te demostraré cómo ofrecer la misma experiencia de manera sencilla para tu equipo utilizando un clúster remoto en la plataforma de la nube.