AxeCore용 HTML 보고

빠른 소개 - 저는 테스트 개발자이자 접근성 옹호자입니다. 나는 또한 커피를 너무 많이 마시고 고양이를 사랑합니다.



테스트 중인 개발자로서 "모든 것"을 자동화하고 확장하는 것은 자동화할 수 없는 작업에 집중할 수 있도록 매우 중요합니다. 나는 접근성이 전체적으로 완전히 자동화될 수 없다고 말하고 싶다. 사이트에 액세스할 수 있는지 확인하려면 여전히 사람들의 수동 확인이 필요합니다.

최근에 자동화 테스트 제품군 내에서 Deque AxeCore을 구현했습니다. Ax Core는 Lighthouse을 포함한 많은 접근성 도구에 사용됩니다. 기본적인 AxeCore 보고서는 가장 읽기 쉽지 않은 JSON 출력입니다. 이 JSON 보고서를 HTML로 형식화할 수 있는 도구를 찾고 싶었습니다. 검색과 행운을 빌어 그런 도구를 찾았습니다Axe HTML Reporter . AxeCore 보고를 위한 이 훌륭한 솔루션에 대해 Liliia Pelypenko( )에게 대단히 감사합니다!

내 요구 사항에 적합한 단계별 ReadMe를 찾을 수 없었습니다. 그래서 저는 이 HTML 보고서를 AxeCore JSON 출력에 구현한 방법을 알려 드리고자 합니다. 아마도 귀하의 요구에도 잘 맞을 것입니다!

또한 하나의 HTML 보고서를 생성하고 각 테스트 실행에 대해 보고서를 다시 작성하기 위한 것이라고 덧붙입니다.

배경 이야기로 영원히 계속하기 전에 이것을 레시피 블로그처럼 보이게 만들기 전에 좋은 부분으로 가자!

좋은 부분

AxeCore를 설치한 후 이제 HTML 보고를 추가합니다.

먼저 NPM을 통해 설치Axe HTML Reporter하거나 가장 편한 방식으로 설치합니다.

Axe HTML Reporter가 설치되면 먼저 AxeHTMLReport.js 파일을 다음과 같이 업데이트합니다.

import { createHtmlReport } from 'axe-html-reporter';
import { writeFileSync, readFileSync } from 'fs';

(() => {
    const rawAxeResults = JSON.parse(readFileSync('AxeResults.json', 'utf8'))
    createHtmlReport({
        results: rawAxeResults,
        //options available to further customize reports
        options: {
        }
    });
})();

옵션을 추가하고 싶은 경우를 대비하여 옵션 영역을 그대로 두었습니다. 옵션은 Ax HTML 보고서 문서에 나열되어 있습니다.

그러면 AxeCore JSON 파일을 가져와 HTML 보고를 통해 필터링한 다음 루트 프로젝트 폴더의 아티팩트 폴더에 이 HTML 보고서accessibilityReport.html를 출력합니다.

파일 구조 예

Sample Test Output