[Feature] Trace viewer as a visual test runner

[AlexKomanov]

Hi there!

I would like to ask for a feature like the Cypress framework provides.

Cypress users have a really cool test runner that provides a lot of information through the test execution.
Playwright provides a really helpful trace viewer in order to handle a lot of useful information. Maybe it can be useful to get a combination of a test runner with a trace viewer? In this case - we can execute and gather information in one window.
I see it like a flag that can be activated with the test command like npx playwright test --test-viewer or something similar.

Thanks for spending time on our feature requests!

[aslushnikov]

Hey @AlexKomanov! We recently launched the "show browser mode" in VSCode extension that makes experience resemble Cypress. You can always pop the DevTools open and inspect the browser at any moment. Together with the "record at cursor", this makes a powerful combo to author & debug tests!

What exactly are you missing in the experience?

[AlexKomanov]

@aslushnikov
Thanks for your response.

After rewatching the videos - it looks like I can point to only two possible missing functions (from my side):

• Option to rerun the test on save (for example another checkbox in the extension that will do it possible? )
• Run tests inside a test runner that presents running code and browser inside one window.

Thanks again for your response and for the whole work that the PW team does for our community!

[aslushnikov]

Option to rerun the test on save (for example another checkbox in the extension that will do it possible? )

@AlexKomanov there's a separate issue to track this - #7035. However, these days you can use shortcuts to re-run last test: https://www.youtube.com/watch?v=VbVlz61VtNo&t=21s Would this work?

Run tests inside a test runner that presents running code and browser inside one window.

Isn't "show browser mode" solving this?

[AlexKomanov]

However, these days you can use shortcuts to re-run last test: https://www.youtube.com/watch?v=VbVlz61VtNo&t=21s Would this work?

@aslushnikov
It works as well as a particular solution. But will be nice to get a watch mode like described in the issue.

Isn't "show browser mode" solving this?

Not exactly. In this case you need to navigate between two separate windows. If to give an example of Cypressimplementation - their runner presents the test and the code in the window.

If it will be possible to provide a similar solution from your side - I think that it will be great!

[aslushnikov]

It works as well as a particular solution. But will be nice to get a watch mode like described in the issue.

@AlexKomanov Thank you for the input! Please feel free to upvote the watch mode issue to stay in the loop.

Not exactly. In this case you need to navigate between two separate windows. If to give an example of Cypressimplementation - their runner presents the test and the code in the window.

Ah I see, thank you for the explanation. For now I don't see us implementing this any time soon; in the meantime, we'd recommend using window layout managers to arrange browser and VSCode window side-by-side.

[aslushnikov]

@AlexKomanov I brought this up on the team meeting and we have a few more clarification questions for you.

Option to rerun the test on save (for example another checkbox in the extension that will do it possible? )

Could you please clarify - which test and in which browser (project) would you like us to run?

Run tests inside a test runner that presents running code and browser inside one window.

Should this code be in a form of a source code and be editable, or should it be a read-only list of steps? Would you consider it all to be inside VSCode?

[AlexKomanov]

@aslushnikov
Wow! I Really appreciate it!

Could you please clarify - which test and in which browser (project) would you like us to run?

In my vision it should like work something like this:
Through the development process, you start to run the test at some point (some particular test in any browser that you work with). The working browser (where the test actually executed) is staying open. Then, after adding some additional steps and after saving the file, the test automatically will be re-run. For example, in Cypress, you have a flag for the watch mode (watchForFileChanges). The information can be found here

Should this code be in a form of a source code and be editable, or should it be a read-only list of steps? Would you consider it all to be inside VSCode?

Based on Cypress test runner - the section that I talked about is just providing information about performed steps:
Found locators, and executed assertions. It is very useful in the case of waiting for some step or assertion because it can present some loading bar and provide information that some step is waiting to be fulfilled (like we see in the trace, where provided information about checking before the actual action).
You can find more information here

Regarding the location of this, even if it will be inside the VSCode extension - it can be great! But in this case, maybe WebStorm users will feel cheated.
Thanks again for the discussion with your team! Makes me feel like a VIP person!

[AlexKomanov]

@aslushnikov
Hello!
I just wanted to know if this issue will stay closed, or will it be opened again for some new discussions?

Thanks!

[aslushnikov]

@AlexKomanov Hey Alex! We saw your response, discussed it and it got us thinking. However, there's no immediate action we're planning to do so far, so I'll keep this closed!

Thank you for the input!

[AlexKomanov]

@aslushnikov
Thanks for providing so an amazing feature of UI mode!