[Feature]: Make sure the .toMatchAriaSnapshot() error log function understand the difference between "this text" and "thisNBSPtext"

[mduivcap]

🚀 Feature Request

At this moment if you don't use NBSP in the test while it's used in the HTML (because you didn't use playwright codegen but just type it as you see the tekst on the screen), it's not clear from the error log what is wrong with your test (also see Test fails example below)

So if it would be possible, please make sure the error logging of .toMatchAriaSnapshot() understands the difference between using NBSP or a whitespace and show this in the logging, that would be very helpful.

Example

On screen

HTML
<span class="label__text">E-mailadres<span class="label__required-text">&nbsp;(<!-- -->verplicht<!-- -->)</span></span>

Test passes is you use it exactly as playwright codegen tells you to do it

Test fails it you replace the NBSP with a space

The logging is not very clear in what goes wrong

Motivation

The logging for regular functions is very clear and I love this new function, however it would be nice if the loggin in general could be better. Compared to the rest of the loggin, for this function it can feel very verbose and not clear what the actual issue is.

[yury-s]

Can you share complete test where it reproduces? I tried to create one below based on the html snippet you provided, but it does pass:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.setContent(`<span class="label__text">E-mailadres<span class="label__required-text">&nbsp;(<!-- -->verplicht<!-- -->)</span></span>`);
  await expect(page.locator('body')).toMatchAriaSnapshot(`- text: E-mailadres (verplicht)`);
});```

[mduivcap]

I see, I've never used page.setContent so it's nice to learn something new.
But here is a publicly available website that has the same issue. I've added a screenshot, since I cannot copy paste the NBSP part.
Below the screenshot I've added the test in code, but just use playwright codegen and even though it looks like NBSP is not in that code, if you paste it into an editor, it will be added like in this screenshot. And the test will fail if you leave it out like in the code snippet below the screenshot.

test("NBSP test", async ({ page }) => {
        await page.goto("https://www.platformrijksoverheidonline.nl/service/contact");
        await expect(page.getByLabel("Contactformulier")).toMatchAriaSnapshot(`
            - heading "Contactformulier" [level=2]
            - text: Vraag of opmerking (verplicht)
            - textbox "Vraag of opmerking (verplicht)"
        `);
    });

So now I think about it, it's a couple of feature requests in one.

1. Make sure playwright codegen shows the NBSP
2. Make sure the playwright error shows the NBSP (my initial request)

This last screenshot is what Playwright codegen shows you

But as mentioned before, when you copy paste this into an editor, it will be shown as you see in the first screenshot

[mduivcap]

I might have found a related bugrelated to nbsp;
This one you cannot reproduce on the earlier mentioned website since this description is only on a private test site. But you get the idea from what I'm about to say.

const elm = page.locator(`head > meta[name="description"]`);
const description = 
    "Op zoek naar een snelle, veilige en toegankelijke manier om jouw communicatiedoelstellingen online te behalen? Platform Rijksoverheid Online (PRO) is het centrale platform waar organisaties binnen de Rijksoverheid  websites, online magazines en..."
wait expect(elm).toHaveAttribute("content", description);

I get a vague errror in the log like mentioned before, it seems to match, yet it says it does not.

I copied the text from the browser, which includes   halfway into the sentence, but this gets lost with copy pasting.

If I shorten the description to just before this   the test passes.