vitest icon indicating copy to clipboard operation
vitest copied to clipboard

Easily access failure screenshot after tests run

Open kwojcik opened this issue 1 year ago • 1 comments

Clear and concise description of the problem

As a developer using Vitest browser mode, I want to quickly access the correct failure screenshot for a failed test so that I save time and don't need to manually figure out the correct filename.

Suggested solution

In the Failed Tests section that prints out in red at the bottom of a test run, add a log message with the full screenshot path below each FAIL src/components/MyApp.tsx > MyDescribe > does a thing log message so that I can just cmd+click or copy+paste it. This is nice in CI and when running from the CLI.

Additionally, accessing the screenshot from the browser UI when viewing the failure details would be very helpful to prevent context switching between the CLI and UI.

Alternative

Some way of checking if a test failed in afterEach such that I can console.log my own message; but this might not be as nice if the log doesn't end up getting printed out next to the test assertion failure message.

Additional context

Using v2.0.0.beta-12 browser mode with playwright

Validations

kwojcik avatar Jun 27 '24 23:06 kwojcik

I think we can have a tab with images on the right. Printing the URL in the error report also sounds like a nice idea.

sheremet-va avatar Jun 28 '24 07:06 sheremet-va