← Back to Discord Forum

during accessibility testing the comparison fails as the actual snapshot misses some class

I am using playwright for accessibility testing what I noticed is randomly the snapshot comparison fails as the comparison happens before the classes are loaded but visually the page is loaded is this something you people also face? If so how are you handling the situation

This thread is trying to answer question "How can I prevent the snapshot comparison from failing due to classes not being loaded yet during accessibility testing with Playwright?"

0 replies


Handling Snapshot Comparison in Accessibility Testing with Playwright

When performing accessibility testing with Playwright, you might encounter snapshot comparison failures due to classes not being loaded yet. Here's how you can handle this.

Avoid Including the Entire Violations Array

First, avoid including the entire accessibilityScanResults.violations array in your snapshots. This array contains implementation details of the elements, such as a snippet of their rendered HTML. Including these details in your snapshots can cause your tests to break whenever there are unrelated changes to those components.

Create a Violation Fingerprint Function

Instead, create a function that generates a fingerprint of the violation(s). This fingerprint should include only enough information to uniquely identify the issue. Here's an example of how you can implement this function:

function violationFingerprints(accessibilityScanResults) {
  const violationFingerprints = accessibilityScanResults.violations.map(violation => ({
    rule: violation.id,
    targets: violation.nodes.map(node => node.target),

  return JSON.stringify(violationFingerprints, null, 2);

Use the Fingerprints as Snapshots

Finally, use these fingerprints as snapshots for comparison in future test runs. This approach gives you more control over known issues and ensures that only specific violations are checked against snapshots. It helps avoid unnecessary failures caused by changes unrelated to accessibility issues.

By following these steps, you can effectively handle snapshot comparison during accessibility testing with Playwright. For more insights on accessibility testing with Playwright, check out this blog post.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.