You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
5 Hrs
54 Min
6 Seg

Playwright inspector

10/17
Resources

How to use Playwright Inspector to debug your tests?

Learning how to debug your automated tests is a crucial step in becoming a testing expert. Playwright Inspector is a powerful tool that allows you to see how your tests are running step by step and fix any issues that arise. In this article, we will explore how you can get the most out of Playwright Inspector.

How to open Playwright Inspector

To start using Playwright Inspector, you need to open it with a specific command in your terminal. Follow this simple step-by-step:

  1. Open the terminal of your development environment, such as Visual Studio Code.
  2. Type the following command to start Playwright Inspector along with the test:
    npx playwright test -debug
  3. This command will run your tests and open the inspector in a window so you can view the browser in incognito mode and the Playwright Inspector.

What features does the Playwright Inspector offer?

Once you have the Playwright Inspector open, you will see a number of useful buttons and functions for debugging your tests. Notable features include:

  • Resume: This button is represented by a "Play" icon and can be activated with F8. It serves to execute all test lines continuously, running the actions as they are written.

  • Step Over: Identified by a green curved arrow, it allows you to run one test line at a time. After each execution, the Inspector shows you details of the action.

With these tools, you can see, for example, that the browser navigates to a specific URL or performs interactions such as clicking or form filling. This helps you identify exactly where in the test there may be a problem.

How to identify and fix bugs with Playwright?

Playwright Inspector not only helps you see each step individually, but also assists you in identifying errors where bugs might arise in your tests. Let's say you have a problem with a selector that is misspelled:

  1. Error Savannah: If you run your test and there is an error with a selector, an HTML report will be displayed noting that the expected selector never appeared.

  2. Review each line: Using debug mode and the Step Over button, you can view each action and note where a red X appears, indicating a failed action.

  3. Explore alternatives: The Inspector offers suggestions for correct selectors. If you select an element, the Inspector recommends selectors based on visible roles or names.

How to correct errors in selectors?

Setting up correct selectors is crucial for tests to run successfully. If a selector is wrong, you must edit the code to correct it:

  • Check the selector: When you insert the selector in the Inspector's browse field, it will highlight the correct elements in the browser. If the element is not highlighted, you may need to adjust the selector.
  • Correct errors: When you identify that the error was in a double "T" in an ID, edit your code and test the execution again.

By correcting errors, Playwright allows you to run tests consistently, ensuring that each line of your test works as expected.

Conclusion

Using Playwright Inspector gives you a clear and visual way to understand exactly how your tests are running, making it easy to identify and correct errors. Remember to always pay attention to detail, and don't hesitate to explore and challenge yourself with new techniques in your debugging sessions - keep learning and improving, as the development path is full of continuous learning and enriching experiences!

Contributions 4

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

Inspector de Playwright

npx playwright test carrito --debug

Debugging Test

El debugger es un software que nos permite realizar interaccionar mediante controles el flujo de ejecución de nuestro programa. Con ello, es posible realizar a detalle un conjunto de cambios dando mayor certeza de lo que sucede durante de.
.

✨ Concepto clave
Un debugger nos es parte de una prueba, es una herramienta para desarrollo.

.

UI Inspector

Playwright Inspector es una herramienta GUI que ayuda a crear y depurar scripts de Playwright. Esa es nuestra herramienta recomendada por defecto para la solución de problemas de scripts.
.

.
Para iniciar el inspector mediante CLI, habilitamos la opción --debug. Por ejemplo:
npx playwright test [file] --debug donde si omitimos el archivo, ejecutará todas las pruebas.
.
También es posible configurar una variable de entorno PWDEBUG para ejecutar sus scripts en modo de debugger, habilitando por sesión de terminal la ejecución de Playwright de manera predeterminada.
.

VSCode Debugger

Playwright como extensión de VSCode podemos configurar y ejecutar el debugger para que sea el editor un intérprete. Con dicha extensión, podemos hacer uso de herramientas integradas para el desarrollo más específico que con el inspector no es posible, por ejemplo obtener información de la variable, referencia de dato, etc.
.

.

Browser DevTools

Finalmente, Playwright permite realizar pruebas y habilitar el debugger del navegar mediante debugger en el código, permitiendo utilizar el flujo normal de trabajo de ejecución.
.

a mi no me aparece el explore![](https://static.platzi.com/media/user_upload/image-fc3400d4-0d5e-4770-8f14-267dee18ca71.jpg)![](https://static.platzi.com/media/user_upload/image-1364f152-7353-470a-98ac-31fc04e630d7.jpg)
`npx playwright test <test a ejecutar> --debug`