Playwright Test Runner

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

FAQ

Playwright Test es un marco de pruebas web escrito en Node.js que permite escribir pruebas en JavaScript o TypeScript. Es gratuito, de código abierto y está patrocinado por Microsoft.

Se creó Playwright Test Runner para abordar los desafíos específicos de las pruebas de extremo a extremo, ofreciendo soporte para pruebas multi-navegador, paralelización y aislamiento eficiente mediante un conjunto único de APIs.

Para instalar Playwright en un proyecto, se puede utilizar el comando 'npm init Playwright', el cual configura automáticamente el proyecto para usar Playwright, incluyendo la instalación de dependencias y la descarga de navegadores.

En Playwright puedes escribir tus pruebas en TypeScript o JavaScript, ya que el entorno soporta la transpilación de TypeScript a JavaScript sin necesidad de configuraciones adicionales como Babel o Webpack.

Sí, Playwright está diseñado para soportar la ejecución de pruebas en múltiples navegadores. Incluso permite configurar proyectos para correr pruebas en distintos entornos como Chrome de escritorio, Firefox de escritorio, Safari de escritorio, y emulaciones móviles.

Playwright facilita el debugging de pruebas mediante el uso del flag '-debug' que abre el inspector de Playwright UI, donde se puede monitorear y controlar la ejecución de las pruebas paso a paso.

El trazado en Playwright es una herramienta de depuración que captura información detallada sobre la ejecución de pruebas, incluyendo screencasts, registros de red y de consola, y capturas de DOM. Los datos se guardan en un archivo trace.zip que se puede explorar usando TraceViewer o en trace.playwright.dev.

Andrey Lushnikov
Andrey Lushnikov
25 min
18 Nov, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El Playwright Test Runner es un marco de pruebas web multi-navegador que te permite escribir pruebas con solo unas pocas líneas de código. Soporta características como la ejecución de pruebas en paralelo, la emulación de dispositivos y diferentes reporteros para una salida personalizada. Code-Gen es una nueva característica que genera código para interactuar con páginas web. Playwright Tracing proporciona una herramienta poderosa para depurar y analizar acciones de prueba, con la capacidad de explorar archivos de rastreo utilizando TraceViewer. En general, Playwright Test ofrece capacidades de instalación, autoría de pruebas, depuración y depuración post-mortem.
Available in English: Playwright Test Runner

1. Introducción al Playwright Test Runner

Short description:

Hola a todos, mi nombre es Andrej, y hoy me gustaría presentarles el nuevo Playwright Test Runner. Playwright Test es un marco de pruebas web multi-navegador escrito en Node.js. Es gratuito y de código abierto, patrocinado por Microsoft, y ampliamente utilizado en la industria. Playwright Test fue construido específicamente para abordar todas las necesidades de pruebas de extremo a extremo. Vamos a saltar directamente al primer capítulo, que es comenzar. Crearé una nueva carpeta, inicializaré un nuevo proyecto npm usando Playwright, y responderé algunas preguntas para configurar el proyecto.

