validator.nuを使用し、JSON形式で結果を受け取る

curl "https://validator.nu/?doc=https://example.com&out=json"

W3C Markup Validatorで、JSON結果を受け取る

curl "https://validator.w3.org/check?uri=https://example.com&output=json"

上記の違い

W3C Validator

W3C公式の歴史あるバリデーションサービスで、幅広いHTMLバージョン、XHTML、その他のマークアップ(DTD)に対応。
HTML5もサポートしているが、その実装には validator.nu のエンジンを使っていることが多い。

validator.nu (Nu Html Checker)

WHATWGなどが中心となって開発しているHTML5/Living Standard向けのオープンソースエンジン。
最新仕様への追従が比較的早い。

参考記事：

結論

validator.nuを使用した方が良さそう

curl "https://validator.nu/?doc=https://example.com&out=json"

たたた

axe-core & playwright

npm i -D @axe-core/playwright @playwright/test
npx playwright test --ui

example.spec.ts

import { test, expect } from "@playwright/test";
import { AxeBuilder } from "@axe-core/playwright";

test("Accessibility test - Home", async ({ page }) => {
  await page.goto("http://localhost:4321");

  const results = await new AxeBuilder({ page }).analyze();
  // アクセシビリティテストの結果を出力
  results.violations.forEach((violation) => {
    console.log(violation);
  });
  expect(results.violations.length).toBe(0);
});

test("Accessibility test - About", async ({ page }) => {
  await page.goto("http://localhost:4321/about");

  const results = await new AxeBuilder({ page }).analyze();
  // アクセシビリティテストの結果を出力
  results.violations.forEach((violation) => {
    console.log(violation);
  });
  expect(results.violations.length).toBe(0);
});

test("Accessibility test - Contact", async ({ page }) => {
  await page.goto("http://localhost:4321/contact");

  const results = await new AxeBuilder({ page }).analyze();
  // アクセシビリティテストの結果を出力
  results.violations.forEach((violation) => {
    console.log(violation);
  });
  expect(results.violations.length).toBe(0);
});

下記のような感じで、jsonを吐き出してくれる

たたた

validator.nu & Playwrite

npm i -D @playwright/test
npx playwright test --ui

example.spec.ts

import { test, expect, request } from "@playwright/test";

test("HTML Validator - Local HTML", async ({ page }) => {
  // 対象のページに遷移
  await page.goto("http://localhost:4321"); // ここを任意の検証対象ページに

  // ページの HTML を取得
  const htmlContent = await page.content();

  // APIRequestContext を生成 (globalSetup などで使い回す場合は不要)
  const apiContext = await request.newContext();

  // クエリパラメータ
  const params = new URLSearchParams({
    out: "json",
  });

  // validator.nu に HTML を送信
  const response = await apiContext.post(
    `https://validator.nu/?${params.toString()}`,
    {
      headers: {
        "Content-Type": "text/html; charset=utf-8",
      },
      data: htmlContent,
    }
  );

  // ステータスコードを確認
  expect(response.status()).toBe(200);

  // JSON 結果をパース
  const data = await response.json();
  console.log(data.messages);

  // エラーや警告が含まれていないかをテスト
  const errors = data.messages.filter((msg: any) => msg.type === "error");
  expect(errors.length).toBe(0);
});