Trace Viewer in Playwright | Playwright Tutorial

#playwright #playwrightautomation
Trace viewer with Logs in Playwright, Trace Viewer with Time travel in Playwright, Trace Viewer with Logs in Playwright, Trace Viewer with console logs in Playwright

#playwright #typescript #javascript #tutorial #automation #testing #coding #selenium #cypress
playwright, playwright tutorial, playwright testing

===============================================================================

Chapters

00:00 - Introduction of Trace Viewer
02:12 - Generate and access Trace using VS Code Extension
06:16 - Access Trace using HTML Report
07:56 - Access Trace using npx command
13:38 - Actions section in Playwright Trace Viewer
14:50 - Timeline section in Playwright Trace Viewer
15:48 - Snapshot section in Playwright Trace Viewer
18:57 - Pick Locator in Playwright Trace Viewer
20:26 - Source section in Playwright Trace Viewer
21:13 - Call section in Playwright Trace Viewer
22:15 - Log section in Playwright Trace Viewer
23:47 - Errors section in Playwright Trace Viewer
24:30 - Console section in Playwright Trace Viewer
26:04 - Network section in Playwright Trace Viewe
27:00 - Metadata section in Playwright Trace Viewer
27:37 - Attachments section in Playwright Trace Viewer
30:13 - Generate Trace using Playwright npx command
35:35 - Generate Trace using Playwright config file
44:17 - Recap

================================================================================

============================================================================================================

Video 31 - Playwright with TypeScript | Trace Viewer in Playwright

Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests meaning you can go back and forward through each action of your test and visually see what was happening during each action.

Ways to generate Playwright Trace -

1- By Playwright VS Code Extension

2 - By Playwright npx command

3 - By Playwright confiuration file setting

'on-first-retry' - Record a trace only when retrying a test for the first time.
'on-all-retries' - Record traces for all test retries.
'off' - Do not record a trace.
'on' - Record a trace for each test. (not recommended as it's performance heavy)
'retain-on-failure' - Record a trace for each test, but remove it from successful test runs.

Different Sections in Trace -

Actions - In the Actions tab you can see what locator was used for every action.

Timeline - each trace records a screencast and renders it as a film strip.

Snapshots - Playwright captures a set of complete DOM snapshots for each action.

Source - As you hover over each action of your test the line of code for that action is highlighted in the source panel.

Call - The call tab shows you information about the action such as the time it took, what locator was used, if in strict mode and what key was used.

Log - See a full log of your test to better understand what Playwright is doing behind the scenes such as scrolling into view, waiting for element to be visible, enabled and stable and performing actions such as click, fill, press etc.

Errors - If your test fails you will see the error messages for each test in the Errors tab.

Console - See console logs from the browser as well as from your test.

Network - The Network tab shows you all the network requests that were made during your test.

Metadata - It will show you more information on your test such as the Browser, viewport size, test duration and more.

Attachments - The "Attachments" tab allows you to explore attachments. If you're doing visual regression testing, you'll be able to compare screenshots

==================================================================================

[MaheshJoshi_wellington]

Just amazing ! Looking forward to playwright typescript with BDD if possible

[MaheshJoshi_wellington]

Is it possible for you to share playwright notes document for each video you did ?