0Pricing
Web Accessibility Academy · درس

دمج axe-core في اختبارات Playwright

أفشلوا عملية البناء عند ظهور تراجعات في a11y

دمج axe-core في اختبارات Playwright درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

From Manual Scan to Automated Test

Clicking a browser extension is great for one page. To guard every page on every commit, you wire axe-core into your automated test suite.

Why Playwright

Playwright drives a real browser from code, so axe runs against the page exactly as users see it, including content rendered by JavaScript.

The Bridge Package

The axe-core/playwright package connects the two. Install it alongside Playwright so your tests can inject and run the axe engine.

npm install --save-dev @axe-core/playwright

Import the Builder

In your test file you import AxeBuilder. It is the helper that injects axe-core into the current page and collects the results for you.

import AxeBuilder from '@axe-core/playwright';

Navigate, Then Analyze

First let Playwright load the page, then call analyze on a fresh AxeBuilder to scan whatever is currently rendered in the browser.

await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();

Assert Zero Violations

The result holds a violations array. A passing page has an empty array, so you assert its length is zero to fail the test on any issue.

expect(results.violations).toEqual([]);

A Complete Test Case

Put it together and you have a real accessibility test that runs in CI like any other Playwright spec.

test('home page has no a11y violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Test After Interaction

The real power is scanning dynamic states. Open a modal or expand a menu first, then analyze, so axe checks the UI users actually trigger.

await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();

Narrow the Scope

You can focus the scan on one region with include, which is handy when testing a single component without noise from the rest of the page.

new AxeBuilder({ page }).include('#signup-form').analyze();

Choose Your Rule Set

Use withTags to run only the rules tied to a standard, like the WCAG 2.1 AA criteria, so your test matches your conformance target.

new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();

Remember the Ceiling

Green Playwright tests still only cover the automatable share of issues. They complement manual screen reader checks; they never replace them.

Quick Check

Recall how you make a test fail on accessibility problems.

Recap: a11y in Your Pipeline

AxeBuilder injects axe-core into a real browser, you analyze each state, and assert zero violations. Now accessibility regressions break the build automatically. ✅

الأسئلة الشائعة

هل درس «دمج axe-core في اختبارات Playwright» مجاني؟

نعم — نص درس «دمج axe-core في اختبارات Playwright» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

ماذا ستتعلم في «دمج axe-core في اختبارات Playwright»؟

أفشلوا عملية البناء عند ظهور تراجعات في a11y تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟

لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «دمج axe-core في اختبارات Playwright»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟

نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. ما يمكن للأتمتة اكتشافه وما لا يمكنها اكتشافه
  2. الفحص باستخدام axe DevTools وLighthouse
  3. دمج axe-core في اختبارات Playwright
  4. Linting وبوابات CI لإمكانية الوصول
← العودة إلى Web Accessibility Academy