Add assertion error output filtering option(s) for browser mode #7461
Description
Clear and concise description of the problem
Sometimes the output from failed browser mode assertions can contain a lot of irrelevant markup. For example, if I have an irrelevant SVG at the top of my output I see its full content printed for every test failure:
Caused by: VitestBrowserElementError: Cannot find element with locator: getByRole('form', { name: 'Deposit' }).getByText(/has been added to your balance/i)
<body>
<div>
<svg
data-test-hide="true"
id="uqn-t"
viewBox="0 0 20 20"
>
<style … />
<defs … />
<rect … />
<rect … />
<rect … />
<rect … />
<g … />
</svg>
<div>
<nav … />
<section … />
<nav … />
<h3 … />
<form … />
<h3 … />
<form … />
<div … />
</div>
</div>
</body>...
This irrelevant content makes it harder to find the markup that might actually help me identify the cause of the test failure.
Suggested solution
Testing Library has a configuration setting called defaultIgnore that, in their words:
...determines the nodes that are being ignored when errors are printed.
I'd love to have a similar option in Vitest browser mode.
When using Testing Library, we typically set this to something like script, style, [data-test-hide], [data-test-hide-content] *. This allows us to easily exclude an entire element from test failure output (or just its content) by using a simple data attribute.
Alternative
No response
Additional context
Follows on from discussion at #7459.
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Metadata
Metadata
Assignees
Type
Projects
Status