Playwright Trace Viewer is a Session Replay tool that captures application metadata like console logs, test steps, and screenshots while the test is running. Replay is a browser that lets you record your test and debug it later with retroactive print statements and Browser DevTools.
Here is a screenshot Playwright Trace Viewer for one of our Playwright tests. Apologies for the inception 🥲
Here is a screenshot of Replay DevTools for the same test. On the surface, they might seem similar, but with Replay we’re able to dive in and inspect your application with Browser DevTools.
Because Replay is simply a browser, you can start recording your tests by adding Replay Chromium in your playwright config here. And when you open a replay you can start time traveling!
The biggest benefit of time travel debugging is the ability to find a line of code and add a retroactive print statement. In the example below, we’ll add a console.log("gPendingMessages", gPendingMessgages, msg) on the line where gPendingMessages.push is called and see what was in the array and msg at the time.
Flaky tests can either come from an assumption in your testing logic or application logic. In both cases, it can be helpful to work backwards from the user visible issue to the root cause with console logs that help you narrow down the timing issue. For more info on print statements, check our our docs.
Both Replay DevTools and Trace Viewer let you see the messages that were logged to the Console. but because Playwright has to serialize the logs, most of the interesting values are missing.