@@ -17,8 +17,10 @@ await page.GotoAsync("https://playwright.dev/");
1717await Expect (page .Locator (" banner" )).ToMatchAriaSnapshotAsync (@"
1818 - banner:
1919 - heading "" Playwright enables reliable end-to-end testing for modern web apps."" [level=1]
20- - link "" Get started""
21- - link "" Star microsoft/playwright on GitHub""
20+ - link "" Get started"" :
21+ - /url: /docs/intro
22+ - link "" Star microsoft/playwright on GitHub"" :
23+ - /url: https://github.com/microsoft/playwright
2224 - link /[\\d]+k\\+ stargazers on GitHub/
2325" );
2426```
@@ -117,9 +119,7 @@ You can perform partial matches on nodes by omitting attributes or accessible na
117119<button>Submit</button>
118120` ` `
119121
120- *aria snapshot*
121-
122- ` ` ` yaml
122+ ` ` ` yaml title="aria snapshot"
123123- button
124124` ` `
125125
@@ -133,9 +133,7 @@ For elements with ARIA attributes like `checked` or `disabled`, omitting these a
133133<input type="checkbox" checked>
134134` ` `
135135
136- *aria snapshot for partial match*
137-
138- ` ` ` yaml
136+ ` ` ` yaml title="aria snapshot (partial match)"
139137- checkbox
140138` ` `
141139
@@ -153,9 +151,7 @@ Similarly, you can partially match children in lists or groups by omitting speci
153151</ul>
154152` ` `
155153
156- *aria snapshot for partial match*
157-
158- ` ` ` yaml
154+ ` ` ` yaml title="aria snapshot (partial match)"
159155- list
160156 - listitem: Feature B
161157` ` `
@@ -174,9 +170,7 @@ By default, a template containing the subset of children will be matched:
174170</ul>
175171` ` `
176172
177- *aria snapshot for partial match*
178-
179- ` ` ` yaml
173+ ` ` ` yaml title="aria snapshot (partial match)"
180174- list
181175 - listitem: Feature B
182176` ` `
@@ -194,9 +188,9 @@ The `/children` property can be used to control how child elements are matched:
194188</ul>
195189` ` `
196190
197- *aria snapshot will fail due to Feature C not being in the template*
191+ Following snapshot will fail due to Feature C not being in the template:
198192
199- ` ` ` yaml
193+ ` ` ` yaml title="aria snapshot"
200194- list
201195 - /children: equal
202196 - listitem: Feature A
@@ -211,9 +205,7 @@ Regular expressions allow flexible matching for elements with dynamic or variabl
211205<h1>Issues 12</h1>
212206` ` `
213207
214- *aria snapshot with regular expression*
215-
216- ` ` ` yaml
208+ ` ` ` yaml title="aria snapshot"
217209- heading /Issues \d +/
218210` ` `
219211
@@ -251,9 +243,7 @@ Headings can include a `level` attribute indicating their heading level.
251243<h2>Subtitle</h2>
252244` ` `
253245
254- *aria snapshot*
255-
256- ` ` ` yaml
246+ ` ` ` yaml title="aria snapshot"
257247- heading "Title" [level=1]
258248- heading "Subtitle" [level=2]
259249` ` `
@@ -266,9 +256,7 @@ Standalone or descriptive text elements appear as text nodes.
266256<div>Sample accessible name</div>
267257` ` `
268258
269- *aria snapshot*
270-
271- ` ` ` yaml
259+ ` ` ` yaml title="aria snapshot"
272260- text: Sample accessible name
273261` ` `
274262
@@ -280,24 +268,32 @@ Multiline text, such as paragraphs, is normalized in the aria snapshot.
280268<p>Line 1<br>Line 2</p>
281269` ` `
282270
283- *aria snapshot*
284-
285- ` ` ` yaml
271+ ` ` ` yaml title="aria snapshot"
286272- paragraph: Line 1 Line 2
287273` ` `
288274
289275# ## Links
290276
291- Links display their text or composed content from pseudo-elements.
277+ Links display their text or composed content from pseudo-elements. The link’s destination may be matched using the `/url` property.
292278
293279` ` ` html
294280<a href="#more-info">Read more about Accessibility</a>
295281` ` `
296282
297- *aria snapshot*
283+ ` ` ` yaml title="aria snapshot"
284+ - link "Read more about Accessibility":
285+ - /url: "#more-info"
286+ ` ` `
298287
299- ` ` ` yaml
300- - link "Read more about Accessibility"
288+ The value of `/url` may also be a regular expression :
289+
290+ ` ` ` html
291+ <a href="https://www.youtube.com/channel/UC46Zj8pDH5tDosqm1gd7WTg">YouTube channel</a>
292+ ` ` `
293+
294+ ` ` ` yaml title="aria snapshot"
295+ - link:
296+ - /url: /https://www.youtube.com/channel/.*/
301297` ` `
302298
303299# ## Text boxes
@@ -308,9 +304,7 @@ Input elements of type `text` show their `value` attribute content.
308304<input type="text" value="Enter your name">
309305` ` `
310306
311- *aria snapshot*
312-
313- ` ` ` yaml
307+ ` ` ` yaml title="aria snapshot"
314308- textbox: Enter your name
315309` ` `
316310
@@ -325,9 +319,7 @@ Ordered and unordered lists include their list items.
325319</ul>
326320` ` `
327321
328- *aria snapshot*
329-
330- ` ` ` yaml
322+ ` ` ` yaml title="aria snapshot"
331323- list "Main Features":
332324 - listitem: Feature 1
333325 - listitem: Feature 2
@@ -344,9 +336,7 @@ Groups capture nested elements, such as `<details>` elements with summary conten
344336</details>
345337` ` `
346338
347- *aria snapshot*
348-
349- ` ` ` yaml
339+ ` ` ` yaml title="aria snapshot"
350340- group: Summary
351341` ` `
352342
@@ -360,9 +350,7 @@ Commonly used ARIA attributes, like `checked`, `disabled`, `expanded`, `level`,
360350<input type="checkbox" checked>
361351` ` `
362352
363- *aria snapshot*
364-
365- ` ` ` yaml
353+ ` ` ` yaml title="aria snapshot"
366354- checkbox [checked]
367355` ` `
368356
@@ -372,9 +360,7 @@ Commonly used ARIA attributes, like `checked`, `disabled`, `expanded`, `level`,
372360<button aria-pressed="true">Toggle</button>
373361` ` `
374362
375- *aria snapshot*
376-
377- ` ` ` yaml
363+ ` ` ` yaml title="aria snapshot"
378364- button "Toggle" [pressed=true]
379365` ` `
380366
0 commit comments