Playwright's UI Mode: Watch mode and time travel debugging

Playwright's new UI Mode brings a watch mode together with the trace viewer to create a time-travel debugging experience. 

Edit your tests in watch mode and upon saving your file the tests are rerun with a new trace of the tests. Walk through each action of your test and visually see what happened before and after each step of the test. Inspect the DOM snapshot, see network requests, the console and the log of your test.

[really]

This is awesome, you just answered most of the questions I have in mind.

[SamPrince]

Great demo and explained it in plenty of detail. I'm not sure I'd want the frantic repeated running of watch mode on our (slow) tests, but merging trace viewer with a test runner seems like a sensible move. Was pretty happy with the vscode extension already so time will tell if ui mode gets much use...

[natalisulcer]

You are amazing, the video was made simple and understandable, love it

[prasadpulaguntla]

Really awesome videos explaining the features of playwright. Thank you! Could you also add some videos(or point to if already available somewhere)of running playwright in CI /CD environments for enterprise level applications ( particularly Azure DevOps) with features like (in nodejs) :

1) publishing test results and artifacts
2) Best practices (running in parallel?)
3) how to run in Docker, particularly building the app before running the tests: how to mount the volume so that we can later access the playwright-report folder
4) any other gotchas (I use cypress currently and it's a bit of a pain particularly in CI environment to start the server in the background and not pollute the terminal with app server logs and test logs)

[MarcusNygrenSe]

So cool and useful, we use it all the time now! Could I request that you also integrate a record button (Codegen) into UI Mode?

[koolvoid]

Very nice tool, i hope my company start using it

[vh]

Please make a video about the playwright using the docker container. I've been trying to start Java tests on the server using the playwright container for 2 days and nothing works! =)

[LuisOutOfOffice]

I was prototyping this same concept at work.

You guys just saved me so much time!

❤

[leidybibiana]

Hi Debbie thank you this training! I cannot see the "Pick Locator" tab, any suggestion?

[HelpMomRetire]

Awesome! This is working for me in Visual Studio Code but when i run the npx command in Visual Studio it doesn't find any tests to run. Any suggestions?

[paulhammond]

More fantastic work.

Question for you - is it possible to watch source code for changes and rerun tests (or even specific tests) on save? I'm a big fan of TDD and I use this feature in Jest all the time. If you could have something like Jest's watch mode in Playwright integrated with component testing, it might be possible to use Playwright for all manner of tests in a project. I'm keen to try this, but a watch mode based on changes to source code is vital for that workflow.

Either way, the progress you're making at the moment is fantastic and I'm very keen to start using Playwright professionally! Great work!

[rodavlas]

That's awesome! Is there a plan to make this available also in python version?

[SandraWantsCoke]

I started a new Next.js project (-y to all answers of create next app), installed playwright as in the docs and the --ui mode quits on me a few seconds later.

[DennisMinard]

Started trying out playwright to see its pros/cons vs the cypress I'm currently using. The demo tests are working fine as the videos show, but when I tried to run them in the UI mode as this video shows, I'm getting a "Playwright Test did not expect test() to be called here" error. Have not figured out if I'm doing something wrong or not.

[arunorton]

Hi Team, How to skip these module while debugging the testcase Eg: "skipFiles": [
"${workspaceFolder}/node_modules/**/*.ts",
"${workspaceFolder}/lib/**/*.ts",
"<node_internals>/**/*.ts"
]

[markky]

Nice demo! Do you plan to support webstorm with plugin as well?

[megpat]

Great addition to great tool. But I got a problem, I tried run on clean install, and it works fine. But then I try to run --ui with my older tests, there are no tests in UI mode. In config file I see only 1 place testDir: './tests', — which is identical in both configs. Any suggestions?

[vitalieandries]

It looks like playwright is watch tests only, and not the code, isn't it? Good video, btw!

[marekpachno]

Can we expect a nice Playwright plugin for WebStorm?

[明凯周]

hi, how can I embed this tool into a browser page?thx~