Exploring Playwright's Trace Viewer for debugging locally and on CI

In this video let's look at Playwright's trace viewer, a GUI tool that helps you explore recorded Playwright traces after the script has ran. Traces are a great way for debugging your tests locally or when they fail on CI. The trace viewer shows you a timeline of your tests actions, a DOM snapshot which you can pop out and explore, network requests, console, source code and more.
Check out the docs on Playwright's Trace Viewer
playwright.dev...
#playwrightdev #playwrightweb #playwright #vscode #endtoendtesting #testing

[@gruttewibe76]

Such an underrated and too often overlooked useful tool.

[@MohammedAZahid]

I was really tired with "Step In" and "Step Out" and "Step Over" since they have always killed time , it is always fortunate with trace option which allows you to go back to the previous Step while debugging and fixing the issue becomes very very easy.Thanks a lot for making our lives easier

[@juanmaguero]

Thank you Debbie and Playwright team!

[@user-yr2ph9nn8n]

where is Slushnikov?

[@alexanderkomanov4151]

Yeah. Where is he?

[@thisawesomeworld]

How to open the trace viewer on CI? You missed the most important thing

[@patrick93ferreira]

npx playwright test --ui

[@Playwrightdev]

You run your Playwright tests on CI, then upload a Trace after the tests completed and open the Trace locally on trace.playwright.dev. See here: playwright.dev/docs/ci-intro Usually you upload the playwright-report directory, which contains the full HTML report including the traces.

[@wendyliew7254]

How to add color pkg to your trace viewer?

[@SheikhFaisalMiskhat]

thanks