Hola a todos, mi nombre es Andrej, y hoy me gustaría presentarles el nuevo Playwright Test Runner. Así que empecemos. Primero que nada, ¿qué es Playwright Test? Bueno, es un marco de pruebas web testing framework escrito en Node.js, lo que básicamente significa que puedes escribir tus pruebas en JavaScript o TypeScript. Ahora es gratuito y de código abierto y patrocinado por Microsoft y ya se utiliza ampliamente en la industria. Ahora esto está bien, pero no responde a la gran pregunta que se cierne. Entonces, ¿por qué hicimos otro Test Runner? Honestamente, no teníamos la intención de hacerlo. Hay muchos corredores de pruebas diferentes en JavaScript, resulta que todos son corredores de unit test. Mientras que en las pruebas de extremo a extremo, hay muchos desafíos muy difíciles. Entonces, por ejemplo, quieres que tu corredor de pruebas soporte pruebas multi-navegador de serie. También quieres que estén paralelizadas de serie. Y quieres que estén aisladas, y Playwright, por ejemplo, tiene un conjunto de APIs únicas para asegurarse de que el aislamiento de las pruebas sea rápido y fiable. Y por supuesto, queremos que se utilicen. Y por último, pero no menos importante, la historia muestra que las pruebas de extremo a extremo requieren un nivel de flexibilidad y configuración loca, porque hay muchas configuraciones diferentes que queremos usar para ejecutar la misma prueba. Y Vivio se inspiró en los fixtures de PyTest, por lo que los fixtures están implementados en PlayWriteTest también. Así que PlayWriteTest es nuestra respuesta a las pruebas de extremo a extremo. Y este es el corredor de pruebas que se construyó específicamente para abordar todas las necesidades de pruebas de extremo a extremo.

Así que tenemos bastante de qué hablar en esta charla, y solo tenemos 20 minutos. Así que vamos a saltar directamente al primer capítulo, que es comenzar. Bueno, la mejor manera de mostrar algo es realmente mostrar algo. Así que permíteme saltar a mi terminal y crearé una nueva carpeta. Y empezaré desde cero e inicializaré un nuevo proyecto npm. Ahora hagamos npm init PlayWrite. Y lo que esto hace es configurar este proyecto para usar PlayWrite para mí. Mientras lo hace, me hará todo tipo de preguntas diferentes. Por ejemplo, ¿qué idioma quiero usar para escribir pruebas? Y es TypeScript porque en realidad no necesito configurar nada adicional, puedo simplemente escribir mis pruebas en TypeScript y serán transpiladas a JavaScript y se ejecutarán sin problemas, no necesito hacer Babel y Webpack o cualquier cosa. Me preguntará dónde poner mis pruebas, por supuesto quiero tener un flujo de trabajo de GitHub Actions, y sí, los ejemplos son buenos. Así que una vez que respondí todas las preguntas, instala todas las dependencias para el NPM, descarga todos los navegadores, ya los tengo descargados así que estos se han reutilizado. Y ahora estoy aquí con un montón de fuentes pre-creadas para mí.

2. Playwright Test Runner: Características y Configuración

Short description:

El Playwright Test Runner te permite escribir pruebas con solo unas pocas líneas de código. Proporciona una página de prueba bien aislada para cada prueba, asegurando que no haya conflictos entre páginas o estados. Puedes navegar la página de prueba a un sitio web específico, localizar elementos e interactuar con ellos. El archivo de configuración te permite configurar diferentes entornos, como ejecutar pruebas en diferentes navegadores. El Playwright Test Runner soporta pruebas en diferentes navegadores, emulación de dispositivos y ejecución de pruebas en paralelo de forma predeterminada.

Vamos a examinar estas fuentes. Primero tenemos este ejemplo de prueba de extremo a extremo. Son solo siete líneas de code y vamos a fingir que no sabemos qué es Playwright, solo vamos a leerlo. Entonces, en la primera línea importamos algo, test y expect del paquete que acabamos de instalar. Ahora resulta que test es una función y la usamos para crear una prueba. Le damos un nombre básico y le pasamos un callback que es en realidad el cuerpo de la prueba. Curiosamente, como argumento en el cuerpo de la prueba, tenemos esta página que proviene del Playwright test framework. Esta es una página de prueba bien aislada que es diferente para cada prueba y ninguna prueba tiene páginas o estados en conflicto. Así que este es el aislamiento del que hablamos. Esta es una página de navegador por lo que podemos navegarla a un sitio web específico y luego podemos localizar un elemento usando un texto en la página y después de eso podemos hacer clic en lo que localizaste. Y todo es asíncrono por lo que esperamos a que se complete. Parece que hace algún tipo de navegación así que después de esto podemos esperar que la página tenga un título específico como 'getting started regex'. Bastante transparente.

