Sveltekitアクセシビリティ試験:自動CI A 11 Y試験
26971 ワード
☑️ なぜあなたのワークフローにアクセシビリティテストを含めるのですか？
Sveltekitアクセシビリティテストは複雑である必要はありません.あなたのアプリケーションのアクセシビリティテストの必要性は明確です、そして、ここでアクセシビリティテスト自体の動機づけをリハーサルしている点がありません.しかしながら、有効な問題はなぜ連続的な統合プロセスにおけるアクセシビリティテストを含むのか?言い換えれば、いったんあなたのサイトを構築し、アクセシビリティを改善したら、なぜテストを実行し続ける必要がありますか?
単純な答えは非常に簡単ですが、サイトを更新すると、そのアクセシビリティを破るために.SvelteKitツールを使用すると、VSCodeプラグインで有用なアクセシビリティの統合を使用して、お客様のサイトにアクセスできるように長い道のりになります.Svelteチェックツールから便利なヒントに言及すること.しかし、これらの色のコントラスト比に影響を与えるあなたのブランドの色の新しい色合いは、現在チェックしていません.また、あなたが誤って以前に撮影した
id 追加した新しい要素に.一言で言えば、あなたの最初のアクセシビリティテストは、右のトラックに設定するのに役立ちますが、自動統合テストは、各コミットまたはプッシュで実行しながら、お客様のサイトにアクセスしてください.もちろん、これらは自動化されたテストであり、制限を持っているので、また、アクセシビリティの専門家によって監査を受けるサイトを取得することがありますすべてのベースをカバーする.それは自動化されたテストはまだあなたのツールベルトに保つために便利なツールであると述べた.
🧱 我々の建物
このポストでは、あなたが開発するたびに、またはあなたのサイトを構築するたびに統合テストを実行するPlayWrightを使用する方法を参照してください.PlayWrightは、サイプレスのような自動テストツールです.ここでアクセシビリティテスト用に使用しますが、より完全なエンドツーエンドとインテグレーションテストのためにも使用できます.上では、AXEとHTMCSテストを実行して、PA 11 Yツールを使用してテストをレベルアップします.その後、我々はあなたの継続的な統合プロセスにテストをマージ、ハスキーとポーランドを追加します.それがあなたが興奮することができる何かのように聞こえるならば、なぜ、我々は割れを得ませんか?
⚙️ Sveletkitアクセシビリティテスト：セットアップ
私たちはSvelteKit MDsveX starter しかし、あなたがすでにSveletKitサイトを持っているならば、あなたがそれに沿って続くが、あなた自身のサイトのテストブランチに取り組むために、それはより多くを作るかもしれません.スターターを使っているなら、ローカルでクローニングしてみましょう.
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-accessibility-testing
cd sveltekit-accessibility-testing
pnpm install
pnpm add -D @playwright/test pa11y pa11y-ci playwright-core
pnpx install playwright
劇作家。設定。js
インストールが完了したら、PlayWriter設定ファイルを追加してください.クリエイト
playwright.config.js プロジェクトのルートフォルダで次のコンテンツを追加します.import { devices } from '@playwright/test';
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
use: {
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
// webServer: {
// command: 'pnpm run build && pnpm run preview',
// port: 3000,
// },
};
export default config;
24 – 27 (また、26 あなたのニーズに合わせてください.セットアップの最終的な部分は、それが少しより設定可能にするために環境変数を加えます.自分のサイトで作業している場合は、
dotenv パッケージ.いずれにせよ、更新.env 以下の行を含むファイルSITE_TEST_URL="http://localhost:3000"
🏡 ホームページテスト
我々は、テストファイルのすべてを新しい
tests プロジェクトルートのフォルダ.クリエイトアpages フォルダ内tests 次に、index.spec.mjs ファイルを作成するindex.spec.ts ). 次のコンテンツを追加しますimport { expect, test } from '@playwright/test';
import 'dotenv/config';
import pa11y from 'pa11y';
const path = '/';
const url = `${process.env.SITE_TEST_URL}${path}`;
test.describe('it has no accessbility issues', () => {
test.beforeEach(async ({ page }) => {
await page.goto(url);
});
test('it has no issues identified by htmlcs or axe', async () => {
const results = await pa11y(url, {
runners: ['axe', 'htmlcs'],
});
if (results.issues) {
results.issues.forEach(({ code, message, runner, selector }) => {
console.log({ code, message, runner, selector });
});
}
expect(results.issues.length).toBe(0);
});
});
イン・ライン
14 AXEとHTMLコードのスニファテストの両方を実行します.これらの2つのランナー一緒にfind 35% of accessibility issues . 私は、あなたがバックグラウンドグラデーションを使うとき、斧テストがコントラスト比で失敗することができるのに気がつきました(手動テストがコントラスト比がよいと示しても).あなたはおそらくtweak configuration あなたがこの問題に立候補するならば、そのようなページで.端末から現在ホームページをテストできます.
pnpx pa11y http://localhost:3000/
src/lib/components/SEO/index.svelte . ちょっとコメントアウト<title>{pageTitle}</title> アットライン27 テストする.同様のテストファイルを、上の方に、他のページに作成できます.スターターでは、上記の内容をコピーするので、連絡先ページを持っています
tests/pages/contact.spec.mjs 行更新4 新しいファイルでimport { expect, test } from '@playwright/test';
import pa11y from 'pa11y';
const path = '/contact';
const url = `${process.env.SITE_TEST_URL}${path}`;
🖋 SveletKitブログポストアクセシビリティテスト
我々はすべてのブログの投稿のための単一のテストファイルを作成するので、どのようにパラメータをPlayWightテストを見ることができます.このパターンは、新しいブログファイルを書くとき、新しいテストファイルを作成するのを保存します.新しいフォルダを作成します
tests/posts そしてそこにindex.spec.mjs :import { expect, test } from '@playwright/test';
import 'dotenv/config';
import { existsSync, lstatSync, readdirSync } from 'node:fs';
import { join, resolve } from 'node:path';
import pa11y from 'pa11y';
export const BLOG_PATH = 'src/content/blog';
const __dirname = resolve();
export function getSlugs(location) {
const directories = readdirSync(location).filter((element) =>
lstatSync(`${location}/${element}`).isDirectory(),
);
const articles = [];
directories.forEach((element) => {
const contentPath = `${location}/${element}/index.md`;
if (existsSync(contentPath)) {
articles.push(element);
}
});
return articles;
}
const postLocation = join(__dirname, BLOG_PATH);
const slugs = getSlugs(postLocation);
test.describe('it has no accessbility issues', () => {
for (const slug of slugs) {
const url = `${process.env.SITE_TEST_URL}/${slug}`;
test.beforeEach(async ({ page }) => {
await page.goto(url);
});
test(`${slug}: it has no issues identified by htmlcs or axe`, async () => {
const results = await pa11y(url, {
runners: ['axe', 'htmlcs'],
});
if (results.issues) {
results.issues.forEach(({ code, message, runner, selector }) => {
console.log({ code, message, runner, selector, url });
});
}
expect(results.issues.length).toBe(0);
});
}
});
28 あなたはfor 各スラグのテストを実行するループ.あなた自身のサイトのためにこのコードをアップデートするならばfor ループ含むasync コードを使用する場合は、慎重にする必要がありますforEach 配列メソッド.行のテスト名33 我々は、各テストユニークな名前を与えるためにスラグパラメータが含まれます.ブログ投稿または2つをテストしてみてください.次に、いくつかの統合スクリプトを見ます.あなた自身のサイトの異なるタイプのページがあるならば、より多くのテストファイルを加えてください.
ハスキー連続統合スクリプト
私たちはほとんど終わった.あなた自身の好みに合うために、以下のステップによるTinker.最初に2つの新しいテストスクリプトを追加します
package.json :{
"name": "sveltekit-blog-mdx",
"version": "2.0.0",
"scripts": {
// ...TRUNCATED
"test:a11y": "pa11y-ci --sitemap 'http://localhost:3000/sitemap.xml' --sitemap-find 'https://example.com' --sitemap-replace 'http://localhost:3000'",
"test": "playwright test"
},
test 各コミットをスクリプトとして、私の仕事をチェックする(またはコミットの間で、私が取り組んでいるものに応じて).これはtests フォルダ.それから、私は実行することを含んでいるtest:a11y サイトマップのすべてのページで.私はサイトを構築し、プレビューモードで実行すると、サイトマップが最新の最初の確認を確認します.スターターを使用すると、実行してサイトマップを更新することができますpnpm run generate:sitemap .これらのスクリプトが定義されているので、ハスキースクリプトを加えましょう.これらは、コードをコミットしてプッシュするときに実行されます.あなた自身のサイトで動いているならば、インストールしてください
husky これを得るために.準備ができたら、更新
.husky/pre-commit and .husky/pre-push :#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
pnpm run prettier:check && pnpm run lint:scss && pnpm run test
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
pnpm run check && pnpm run test:a11y
pnpx husky install
それです.私は、それがすべてあなたのためにうまく働いたことを望みます.何か問題があれば何かもっと明確にする必要がある場合は私に知らせてください.
🙌🏽 Sveltekitアクセシビリティ試験：包装
このポストでは、私たちはあなたのSvelteプロジェクトに自動化されたA 11 Yテストを加える良い方法を見ました.特に見たことがあります.
私はこの記事が有用であることを発見し、あなたのSvelteプロジェクトで新しいテストを使用する方法を聞いて熱心です.
🙏🏽 Sveltekitアクセシビリティ試験：フィードバック
そのポストは役に立ちましたか.代わりに別のトピックの記事を見たいですか?新しい投稿のアイデアと連絡を取る.また、もしあなたが私のライティングスタイルが気に入ったら、あなたの会社のサイトにいくつかの記事を書くことができます.記事を読む上で、さらに以下のタッチを取得する方法を見つける.あなたがこの1つに類似したポストを支持したいならば、数ドル、ユーロまたはポンドを準備することができますconsider supporting me through Buy me a Coffee .
最後に、あなたのソーシャルメディアアカウントの投稿を共有すること自由に感じているすべてのあなたの信者は、それが役に立つでしょう.だけでなく、以下のコメントを残して、あなたはaskRodney on Telegram . また、further ways to get in touch with Rodney Lab . 定期的に投稿Astro だけでなくSvelteKit . Also subscribe to the newsletter to keep up-to-date 我々の最新プロジェクトで.
Reference
この問題について(Sveltekitアクセシビリティ試験:自動CI A 11 Y試験), 我々は、より多くの情報をここで見つけました https://dev.to/askrodney/sveltekit-accessibility-testing-automated-ci-a11y-tests-11b2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol