@axe-devtools/reporter パッケージのコードサンプル

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

他の Axe DevTools Node パッケージと @axe-devtools/reporter パッケージを使用する方法を示すコードサンプル

Not for use with personal data

この記事では、他の Axe DevTools Node パッケージと @axe-devtools/reporter パッケージを使用する方法を示すコード例を提供します。

note

AxeDevToolsReporter クラスは AxeDevToolsLogger クラスから継承しており、AxeDevToolsReporter クラスを使用してロガーのメソッド、特に logTestResult メソッドを呼び出すことができます。

ブラウザ JavaScript

このセクションのコード例は、React Testing Library を使用した React テストの実装と、結果を HTML レポートに変換する方法を示しています。

使用されるパッケージ:

@axe-devtools/browser
@axe-devtools/reporter

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import axeDevTools from '@axe-devtools/browser';
import { Reporter } from '@axe-devtools/reporter';
import "babel-polyfill"

const axeReporter = new Reporter("AxeDevTools-Badcomp-Results", "./test-results/");

describe('Bad Component', () => {

  beforeEach(function(done) {
    axeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ axe DevTools reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     axeDevTools.run(container, (err, results) => {
       axeReporter.logTestResult("badComp", results);
       expect(results.violations.length).toBe(0);
       done();
     });
   });

  afterAll(async (done)  => {
    await axeReporter.buildHTML('./test-results/'); 
    done();
  });
});

Node ブラウザパッケージ (@axe-devtools/browser) についてさらに詳しくは、ドキュメントまたは GitHub 上のすぐに実行できる例を参照してください。

Playwright

使用されるパッケージ:

@axe-devtools/playwright
@axe-devtools/reporter

const rimraf = require('rimraf');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

Node Playwright パッケージ (@axe-devtools/playwright) についてさらに詳しくは、ドキュメントまたは GitHub 上のすぐに実行できる例を参照してください。

Puppeteer

使用されるパッケージ:

@axe-devtools/puppeteer
@axe-devtools/reporter

const puppeteer = require('puppeteer');
const rimraf = require('rimraf');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
    //remove previous axe devtools output files
    rimraf.sync("./a11y_Results/*");

    //launch reporter
    reporter = new Reporter('puppeteer', './a11y_Results');

    //launch puppeteer web driver
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    //launch page for testing
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results = await new AxeDevToolsPuppeteer(page).analyze();
    
    //create report
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');

    //close browser
    browser.close();
})();

Node Puppeteer パッケージ (@axe-devtools/puppeteer) についてさらに詳しくは、ドキュメントまたは GitHub 上のすぐに実行できる例を参照してください。

WebdriverIO

使用されるパッケージ:

@axe-devtools/webdriverio
@axe-devtools/reporter

const rimraf = require('rimraf');
const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
    //remove previous axe devtools output files
    rimraf.sync("./a11y_Results/*");

    //initialize driver
    const client = webdriverio.remote({
      desiredCapabilities: {
        browserName: 'chrome'
      }
    });
    await client.init();
  
    //initialize axe DevTools
    const axeDevTools = new AxeDevToolsWebdriverIO({ client });
    
    //initialize reporter
    reporter = new Reporter('webdriverio', './a11y_Results');

    //access test page
    await client.url('https://broken-workshop.dequelabs.com');

    //scan page
    const results = await axeDevTools.analyze();
    
    //create report
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');

    //close browser
    await client.end();
})();

Node.js WebdriverIO パッケージ (@axe-devtools/webdriverio) についてさらに詳しくは、ドキュメントまたは GitHub 上のすぐに実行できる例を参照してください。

WebDriverJS

使用されるパッケージ:

@axe-devtools/webdriverjs
@axe-devtools/reporter

const rimraf = require('rimraf');
const AxeDevToolsWebdriverJS = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');
const { Reporter } = require('@axe-devtools/reporter');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {

  //remove previous axe devtools output files
  rimraf.sync("./a11y_Results/*");

  //initialize reporter
  reporter = new Reporter('webdriverjs', './a11y_Results');

  new AxeDevToolsWebriverJS(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');
  });
});

Node WebDriverJS パッケージ (@axe-devtools/webdriverjs) についてさらに詳しくは、ドキュメントまたは GitHub 上のすぐに実行できる例を参照してください。

@axe-devtools/reporter パッケージのコードサンプル

ブラウザ JavaScript

Playwright

Puppeteer

WebdriverIO

WebDriverJS

Is this page helpful?

Help us improve this page

Still need help?