OK ¿qué más tenemos? Tenemos este archivo de configuración. Esta vez voy a usar Wim para entrar en él. Ahora este es un archivo generado y tiene muchos comentarios por lo que puedes fácilmente revisarlo y entender qué está pasando. No necesitamos nada de esto. Quiero centrarme en este array de proyectos. Ahora los proyectos son como entornos. Solo tenemos una prueba y queremos ejecutar esta prueba en diferentes navegadores como Firefox o Chrome y para eso son los proyectos. Así que aquí tenemos cinco proyectos preconfigurados para nosotros. Tenemos Chrome de escritorio, Firefox de escritorio, Safari de escritorio. Todo bien. E incluso tenemos emulación móvil para Pixel 5 que es Android y iPhone 12 que es un Safari móvil. Así que tenemos una prueba y cinco proyectos lo que significa que vamos a ejecutar cinco veces esta prueba. Veamos cómo sucede esto. Para ejecutar pruebas puedo hacer mbxplaywrite test y cuando ejecuto este comando se ejecutan cinco pruebas usando cinco trabajadores. Así que escribiremos que en realidad se ejecutan cinco pruebas lo cual es bueno. Pero lo otro importante es que en realidad se utilizan cinco trabajadores. Así que todas estas ejecuciones de pruebas están sucediendo en paralelo y en realidad solo toman ocho segundos lo cual es bastante rápido. Vale, así que de la caja no hicimos nada. Ya obtuvimos ejecuciones de pruebas en diferentes navegadores, nosotros

3. Ejecución de pruebas en paralelo y Code-Gen

Short description:

Podemos ejecutar pruebas en paralelo, personalizar la salida con diferentes reporteros como Allure, HTML y JUnit. Playwright tiene una API simple e intuitiva para controlar diferentes navegadores. También podemos usar Code-Gen para generar código e interactuar con páginas web.

obtuvimos la emulación de dispositivos y obtuvimos paralelos. Podemos ejecutar estas pruebas en paralelo en nuestra máquina, lo cual es muy poderoso. Ahorra mucho tiempo. Ahora sé que a la gente le encantan los reporteros y hay todo tipo de reporteros diferentes que podemos usar para personalizar la salida aquí. Entonces podemos usar un reportero de línea, por ejemplo, y esto nos da este elegante terminal interactivo. O puedo decir reportero HTML y esto me dará un resultado visual. Así que ejecutará todas las pruebas con un reportero de línea por defecto y me indicará que abra el resultado con este comando. Tengo mis pruebas. Se han ejecutado en cinco entornos diferentes, cinco proyectos diferentes y puedo hacer clic en mi prueba para explorar todas las acciones que sucedieron dentro de ella. Esto es bastante genial y poderoso. También he oído que a la gente le encanta Allure y en realidad puedes hacer npm install dashd AllurePlayWrite. Y esto añadirá un AllureReporter de terceros que puedes usar con el reportero AllurePlayWrite, así. Y esto en realidad generará un AllureReport para ti. Esta fue una demostración de inicio muy rápida. Hagamos un rápido resumen.

4. Uso de Playwright Test Runner y Code-Gen

Short description:

Podemos instalar Playwright en proyectos utilizando el script de ayuda npm init playwright. Una vez instalado, podemos ejecutar pruebas con npx playwright test. Playwright proporciona una API simple e intuitiva para controlar diferentes navegadores. Admite varios reporteros, incluyendo LUR, HTML y JUnit. Ahora, exploremos una nueva característica llamada Code-Gen. Al usar mpxplaywrite code-gen, podemos generar código e interactuar con páginas web. El código generado se puede utilizar para navegar por páginas web, interactuar con elementos y realizar acciones. También podemos ejecutar el script generado para verificar su funcionalidad.

