[Brower Mode] Support aria snapshot matcher

[Smrtnyk]

Clear and concise description of the problem

Playwright has added aria snapshot feature
https://www.youtube.com/watch?v=P4R6hnsE0UY

Suggested solution

Add toMatchAriaSnapshot matcher like playwright added

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 request the same feature to avoid creating a duplicate.

[hi-ogawa]

Since I saw microsoft/playwright#33014, I was thinking someone can port their serializer as Vitest's custom snapshot serializer https://vitest.dev/guide/snapshot.html#custom-serializer. That should allow expect(element).toMatchInlineSnapshot(...) to work more or less like theirs, but with auto update. They have a regex to allow loose match https://playwright.dev/docs/aria-snapshots#matching-with-regular-expressions but that's not possible with custom serializer though.

I'm not sure how much of the usefulness is proved on their side, so probably we should wait a bit before considering to bring this as Vitest's builtin.

[Smrtnyk]

Thnx for the response @hi-ogawa
I have a drawer in a sidebar containing links based on user roles.
For now I am testing it one by one, but thought that this aria snapshot util would be pretty handy, similar scenario like they have it in the video.
I agree that it is probably better to wait

[hi-ogawa]

For now I am testing it one by one, but thought that this aria snapshot util would be pretty handy, similar scenario like they have it in the video.

Can you explain how current expect(element).toMatchInlineSnapshot() isn't convenient for you? I would guess current snapshot gives too much details as entire html and also it doesn't allow loosely matching like https://playwright.dev/docs/aria-snapshots#matching-with-regular-expressions

[Smrtnyk]

I am using quasar UI library and it generates too noisy html with dynamic ids on it

[hi-ogawa]

@Smrtnyk Do you think you would need regex match like this? https://playwright.dev/docs/aria-snapshots#matching-with-regular-expressions

The reason why I'm curious is that integrating the idea of loose match and snapshot is probably the most tricky part. For example, users initially made an aria snapshot with some regex match by manually manipulating auto-generated snapshot, but if they changed a UI drastically, it would require doing the same since auto snapshot isn't so smart to preserve regex match etc...

I see they have some feedback around this microsoft/playwright#33492 and I'll keep an eye on that.

[Smrtnyk]

Do you think you would need regex match like this? https://playwright.dev/docs/aria-snapshots#matching-with-regular-expressions

Not for this particular test case that I have, but not sure in the future for what more I would use it

Thnx for linking this playwright issue, I was not aware of it.
I guess it makes sense to let it settle down in playwright world first and see how useful/used it actually is

[cyyynthia]

Can you explain how current expect(element).toMatchInlineSnapshot() isn't convenient for you?

Adding my two cents: I've had some edge-cases where browsers were not behaving the same, such as WebKit rounding decimal values in inline styles to higher precision than its counterparts. Inline snapshots aren't very practical here, and I resorted to using a different snapshot folder for each browser for those situations.

When we're only interested by the semantics of the page rather than the precise implementation, ARIA snapshots should not change much over time (besides if for instance label texts change) compared to an HTML snapshot that captures a lot of unnecessary detail as previously mentioned, not just because of non-determinism but also just refactors that don't affect the ARIA semantic but changed a lot of class names and what not.