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.
Docs: playwright.dev/
Discord: aka.ms/playwright/discord

[@natalisulcer974]

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

[@really727]

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...

[@Playwrightdev]

thanks for the feedback

[@maopuerta3430]

Thank you Debbie, excellent content

[@Playwrightdev]

You are so welcome

[@NerdyThrowbackTech]

Fantastic work

[@Playwrightdev]

Many thanks!

Great demo!! Thanks!

[@Playwrightdev]

thanks glad you liked it

[@prasadpulaguntla9255]

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)

[@LuisOutOfOffice]

I was prototyping this same concept at work. You guys just saved me so much time! ❤

[@Playwrightdev]

good to know ;)

[@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?

[@Playwrightdev]

can you submit a feature request on GitHub, thanks

[@goabeach1669]

Amazing 🥳

[@Playwrightdev]

sure is

[@SahilRajput03]

Awesome!

[@ashtonmiddlefield9819]

Very useful

[@davidvardanyan7986]

thank you Debbie

[@Playwrightdev]

you're welcome

[@paulhammond8583]

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!

[@Playwrightdev]

would love you to join our discord server and ask your question there, thanks

[@koolvoid]

Very nice tool, i hope my company start using it

[@schantin]

Be the one that starts using it.

[@Playwrightdev]

me too

[@markky212]

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

[@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?

[@leidybibiana5913]

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

[@rodavlas1981]

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

[@Playwrightdev]

please submit all feature requests on GitHub

[@rodavlas1981]

@@Playwrightdev oh, I thought that UI mode will be (at some point) part of all Playwright flavors

[@vitalieandries7312]

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

[@meg6pat]

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?

[@Playwrightdev]

can you join our discord server and post your question there, thanks so much

[@user-dt3zr4ch8k]

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

[@kamylko]

WOW!

[@Playwrightdev]

yes

[@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.

[@Playwrightdev]

Don't hesitate to file a bug on GitHub with more details!

[@amielnoy]

DO YOU SUPPORT IT ALSO ON PYTHON?

[@Playwrightdev]

unfortunately not yet but feel free to fill out a feature request on GitHub

[@thisawesomeworld]

we need copilotX integration with playwright

[@Playwrightdev]

we sure do

[@marekpachno1422]

Can we expect a nice Playwright plugin for WebStorm?

[@schantin]

And for the new Aqua IDE please.

[@Playwrightdev]

please submit all feature requests on GitHub, thanks

[@nirmalchakraborty8608]

Hi playwright team Is there any future plan to support mobile app automation using playwright

[@Playwrightdev]

please post all feature request on GitHub, thanks

[@ShadyBoy_]

Is the UI mode available in python as well?

[@Playwrightdev]

unfortunately not, please fill out a feature request on GitHub or upvote if there is already one created

[@ShadyBoy_]

@@Playwrightdev guess ill just migrate to node

[@umer.on.youtube]

The volume is not "wright".

[@mindgr13]

Light mode gave me a stroke