microsoft / microsoft/playwright

[BUG] aria snapshot's regex marked as errors if the test fails

Open
#34,555 5 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

P3-collecting-feedback
Dominant language
TypeScript
Stars
96.3k
Forks
6.5k
Avg merge
1d 6h
Merged PRs (30d)
180

Description

hello, i'm using aria snapshots to validate some sections and when a check fails in the error message all the regex are shown as differences making it difficult to find identify the error.

in the example below the real error is:
```
- - button "Colore neutro Garantisce solo modelli di colore neutro + € 1 "
+ - button "Colore neutro Garantisce solo modelli di colore neutro + € 0 "
```

and as you can see also all the regex are marked as errors.

if in this text i change the "1" to "0" the test is marked as passed

**My code:**
```
await expect(this.page.locator(this.boxConfigurationContainer)).toMatchAriaSnapshot(`
- text: Configura La tua Subbyx Box
- img
- text: /\\d+ % Cosa potresti ricevere/
- button "" [disabled]
- text: /Galaxy S24\\+ Risparmi \\d+,\\d+ € al mese 👍🏼 Molto probabile/
- button ""
- button "Standard Contiene usato PreLoved di qualsiasi grado estetico"
- button /Excellent Contiene solo usato PreLoved di grado estetico Eccellente \\+ \\d+,\\d+ €/:
- paragraph: /\\+ \\d+,\\d+ €/
- link " Quali sono i gradi dei PreLoved?"
- paragraph: Blocca una
- paragraph: Preferenza
- paragraph: Max 1 selezione
- button "Marca Garantisce un modello della marca selezionata + € 0  Seleziona un brand "
- button "Colore neutro Garantisce solo modelli di colore neutro + € 1 "
- button "Schermo base Garantisce uno schermo di dimensioni standard o più ridotte + € 2 "
- button "Schermo grande Garantisce uno schermo più grande rispetto al modello base + € 3 "
- button /Tanta memoria Garantisce una memoria da \\d+ GB o superiore \\+ € 2 /
- button "Continua senza preferenze Ricevi una configurazione casuale Gratis "
- button "Abbonati senza vincoli"
`);
```

**The error:**
```
Locator: locator('//*[@class="w-full flex flex-col justify-center items-center px-5 md:px-[10%] lg:px-[12%] py-14 bg-sbx-gray-light gap-5"]')
- Expected - 6
+ Received + 7

- text: Configura La tua Subbyx Box
- img
- - text: /\d+ % Cosa potresti ricevere/
+ - text: 34 % Cosa potresti ricevere
- button "" [disabled]
- - text: /Galaxy S24\+ Risparmi \d+,\d+ € al mese 👍🏼 Molto probabile/
+ - text: Galaxy S24+ Risparmi 13,92 € al mese 👍🏼 Molto probabile
- button ""
- button "Standard Contiene usato PreLoved di qualsiasi grado estetico"
- - button /Excellent Contiene solo usato PreLoved di grado estetico Eccellente \+ \d+,\d+ €/:
+ - button "Excellent Contiene solo usato PreLoved di grado estetico Eccellente + 3,00 €":
- - paragraph: /\+ \d+,\d+ €/
+ - text: Excellent Contiene solo usato PreLoved di grado estetico Eccellente
+ - paragraph: + 3,00 €
- link " Quali sono i gradi dei PreLoved?"
- paragraph: Blocca una
- paragraph: Preferenza
- paragraph: Max 1 selezione
- button "Marca Garantisce un modello della marca selezionata + € 0  Seleziona un brand "
- - button "Colore neutro Garantisce solo modelli di colore neutro + € 1 "
+ - button "Colore neutro Garantisce solo modelli di colore neutro + € 0 "
- button "Schermo base Garantisce uno schermo di dimensioni standard o più ridotte + € 2 "
- button "Schermo grande Garantisce uno schermo più grande rispetto al modello base + € 3 "
- - button /Tanta memoria Garantisce una memoria da \d+ GB o superiore \+ € 2 /
+ - button "Tanta memoria Garantisce una memoria da 256 GB o superiore + € 2 "
- button "Continua senza preferenze Ricevi una configurazione casuale Gratis "
- button "Abbonati senza vincoli"
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the example with toMatchAriaSnapshot and inspect the aria snapshot matching and diff-reporting entry points. Compare the reported output with the expected snapshot, then add or update coverage so regex-matched lines remain contextual and only the actual mismatch is highlighted.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.