Entonces, podemos instalar Playwright en proyectos con este script de ayuda npm init playwright. Y una vez que tenemos instalado Playwright, podemos ejecutar pruebas con npx playwright test. Y todo se ejecuta en paralelo. Y así es como se ve realmente Playwright. Es una API muy simple e intuitiva. Y esta es una única API para controlar todos los diferentes navegadores. Y por supuesto tenemos reporteros, tenemos un informe LUR, tenemos un informe HTML, incluso tenemos el informe JUnit si te gusta este tipo de cosas.

Bueno, acabamos de jugar con cómo empezar. Vamos a crear algunas pruebas nuevas. Y ahora quiero mostrarte una cosa nueva que se llama Code-Gen. Para esto, voy a limpiar mi pantalla. Haré mpxplaywrite code-gen y guardaré los resultados de lo que voy a generar en github.spec.gs. Al hacerlo, se abren dos ventanas. La primera ventana, la ventana del navegador, es solo una ventana de Chrome normal, mientras que la segunda es este Inspector de Playwright, y hablaremos de él un poco más tarde, y tiene este sombrío botón rojo de grabación resaltado. Ahora, todo lo que hago dentro del navegador es grabado por el grabador, y acabo de navegar a Microsoft, y tengo esta página code de navegación. Así que puedo seguir interactuando con mi página web. Puedo decir Playwright, espera a que busque, pulsa el botón Playwright. De hecho, en la página web tengo este cuadro negro con texto blanco debajo de mi cursor. Así que esto me muestra el selector que se usará mientras interactúo con la página. Así que pulsaré en problemas, y seguiré adelante. Vamos a hacer clic en Pawel. Esto es suficiente. Puedo apagar la grabación y cerrar mi navegador. Ahora, veamos si realmente hemos grabado cosas. Tenemos nuestro script, lo cual es bueno. Pero, ¿funciona? Entonces, para asegurarme de que realmente funciona, puedo ejecutar solo este archivo de github y de esta manera realmente filtro por nombre de archivo. Pero tenemos varios proyectos. No los necesito por ahora. Solo quiero ejecutar en desktop chrome, por ejemplo. Y realmente quiero que

5. Depuración de pruebas con el Inspector de Playwright

Short description:

En un modo encabezado, el script avanza en la ventana del navegador y se completa en 8 segundos. La creación de una nueva prueba con Codegen es fácil, y la depuración es sencilla con el comando dash dash debug. La interfaz de usuario del inspector de Playwright proporciona código fuente, control de ejecución y registros de acciones.

para ver cómo se ha ejecutado. Entonces, quiero ejecutarlo en un modo encabezado. Y esta es la ventana del navegador. Va, navega, y así es como avanza el script. Y finalmente, se completa en meros 8 segundos. Bastante rápido.

OK. Entonces, es realmente fácil crear una nueva prueba con Codegen, y si quiero cambiar algo, siempre puedo ir y saltar a mi editor de elección y cambiar ciertas líneas aquí y allá.

Ahora, supongamos que esta prueba en realidad no funciona. ¿Cómo la debug? Bueno, resulta que es bastante fácil. Solo puedo decir, dash dash debug para mi prueba. Y de nuevo, abrirá dos ventanas para mí. Esta es una ventana del navegador que ejecutará esta prueba. Y la redimensionaré para descubrir la segunda ventana, que es una ventana del inspector de Playwright. Así que no tuve la oportunidad de mostrarte este inspector de Playwright UI, así que aquí estoy. Déjame mostrarte alrededor. Tenemos cuatro partes de esta UI. En el centro mismo tenemos este código fuente de la prueba que estás debugging. Y tenemos una línea de ejecución resaltada, que en realidad está pausada en la posición actual de Playwright. Puedo controlar esta línea de ejecución usando el panel de control aquí. Por ejemplo, puedo hacer clic en step over para saltar este comando. Y a medida que paso por encima de la navegación, la página de Playwright en mi navegador navega. Aquí abajo tengo el registro de todas las acciones que Playwright está haciendo en realidad. Puedo ver que la página go to tuvo éxito. Hay una marca de verificación verde. Solo tomó dos segundos. Y estamos haciendo page click, y estamos pausados. Y puedes expandir estas acciones y ver qué está pasando en realidad dentro. Y page click ya está pre-expandido para mí. Y puedo ver todo tipo de cosas que están sucediendo aquí. Y, por ejemplo, Playwright estaba esperando que el elemento estuviera visible, y habilitado, y estable.

