Accessibility testing with Playwright in C#

dotnet new nunit -o A11yTests
cd A11yTests
dotnet add package Microsoft.Playwright.NUnit --version 1.64.1
dotnet add package Deque.AxeCore.Playwright --version 4.14.0
dotnet add package RecursiveAI.OneHtml.Accessibility.Validation --version 1.0.0
dotnet build
pwsh bin/Debug/net10.0/playwright.ps1 install chromium

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Get a library card</title>
  <style>
    body { font: 16px/1.5 system-ui, sans-serif; margin: 2rem; background: #fff; color: #222; }
    .hint { color: #999; }
  </style>
</head>
<body>
  <header><img src="logo.png" width="120" height="40"></header>
  <main>
    <h1>Get a library card</h1>
    <form action="/signup" method="post">
      <label for="name">Full name</label>
      <input id="name" name="name" autocomplete="name">
      <p>Email</p>
      <input type="email" name="email">
      <p class="hint">We never share your email address.</p>
      <button type="submit"><svg aria-hidden="true" width="16" height="16"><path d="M2 8h12"/></svg></button>
    </form>
  </main>
</body>
</html>

using Deque.AxeCore.Commons;
using Deque.AxeCore.Playwright;
using Microsoft.Playwright.NUnit;
 
namespace A11yTests;
 
public class AxeTests : PageTest
{
    [Test]
    public async Task SignupPageHasNoAxeViolations()
    {
        // In your suite this is your app's URL; here it is a local file
        await Page.GotoAsync(new Uri(Path.Combine(AppContext.BaseDirectory, "signup.html")).AbsoluteUri);
 
        AxeResult results = await Page.RunAxe();
 
        foreach (AxeResultItem violation in results.Violations)
        {
            TestContext.Out.WriteLine($"{violation.Id} ({violation.Impact}): {violation.Help}");
            foreach (AxeResultNode node in violation.Nodes)
            {
                TestContext.Out.WriteLine($"  {node.Target}");
            }
        }
        Assert.That(results.Violations, Is.Empty);
    }
}

button-name (critical): Buttons must have discernible text
  button
color-contrast (serious): Elements must meet minimum color contrast ratio thresholds
  .hint
image-alt (critical): Images must have alternative text
  img
label (critical): Form elements must have labels
  input[type="email"]

using Microsoft.Playwright.NUnit;
using RecursiveAI.OneHtml;
using RecursiveAI.OneHtml.Accessibility.Validation;
using RecursiveAI.OneHtml.Accessibility.Validation.Catalogue;
 
namespace A11yTests;
 
public class OneHtmlTests : PageTest
{
    [Test]
    public async Task SignupPageMeetsWcag22AA()
    {
        await Page.GotoAsync(new Uri(Path.Combine(AppContext.BaseDirectory, "signup.html")).AbsoluteUri);
 
        // The DOM as the browser has it now, after any script ran
        Document doc = Document.Parse(await Page.ContentAsync());
        CheckReport report = new Checker().Check(doc, new CheckOptions { Profile = ValidationProfile.Wcag22AA });
 
        foreach (RuleResult failure in report.WithOutcome(Outcome.Failed))
        {
            TestContext.Out.WriteLine($"{failure.RuleId} at {failure.Locator}: {failure.Message}");
        }
        TestContext.Out.WriteLine($"Needs review: {report.Count(Outcome.NeedsReview)}, needs render: {report.Count(Outcome.NeedsRender)}");
 
        // SARIF 2.1.0 for code scanning
        File.WriteAllText("signup.sarif", report.ToSarifJson(new ExportOptions { Url = "signup.html", Indented = true }));
 
        Assert.That(report.Count(Outcome.Failed), Is.Zero);
    }
}

button-name at button: The button has no accessible name.
color-contrast at form > p:nth-of-type(2): The text has a contrast ratio of 2.84:1; 4.50:1 is needed.
image-alt at img: The image has no accessible name.
label at input[name="email"]: The form field has no accessible name.
Needs review: 6, needs render: 3

using System.Text.Json;
using Microsoft.Playwright;
using Microsoft.Playwright.NUnit;
using RecursiveAI.OneHtml;
using RecursiveAI.OneHtml.Accessibility.Rendered;
using RecursiveAI.OneHtml.Accessibility.Validation;
using RecursiveAI.OneHtml.Accessibility.Validation.Catalogue;
 
namespace A11yTests;
 
public class RenderedFactsTests : PageTest
{
    // Computed styles Chrome adds to each layout box in the snapshot
    private static readonly string[] Styles =
        { "display", "visibility", "position", "float", "overflow-x", "overflow-y", "border-top-style", "border-top-width" };
 
    [Test]
    public async Task SignupPageMeetsWcag22AAWithLayout()
    {
        await Page.SetViewportSizeAsync(1280, 800);
        await Page.GotoAsync(new Uri(Path.Combine(AppContext.BaseDirectory, "signup.html")).AbsoluteUri);
 
        // Serialize the DOM and capture Chrome's layout of that same DOM (Chromium only: CDP)
        Document doc = Document.Parse(await Page.ContentAsync());
        ICDPSession cdp = await Page.Context.NewCDPSessionAsync(Page);
        JsonElement? capture = await cdp.SendAsync("DOMSnapshot.captureSnapshot", new Dictionary<string, object>
        {
            ["computedStyles"] = Styles,
            ["includePaintOrder"] = true,
            ["includeDOMRects"] = true,
            ["includeBlendedBackgroundColors"] = true,
            ["includeTextColorOpacities"] = true,
        });
 
        DomSnapshot snapshot = DomSnapshot.Parse(JsonSerializer.SerializeToUtf8Bytes(capture!.Value), Styles);
        DomSnapshotMapResult mapped = DomSnapshotAdapter.Map(snapshot, doc,
            new DomSnapshotMapOptions { ViewportWidth = 1280, ViewportHeight = 800 });
        Assert.That(mapped.Succeeded, Is.True, $"{mapped.Refusal}");
 
        CheckReport report = new Checker().Check(doc,
            new CheckOptions { Profile = ValidationProfile.Wcag22AA, Facts = mapped.Facts });
 
        foreach (RuleResult failure in report.WithOutcome(Outcome.Failed))
        {
            TestContext.Out.WriteLine($"{failure.RuleId} at {failure.Locator}: {failure.Message}");
        }
        TestContext.Out.WriteLine($"Needs review: {report.Count(Outcome.NeedsReview)}, needs render: {report.Count(Outcome.NeedsRender)}");
 
        Assert.That(report.Count(Outcome.Failed), Is.Zero);
    }
}

button-name at button: The button has no accessible name.
color-contrast at form > p:nth-of-type(2): The text has a contrast ratio of 2.84:1; 4.50:1 is needed.
image-alt at img: The image has no accessible name.
label at input[name="email"]: The form field has no accessible name.
Needs review: 6, needs render: 0

using RecursiveAI.OneHtml;
using RecursiveAI.OneHtml.Accessibility.Validation;
using RecursiveAI.OneHtml.Accessibility.Validation.Catalogue;
 
namespace A11yTests;
 
public class StaticHtmlTests
{
    [Test]
    public void SignupTemplateMeetsWcag22AA()
    {
        // No browser: parse the file's bytes and check them
        Document doc = Document.Parse(File.ReadAllBytes(Path.Combine(AppContext.BaseDirectory, "signup.html")));
        CheckReport report = new Checker().Check(doc, new CheckOptions { Profile = ValidationProfile.Wcag22AA });
 
        foreach (RuleResult failure in report.WithOutcome(Outcome.Failed))
        {
            TestContext.Out.WriteLine($"{failure.RuleId} at {failure.Locator}: {failure.Message}");
        }
        Assert.That(report.Count(Outcome.Failed), Is.Zero);
    }
}

button-name at button: The button has no accessible name.
color-contrast at form > p:nth-of-type(2): The text has a contrast ratio of 2.84:1; 4.50:1 is needed.
image-alt at img: The image has no accessible name.
label at input[name="email"]: The form field has no accessible name.