🚀 Feature Request
When debugging failed visual regression tests, the most important information is often the image comparison (expected, actual, and diff). However, in the HTML report the test details page currently displays sections in this order:
Errors
Test steps
Image mismatch
For visual testing workflows, it would be much more efficient if the Image mismatch section could appear before the Errors and Test steps sections, or if the section order were configurable.
Example
Proposed solution
Allow configuring the section order for the HTML report, for example:
reporter: [
['html', {
sectionOrder: [
'image-mismatch',
'errors',
'steps',
'attachments'
]
}]
]
Alternatively, even a simpler option such as:
reporter: [
['html', {
imageMismatchFirst: true
}]
]
would greatly improve the workflow for teams primarily using Playwright for visual regression testing.
Motivation
When a visual assertion fails (expect(page).toHaveScreenshot()), the first thing most users want to inspect is the image diff. Having to scroll past the Errors and Test steps on every failure slows down investigation, especially when reviewing many visual test failures.
Making the layout configurable would improve the developer experience while preserving the current default behavior for existing users.
🚀 Feature Request
When debugging failed visual regression tests, the most important information is often the image comparison (expected, actual, and diff). However, in the HTML report the test details page currently displays sections in this order:
Errors
Test steps
Image mismatch
For visual testing workflows, it would be much more efficient if the Image mismatch section could appear before the Errors and Test steps sections, or if the section order were configurable.
Example
Proposed solution
Allow configuring the section order for the HTML report, for example:
reporter: [
['html', {
sectionOrder: [
'image-mismatch',
'errors',
'steps',
'attachments'
]
}]
]
Alternatively, even a simpler option such as:
reporter: [
['html', {
imageMismatchFirst: true
}]
]
would greatly improve the workflow for teams primarily using Playwright for visual regression testing.
Motivation
When a visual assertion fails (expect(page).toHaveScreenshot()), the first thing most users want to inspect is the image diff. Having to scroll past the Errors and Test steps on every failure slows down investigation, especially when reviewing many visual test failures.
Making the layout configurable would improve the developer experience while preserving the current default behavior for existing users.