[Feature]: Include Screenshots Inline with Test Steps in HTML Reports

[Aromal0105]

🚀 Feature Request

Currently, when attaching screenshots in Playwright reports, they appear as separate attachments instead of being displayed inline with the corresponding test steps. This makes it harder to correlate screenshots with specific actions, especially when debugging or validating test execution.

Expected Behavior
Playwright's HTML report should support embedding screenshots alongside the relevant test steps, ensuring that each action has visible proof of execution. This would improve readability and debugging by allowing users to quickly verify what happened at each step without navigating to a separate section.

Example

Use Case

1. Validation for Non-Technical Stakeholders: Many non-technical clients, product owners, and business teams rely on reports to review automation results. They often request screenshot proof for each validation step to ensure expected UI behavior. Having screenshots inline with test steps would make reports more understandable and useful for them.
2. Enhanced Reporting: Reports would become more insightful and user-friendly, as validation proof is instantly visible within the test execution flow.

Motivation

Right now, users have to manually refer to the separate attachments section to match screenshots with test steps, which adds extra effort in analyzing reports—especially for stakeholders who expect clear validation proof in a single view.

Having this enhancement would greatly improve Playwright’s reporting experience for both technical and non-technical users.

[pavelfeldman]

Did you consider using traces for this?