6. PlayWrite Test Runner: Depuración y Trazado

Short description:

La función de auto-ponderación garantiza que todos los clics se realicen con precisión. El selector de juegos permite una fácil selección y exploración de elementos en la página del navegador. El Inspector de PlayWrite proporciona una interfaz de usuario completa para la depuración de pruebas. El trazado de PlayWrite permite una inmersión profunda en los aspectos internos del navegador, las acciones de la consola, la red y el DOM de la página después de cada acción de prueba.

Y se desplaza a la vista, y hace todo tipo de cosas. Y esta es la auto-ponderación incorporada, y así es como realmente nos aseguramos de que todos tus clics estén sucediendo de verdad. Incluso nos aseguramos de que el elemento reciba eventos de puntero en una ubicación determinada. Y aquí es donde estamos a punto de hacer clic, y puedes ver esta ubicación en la ventana del navegador marcada con un punto rojo. Así que aquí es donde estamos apuntando ahora.

Vale. Por último, pero no menos importante, tenemos esta cuarta sección que es un selector de juegos. Y actualmente está resaltando este marcador de posición, encuentra el repositorio. Este es el selector que se utilizará para la acción que está en pausa en este momento. Puedo cambiar esto y decir, por ejemplo, texto igual a TS lib. Y a medida que cambio y escribo diferentes selectores aquí, los elementos se seleccionan en el navegador página. Y esto es genial, pero este botón Explorar es aún más genial. Así que cuando hago clic en él, se activará la ventana de Chrome. ¡Bam! Ahora, a medida que paso el cursor sobre las diferentes partes de la página, puedo ver diferentes selectores aquí en este cuadro negro debajo de mi cursor. Y cuando hago clic en este elemento, por ejemplo, el selector se pega en este input campo. Así que puedo refinarlo aún más, por ejemplo. O simplemente puedo copiarlo y pegarlo en mi editor. Y este es el Inspector de PlayWrite, y así es como hacemos debug pruebas en PlayWrite. Volvamos a nuestra presentación.

Así que acabamos de ver cómo podemos generar pruebas con MBX PlayWrite CodeGen. Y vimos el Inspector de PlayWrite, que es tan fácil de abrir como pasar el "-debug flag a tu comando. Y una vez que lo haces, se te presenta esta hermosa y magnífica UI que te muestra todo lo que necesitas saber sobre tu prueba. Vale. Así que todo esto es muy genial, pero todo esto sucedió localmente en mi máquina. Lo que significa que la prueba estaba fallando localmente y tenía una reproducción muy agradable. Puedo reproducir el fallo y puedo debug usando el Inspector de PlayWrite. Pero, ¿qué haría si este fallo ocurriera realmente en algún lugar de la cloud y no tuviera ninguna forma de reproducirlo localmente? Por supuesto, puedo tomar una captura de pantalla, o por ejemplo, grabar un video de toda la ejecución. Pero, ¿no sería genial si pudiera realmente deep dive en los aspectos internos del navegador, en la console del navegador o las acciones de la red? O, ya sabes, ir e incluso quizás deep dive en el DOM de la página? Después de cada acción de mi ejecución de prueba. Resulta que esto es realmente posible. Y esto es posible con algo llamado trazado de PlayWrite.

7. Trazado de Playwright: Explorando TraceViewer

Short description:

