[Feature]: Capture screenshots at the point of expect.soft() failures in HTML Report (currently only shows final test state)

[SurajSinguluri]

🚀 Feature Request

When using expect.soft(), the Playwright HTML report should capture and attach a screenshot at the exact moment each soft assertion fails, instead of only capturing the final screen at the end of the test.

Expected Behavior

1. Each failed expect.soft() should have its own screenshot attached in the HTML report.
2. Screenshots should reflect the page state at the time of that specific failure with highlighting(is possible).
3. Optionally, add a config like screenshotOnSoftFailure: true.

Example

Test Code

import { test, expect } from "@playwright/test";

test("Verify Login Heading and login flow", { tag: ["@orangeHRM"] }, async ({ page }) => {
  await page.goto("https://opensource-demo.orangehrmlive.com/web/index.php/auth/login");

  // Verify Login Heading  ← This fails
  await expect.soft(page.locator("h5.orangehrm-login-title")).toHaveText("Sign in", { timeout: 10000 });

  await page.getByPlaceholder("Username").fill("Admin");
  await page.getByPlaceholder("Password").fill("admin123");
  await page.getByRole("button", { name: "Login" }).click();

  // Verify Dashboard Heading  ← This passes
  await expect.soft(page.getByText("Dashboard")).toBeVisible();
});

Current Behavior:

Even though only the first soft assertion failed (on the login screen), and the test successfully logged in and reached the dashboard, the Playwright HTML report shows the Dashboard screenshot.
As visible in the attached report screenshot:

• The first soft assertion (toHaveText("Sign in")) failed while the user was still on the login page.
• The second soft assertion passed.
• However, the screenshot attached in the Screenshots section shows the Dashboard page (final state of the test).

Desired Behavior:
Playwright should capture a screenshot at the moment each expect.soft() fails.
In this case, the report should show:

• A screenshot of the Login page attached to the failed toHaveText("Sign in") assertion.
• No unnecessary screenshot (or a different one) for the passing assertion.

This allows developers to instantly see the visual state corresponding to each soft assertion failure without needing to rerun the test or dig deep into traces.

Motivation

Soft assertions expect.soft() are one of the most powerful features in Playwright Test. They allow tests to continue running after failures so that multiple issues can be identified in a single test execution. This is extremely useful for validating forms, dashboards, checkout flows, and other complex UI scenarios.

However, the built-in HTML reporter currently only captures a screenshot of the final page state at the end of the test. When a soft assertion fails early and the test continues (performing more actions, navigation, or state changes), the screenshot shown in the report no longer reflects the UI at the time of the failure.

This creates a frustrating debugging experience where the visual evidence is often misleading or irrelevant to the actual failing assertion.

This feature will make Playwright better by:

• Giving accurate visual context for every soft assertion failure
• Making the HTML report truly useful when using soft assertions
• Saving significant debugging time for developers and QA teams
• Fully realizing the value of soft assertions by pairing them with proper visual reporting
• Improving the overall developer experience with Playwright’s built-in reporting