Podłączanie axe-core do testów Playwright
Przerywaj budowanie, gdy pojawią się regresje a11y.
Podłączanie axe-core do testów Playwright to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Od skanowania ręcznego do testu automatycznego
Kliknięcie rozszerzenia przeglądarki świetnie sprawdza się w przypadku jednej strony. Aby chronić każdą stronę przy każdym zatwierdzeniu zmian, należy podłączyć axe-core do zautomatyzowanego zestawu testów.
Dlaczego Playwright
Playwright steruje prawdziwą przeglądarką za pomocą kodu, więc axe działa na stronie dokładnie tak, jak widzą ją użytkownicy, łącznie z treściami renderowanymi przez JavaScript.
Pakiet pośredniczący
Pakiet axe-core/playwright łączy oba narzędzia. Należy zainstalować go razem z Playwright, aby testy mogły wstrzykiwać i uruchamiać silnik axe.
npm install --save-dev @axe-core/playwrightImportowanie konstruktora
W pliku testu należy zaimportować AxeBuilder. To pomocniczy element, który wstrzykuje axe-core do bieżącej strony i zbiera wyniki.
import AxeBuilder from '@axe-core/playwright';Najpierw nawigacja, potem analiza
Najpierw należy pozwolić Playwright załadować stronę, a następnie wywołać analyze na nowym obiekcie AxeBuilder, aby przeskanować to, co jest obecnie renderowane w przeglądarce.
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();Sprawdzanie braku naruszeń
Wynik zawiera tablicę violations. Poprawna strona ma pustą tablicę, dlatego należy sprawdzić, czy jej długość wynosi zero, aby test kończył się niepowodzeniem przy dowolnym problemie.
expect(results.violations).toEqual([]);Kompletny przypadek testowy
Po połączeniu wszystkiego otrzymujemy prawdziwy test dostępności, który uruchamia się w CI tak jak każda inna specyfikacja Playwright.
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});Testowanie po interakcji
Prawdziwa siła tkwi w skanowaniu stanów dynamicznych. Najpierw otwórz okno modalne lub rozwiń menu, a dopiero potem wykonaj analizę, aby axe sprawdził interfejs, z którym użytkownicy faktycznie wchodzą w interakcję.
await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();Zawężanie zakresu
Za pomocą include można ograniczyć skanowanie do jednego obszaru. Jest to przydatne podczas testowania pojedynczego komponentu bez zakłóceń powodowanych przez resztę strony.
new AxeBuilder({ page }).include('#signup-form').analyze();Wybór zestawu reguł
Użyj withTags, aby uruchomić tylko reguły powiązane ze standardem, takim jak kryteria WCAG 2.1 AA, dzięki czemu test będzie zgodny z docelowym poziomem zgodności.
new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();Pamiętaj o ograniczeniach
Zielone testy Playwright nadal obejmują tylko tę część problemów, którą można zautomatyzować. Uzupełniają one ręczne testy z czytnikiem ekranu, ale nigdy ich nie zastępują.
Szybkie sprawdzenie
Przypomnij sobie, jak sprawić, aby test kończył się niepowodzeniem z powodu problemów z dostępnością.
Podsumowanie: a11y w potoku
AxeBuilder wstrzykuje axe-core do prawdziwej przeglądarki, analizujesz każdy stan i sprawdzasz zero naruszeń. Od tej pory regresje dostępności automatycznie przerywają proces budowania. ✅
Często zadawane pytania
Czy lekcja „Podłączanie axe-core do testów Playwright” jest bezpłatna?
Tak — pełny tekst „Podłączanie axe-core do testów Playwright” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Podłączanie axe-core do testów Playwright”?
Przerywaj budowanie, gdy pojawią się regresje a11y. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Podłączanie axe-core do testów Playwright”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Co automatyzacja może wykryć, a czego nie
- Skanowanie za pomocą axe DevTools i Lighthouse
- Podłączanie axe-core do testów Playwright
- Lintowanie i bramki CI dla dostępności