Skip to content

Commit 80e8a75

Browse files
committed
Minor improvements to Playwright page
1 parent 888dfd3 commit 80e8a75

File tree

1 file changed

+4
-3
lines changed

1 file changed

+4
-3
lines changed

lib/components_guide_web/templates/accessibility_first/playwright.html.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
I usually don’t like snapshot “tests” because they don’t really test anything. Instead of documenting behaviour you want demonstrated, they take a shortcut and just save a dump of everything to disk. Also they usually capture implementation details (like the HTML tree) that should be allowed to vary as you refactor — adding or removing whitespace or a `<div>` shouldn’t affect a test.
66

7-
Instead of snapshotting HTML, consider looking at your accessibility tree. Playwright [lets you inspect this](https://playwright.dev/docs/api/class-accessibility) via `page.accessibility.snapshot()`, and you can capture each tree for Chrome, Safari, and Firefox (each interpret it slightly differently).
7+
Instead of snapshotting HTML, consider looking at your accessibility tree. Playwright [lets you inspect this](https://playwright.dev/docs/api/class-accessibility) via `page.accessibility.snapshot()`, and you can capture each tree for Chrome, Safari, and Firefox (each browser interprets things slightly differently).
88

99
Here is an automated test that retrieves this accessibility tree, and then writes it to a `accessibility-tree.json` file to compare with the next test run.
1010

@@ -62,12 +62,13 @@ Here’s what the tree looks like:
6262
{
6363
"role": "text",
6464
"name": "Get better at accessibility, testing, naming, performance, and using built-in browser features — all for free."
65-
}
65+
},
66+
6667
]
6768
}
6869
```
6970

70-
If you make changes to your app implementation and run the tests again, you’ll see a helpful diff like so:
71+
If you make changes to your site and run the tests again, you’ll see a helpful diff like so:
7172

7273
<collected-figure image="accessibility-tree-snapshot-failure-diff">
7374
Diff comparing the accessibility tree after making changes to the components.guide home page.

0 commit comments

Comments
 (0)