Display aria snapshot on locator element error #10038
Description
Clear and concise description of the problem
Currently browser mode uses prettyDOM when locator fails to find an element, but the output can be huge and it's not so readable. For example:
FAIL chromium client/components/artifacts/visual-regression/VisualRegression.spec.ts > VisualRegression > renders reference, actual, and slider tabs
VitestBrowserElementError: Cannot find element with locator: getByRole('tablist').getByRole('tab').getByRole('tab', { selected: true })
<body>
<div>
<article
class="flex flex-col gap-4"
>
<h1>
Visual Regression
</h1>
...Full error output
FAIL chromium client/components/artifacts/visual-regression/VisualRegression.spec.ts > VisualRegression > renders reference, actual, and slider tabs
VitestBrowserElementError: Cannot find element with locator: getByRole('tablist').getByRole('tab').getByRole('tab', { selected: true })
<body>
<div>
<article
class="flex flex-col gap-4"
>
<h1>
Visual Regression
</h1>
<p>
optio solio degenero vulgus turbo
</p>
<div
class="flex flex-col items-center gap-6"
>
<div
aria-orientation="horizontal"
class="flex gap-4"
role="tablist"
>
<button
aria-controls="v-0-v-1-tabpanel"
aria-selected="false"
class="aria-[selected=true]:underline underline-offset-4"
id="v-0-v-1-tab"
role="tab"
type="button"
>
Reference
</button>
<button
aria-controls="v-0-v-2-tabpanel"
aria-selected="false"
class="aria-[selected=true]:underline underline-offset-4"
id="v-0-v-2-tab"
role="tab"
type="button"
>
Actual
</button>
<button
aria-controls="v-0-v-3-tabpanel"
aria-selected="true"
class="aria-[selected=true]:underline underline-offset-4"
id="v-0-v-3-tab"
role="tab"
type="button"
>
Slider
</button>
</div>
<!--v-if-->
<div
aria-labelledby="v-0-v-1-tab"
class="max-w-full"
hidden=""
id="v-0-v-1-tabpanel"
role="tabpanel"
>
<div
class="max-w-full w-fit mx-auto bg-[size:16px_16px] bg-[#fafafa] dark:bg-[#3a3a3a] bg-center p-4 rounded user-select-none outline-0 outline-black dark:outline-white outline-offset-4 outline-solid focus-within:has-focus-visible:outline-2"
style="background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path d=\"M1 2V0h1v1H0v1z\" fill-opacity=\".05\"/></svg>");"
>
<a
href="/__vitest_attachment__?path=%2F__reference.png&contentType=application/octet-stream&token=0"
target="_blank"
>
<img … />
</a>
</div>
</div>
<div
aria-labelledby="v-0-v-2-tab"
class="max-w-full"
hidden=""
id="v-0-v-2-tabpanel"
role="tabpanel"
>
<div
class="max-w-full w-fit mx-auto bg-[size:16px_16px] bg-[#fafafa] dark:bg-[#3a3a3a] bg-center p-4 rounded user-select-none outline-0 outline-black dark:outline-white outline-offset-4 outline-solid focus-within:has-focus-visible:outline-2"
style="background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path d=\"M1 2V0h1v1H0v1z\" fill-opacity=\".05\"/></svg>");"
>
<a
href="/__vitest_attachment__?path=%2F__actual.png&contentType=application/octet-stream&token=0"
target="_blank"
>
<img … />
</a>
</div>
</div>
<div
aria-labelledby="v-0-v-3-tab"
class="max-w-full"
id="v-0-v-3-tabpanel"
role="tabpanel"
>
<div
class="max-w-full w-fit mx-auto bg-[size:16px_16px] bg-[#fafafa] dark:bg-[#3a3a3a] bg-center p-4 rounded user-select-none outline-0 outline-black dark:outline-white outline-offset-4 outline-solid focus-within:has-focus-visible:outline-2"
style="background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path d=\"M1 2V0h1v1H0v1z\" fill-opacity=\".05\"/></svg>");"
>
<div
aria-label="Image comparison slider showing reference and actual screenshots"
class="relative max-w-full h-full overflow-hidden"
style="--split: 50%; aspect-ratio: 500 / 200; width: 500px;"
>
<div … />
<div … />
<div … />
<input … />
<output … />
</div>
</div>
</div>
</div>
</article>
</div>
</body>
Failure screenshot:
- client/components/artifacts/visual-regression/__screenshots__/VisualRegression.spec.ts/VisualRegression-renders-reference--actual--and-slider-tabs-1.png
❯ client/components/artifacts/visual-regression/VisualRegression.spec.ts:167:64
166| // ),
167| // ).toBeInTheDocument()
168| await expect.element(tabs.getByRole('tab', { selected: true })).toHaveTextContent('Slider')
| ^
169| expect(result.container).toMatchAriaInlineSnapshot(`
170| - article:
Caused by: Error: Matcher did not succeed in time.
❯ client/components/artifacts/visual-regression/VisualRegression.spec.ts:167:4By using aria snapshot format introduced by #9668, this can be simplified to:
- article:
- heading "Visual Regression" [level=1]
- paragraph: absconditus caelum villa basium tutis
- tablist:
- tab "Reference"
- tab "Actual"
- tab "Slider" [selected]
- tabpanel "Slider":
- slider "Adjust slider to compare reference and actual images": "50"
- status: Showing 50% reference, 50% actualSuggested solution
Provide an option to switch element error printing format between current prettyDOM and Aria snapshot.
Alternative
No response
Additional context
No response
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.