Cypress Accessibility wdraża agenty AI

Cypress Accessibility działa w tle; podczas każdego przebiegu w Cypress Cloud przechwytując snapshoty aplikacji i automatycznie sprawdza je pod kątem standardów WCAG. Wyniki trafiają do chmury, tworząc szczegółową mapę naruszeń powiązaną z konkretnymi widokami i selektorami DOM. 

Do niedawna analiza tych danych wymagała ręcznego przeglądania interfejsu. Dzięki Cypress Cloud MCP, agenty AI mogą teraz pobierać metadane i wyniki dostępności poprzez zapytania do bazy danych, całkowicie pomijając warstwę UI. To znaczy że zamiast ręcznie eksportować, interpretować i grupować defekty, wystarczy wydać agentowi polecenie pobrania raportu dla konkretnej gałęzi lub numeru przebiegu. Agent zwróci zestawienie uwzględniające kontekst: widoki, selektory oraz liczbę wystąpień. 

Precyzyjna identyfikacja elementów

Największą przeszkodą w pracy AI z raportami dostępności jest precyzyjnie odnalezienie elementu w kodzie. Selektor CSS wygenerowany przez silnik Axe (np. MuiPaper-root > :nth-child(2)) bywa dla modeli językowych nieczytelny, co prowadzi do nieefektywnego przeszukiwania repozytorium i zwiększonego zużycia tokenów. 

Rozwiązaniem jest dodanie atrybutów data-cy-component do kontenerów komponentów (np. nawigacji bocznej czy formularza). Wówczas agent otrzymuje jasny sygnał, gdzie dokładnie znajduje się problem. Ta drobna modyfikacja techniczna przyspiesza proces przejścia od wykrycia defektu do jego naprawy.

Debugowanie z Gemini w przeglądarce

Dla tych, którzy wolą pracować bezpośrednio w przeglądarce, Cypress przygotował ścieżkę z wykorzystaniem Gemini w DevToolsach. Ponieważ Cypress Cloud przechowuje snapshoty DOM w skali 1:1 względem środowiska CI, funkcja Print-to-console pozwala błyskawicznie przenieść referencję do elementu prosto do konsoli. 

Stąd droga do poprawki jest już prosta: kliknięcie prawym przyciskiem myszy na element -> „Debug with AI” -> „Start a chat”.

Gemini, mając pełny wgląd w techniczne detale, nie tylko wyjaśni przyczynę naruszenia, ale od razu zaproponuje gotowy kod (np. nowe parametry kolorów w CSS, by spełnić wymogi kontrastu). Takie rozwiązanie sprawdza się, gdy chcemy szybko wyeliminować pojedynczy problem bez odtwarzania całego środowiska lokalnie. 

Plany naprawcze i ownership

W przypadku większych projektów zarządzanie defektami wymaga struktury. Cypress udostępnia szablony, które automatycznie generują plany naprawcze w modelu RACI. Agent AI potrafi pogrupować defekty i przypisać im właścicieli (deweloperów, projektantów czy menedżerów produktu). 

Agenty wspierają też sam proces weryfikacji. AI potrafi ocenić, czy zgłoszone naruszenie faktycznie jest defektem w danej implementacji (co pozwala odsiać tzw. false positives), a ostateczny plan naprawczy powstaje dopiero po zatwierdzeniu diagnozy przez dewelopera.

Analityka 

Dashboardy w planach Enterprise agregują dane i pozwalają wyłapać momenty regresji – można precyzyjne wskazać, który commit lub przebieg wprowadził nowe naruszenia WCAG. 

Podsumowanie

Protokół MCP kończy czasy, w których dane o dostępności były zamknięte wewnątrz interfejsu graficznego. Choć AI nie zastąpi człowieka w podejmowaniu decyzji, to zdejmuje z nas najbardziej nużące zadanie, jakim jest ręczne zbieranie i porządkowanie kontekstu. 

Jeśli chcecie w pełni wykorzystać te możliwości, przyda się Wam biegłość w samej automatyzacji. Osobom chcącym poznać samo narzędzie, polecamy szkolenie Cypress.IO – automatyzacja testów aplikacji webowych.

Więcej szczegółowych informacji na temat konfiguracji i przykładów użycia znajdziecie w oficjalnej dokumentacji Cypress.