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
3 Hrs
24 Min
12 Seg

Playwright Tracing

13/17
Resources

What is Playwright Tracing?

Playwright Tracing is an indispensable tool for analyzing performance and detecting problems in your automated tests. When testing, we do not always get the expected results and it is crucial to identify errors in order to optimize the performance of our software. With Playwright Tracing, we can track and understand what happens before and after executing a specific action in a test, capturing details that help us debug efficiently.

How to enable Playwright Tracing?

By default, Playwright Tracing is disabled. To enable it and start logging traces, run the following command in the terminal:

npx playwright test tiendaonline --trace on

This command runs the test defined in the tiendaonline.spec.ts file and generates a .zip file containing the traces for further analysis.

How to explore the generated traces?

Once the tests have been executed, we can visualize the traces by opening the generated report with:

npx playwright show-report

In the report, you will see a rectangle with three bars indicating that the trace files are ready to be inspected. By clicking on this link, we can download the traces or browse directly in the graphical interface.

What information does the trace explorer display?

  1. Timeline: Displays a sequence of screenshots from the beginning to the end of the test.
  2. Logged actions: Listed in the left menu, these actions include page creations, URL changes, clicks, among others.
  3. Detailed DOM View: This is not just a screenshot; a rendered DOM is represented, allowing us to inspect elements as if we were using a browser.
  4. Pre- and post-action information: Indicates how the application looked before and after an action, essential to understand changes in visual or loading states.
  5. Console and Network: Logs network calls and any console errors, essential for analyzing load problems or unloaded resources.
  6. Source and Metadata: Information about the specific line of code that triggered an action and details about the execution environment, such as browser type and viewport size.

Why is it essential to use Playwright Tracing?

Knowing what happens during test execution allows us to:

  • Identify and fix specific errors: By seeing the execution flow and details about the state of elements and actions.
  • Optimize test performance: By analyzing and understanding bottlenecks in load or interactive elements.
  • Increase software reliability: By having deeper and more contextualized debugging, we can ensure that our software performs optimally.

Efficiently using Playwright Tracing transforms a tedious testing process into a more controlled activity enriched with valuable details for developers. Continue exploring these tools and hone your skills to create more robust and reliable software!

Contributions 6

Questions 0

Sort by:

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

Hola hola, la clase #12 “Debugging con API logs” redireciona al landing page del curso

Playwright Trace Viewer

Playwright Trace Viewer es una herramienta GUI que nos asiste en la exploración de casos de pruebas grabados por Playwright después de que se haya ejecutado el script.
.
Dichas grabaciones, podemos abrirlos localmente o mediante el navegador trace.playwright.dev.
.

.

Trace Viewer localmente

Para abrir la herramienta en local, tenemos que generar el o los casos de pruebas mediante grabación, usando el comando test con la opción --trace on .
.
Después, si se desea, mediante terminal usamos el comando show-trace .

npx playwright test assert --ui
```js trace.playwright.dev. ```trace.playwright.dev.

Para abrir los trace guardados con anterioridad se puede utilizar el siguiente commando desde la terminal:
npx playwright show-trace trace.zip

O desde el browser ingresando el siguiente comando: trace.playwright.dev

La clase #12 “Debugging con API logs” redireciona al landing page del curso, no sale activa.