El trazado de Playwright es un tipo único de artefacto que es más capaz que los videos y las capturas de pantalla combinados. Consiste en archivos trace.zip, que son formatos de archivo portátiles que contienen toda la información sobre la ejecución de la prueba. TraceViewer es un programa incluido con Playwright que te permite explorar archivos de trazado. Además, Trace.playwright.dev es un sitio web donde puedes soltar trazados y verlos. En una demostración, el orador muestra cómo abrir un archivo de trazado fallido y explora las características de TraceViewer.

Permíteme contarte sobre el trazado de Playwright. Pero antes de hablar realmente sobre el trazado, un poco de terminología. Primero que nada, llamamos a esto depuración post-mortem. Porque esta es una depuración de un fallo de prueba que ocurre en algún lugar lejano. Y no hay una forma básica para que yo lo reproduzca localmente. Entonces, para depurar este tipo de fallos, y estos son fallos muy desagradables. Usualmente usamos cosas como artefactos de prueba, que son cualquier subproducto de la ejecución de pruebas. Cosas como registros o capturas de pantalla de videos, todos estos cuentan como artefactos de prueba.

Ahora, en Playwright, en realidad tenemos este tipo único de artefacto, que se llama trazado. Y resulta que el trazado por sí mismo es mucho más capaz que los videos y las capturas de pantalla combinados. Así que permíteme explicarte qué es y te mostraré cómo funciona. Entonces, el trazado de Playwright es esta tecnología que consta de dos partes. Primero están estos archivos trace.zip y estos son en realidad los artefactos. Y este es un formato de archivo portátil que tiene toda la información sobre la ejecución de la prueba de Playwright como acciones, eventos, screencast, registro de red, registro de consola y capturas de DOM para cada una de las acciones. Y luego también tenemos TraceViewer y TraceViewer es este programa que en realidad viene con Playwright que te permite mirar estos archivos de trazado y explorarlos. Y desde Playwright v.1.17, incluso tenemos Trace.playwright.dev, un sitio web especial donde puedes soltar todos los trazados y se te presentarán.

Así que permíteme darte una demostración de cómo se ve. Así que aquí convenientemente tengo un repositorio creado específicamente para esta presentación. Pero aquí en este repositorio tengo una acción y está fallando. Así que vamos a explorar. Por alguna razón algo está, está agotando el tiempo y incluso me dice que vaya y abra el rastro. Así que realmente voy a hacer esto. Iré al resumen y en las acciones de GitHub tenemos todos los artefactos cargados, y si en realidad usas una acción de GitHub que podemos preconfigurar para ti subirá todos los artefactos automáticamente. Así que puedo descargar este archivo de trazado. Lo tengo aquí, lo descomprimo, y este es el archivo de trazado y usaré este archivo trace.playwright.def y simplemente tomaré este trazado y lo arrastraré y lo soltaré sobre el área. Esta es la URUI de trazado. Así que muchas cosas están sucediendo aquí, así que permíteme mostrarte alrededor. Aquí arriba tenemos una línea de tiempo y puedes pasar el cursor sobre la línea de tiempo y desplazarte sobre ella para ver cómo están sucediendo las cosas dentro de tu página web. Esto es prácticamente como un screencast pero el screencast en realidad se superpone con todas las acciones como estas barras por encima del screencast. Estas son las acciones.

8. Uso de Traceviewer y Playwright Test

Short description:

En Traceviewer, puedo ver la navegación, los clics, los expects y otras acciones en mi script. El panel de la derecha proporciona información sobre cada acción, incluyendo mensajes de consola y actividad de red. El Dom Snapshot me permite interactuar con el HTML y CSS real de una página. Puedo desplazarme, escribir en campos de entrada e inspeccionar el DOM usando DevTools. Traceviewer es una herramienta poderosa para depurar y analizar acciones de prueba. Si estás interesado, visita trace.playwright.dev para una hermosa interfaz de usuario y más características. Playwright Test ofrece instalación con npm, autoría de pruebas con code.gen, depuración con inspector y depuración post-mortem con trazado. Consulta nuestra documentación y únete a nuestros canales sociales para obtener más información.

