How do I configure Playwright to take screenshots during test failures using soft assertions and attach them to the HTML report?

Answer

Configuring Playwright for Screenshots and Soft Assertions

To take screenshots during test failures using soft assertions and attach them to the HTML report, follow these steps:

1. Configure Debugging for Local Debugging

Install the VS Code extension for Playwright. Run tests in debug mode by right-clicking on the line next to your desired test. This opens a browser window and pauses at your breakpoint.

2. Use Soft Assertions

Soft assertions don't immediately terminate the test execution but compile and display a list of failed assertions once the test ends.

3. Specify Custom Error Messages

Use custom error messages as the second argument for the expect function:

await expect(page.getByText('Name'), 'should be logged in').toBeVisible();

The error would look like this:

Error: should be logged in
Call log:
• expect.toBeVisible with timeout 5000ms
• waiting for "getByText('Name')".

4. Attach Screenshots to HTML Reports

To attach screenshots taken during failures to HTML reports, you need additional configuration. You can use custom expect messages to specify custom error messages for the expect function.

With these configurations, you can take screenshots at the exact moment of failure using soft assertions in the @playwright/test framework and attach them to the HTML report at the test step level.