Entonces, por ejemplo, aquí arriba, puedo ver que la navegación tardó alrededor de 600 milisegundos. Esta línea azul es una página que va a llamar y así sucesivamente puedo ver aquí hay un clic, aquí hay un expect, aquí hay otro clic, y así sucesivamente.

Ahora, en el lado izquierdo tengo la lista de todas las acciones en mi script en orden cronológico y Esto es realmente navegable con el teclado. Puedo subir y bajar para seleccionar diferentes acciones y Para cada acción en el lado derecho. Oops, lo siento Tengo este panel con toda la información sobre esta acción y Tengo todos los mensajes de console que ocurren durante la ejecución de esta acción y E incluso toda la red que está sucediendo aquí Correcto. Así que la navegación es obviamente muy pesada en la red Y en el medio aquí Tenemos un Dom Snapshot. Así que esto no es una captura de pantalla Es una instantánea, lo que significa que es un HTML real CSS. Puedes desplazarte. Incluso puedes escribir En campos de entrada. No hay JavaScript, por lo que no reaccionará, pero aparte de eso, CSS hovers todas las cosas funcionan y Incluso puedes ir e inspeccionarlo con DevTools Así que aquí estoy, puedo usar DevTools para mirar en el DOM de GitHub Lo cual es muy agradable y me da capacidades ilimitadas ahora para clics y Con Navegaciones, nos gustan todas estas acciones que tenemos aquí y Bueno, por último, pero no menos importante, podemos ver que este último clic de página intentamos hacer clic en algo llamado lobo y Esta acción se agotó, así que, honestamente, no hay lobo en esta página. Así que es muy predecible Esto fue Traceviewer

Así que, por favor, usa trace.playwright.dev, es un sitio web muy agradable y una vez que lo hagas, tendrás esta hermosa UI con todas las cosas buenas y campanas y silbatos que te mostré y Esto es todo para esta presentación resumen

Así que Playwright Test Bueno, en primer lugar, puedes instalarlo con npm playwright Puedes autorizar nuevas pruebas con code.gen Puedes debug tus pruebas con inspector y puedes hacer depuración post-mortem con trazado así que Si usas Playwright Test, básicamente estás cubierto en todas tus etapas de vida como autor de pruebas Si te gusta lo que has visto Por favor, dirígete a nuestra documentation para aprender más sobre Playwright También estamos presentes en canales sociales. Por favor Únete a nuestro slack. Somos muy activos allí y síguenos en Twitter, suscríbete a nuestro YouTube y Danos una estrella en GitHub Gracias por escuchar

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.
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.
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.
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.

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
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
Workshop
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
Workshop
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.
Mejores Prácticas para Escribir y Depurar Pruebas de Cypress
TestJS Summit 2023TestJS Summit 2023
148 min
Mejores Prácticas para Escribir y Depurar Pruebas de Cypress
Top Content
Workshop
Filip Hric
Filip Hric
Probablemente conozcas la historia. Has creado un par de pruebas y, como estás utilizando Cypress, lo has hecho bastante rápido. Parece que nada te detiene, pero luego - prueba fallida. No fue la aplicación, no fue un error, la prueba fue... ¿inestable? Bueno sí. El diseño de la prueba es importante sin importar la herramienta que utilices, incluyendo Cypress. La buena noticia es que Cypress tiene un par de herramientas bajo su cinturón que pueden ayudarte. Únete a mí en mi masterclass, donde te guiaré lejos del valle de los anti-patrones hacia los campos de pruebas estables y siempre verdes. Hablaremos sobre los errores comunes al escribir tu prueba, así como depurar y revelar problemas subyacentes. Todo con el objetivo de evitar la inestabilidad y diseñar pruebas estables.