Codebeispiele für das @axe-devtools/reporter-Paket

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

Codebeispiele, die zeigen, wie man das @axe-devtools/reporter-Paket mit anderen Axe DevTools Node-Paketen verwendet

Not for use with personal data

Dieser Artikel bietet Codebeispiele, die demonstrieren, wie man das @axe-devtools/reporter-Paket mit anderen Axe DevTools Node-Paketen verwendet.

note

Die AxeDevToolsReporter-Klasse erbt von der AxeDevToolsLogger-Klasse, Sie können Logger-Methoden mithilfe der AxeDevToolsReporter-Klasse aufrufen, insbesondere die logTestResult-Methode.

Browser-JavaScript

Das Codebeispiel in diesem Abschnitt zeigt eine Implementierung eines React-Tests mit der React Testing Library und die Umwandlung der Ergebnisse in einen HTML-Bericht.

Verwendete Pakete:

  • @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();
  });
});

Für weitere Informationen über das Node Browser-Paket (@axe-devtools/browser) siehe die Dokumentation oder ein einsatzbereites Beispiel auf GitHub.

Playwright

Verwendete Pakete:

  • @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();
})();

Für weitere Informationen über das Node Playwright-Paket (@axe-devtools/playwright) siehe die Dokumentation oder ein einsatzbereites Beispiel auf GitHub.

Puppeteer

Verwendete Pakete:

  • @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();
})();

Für weitere Informationen über das Node Puppeteer-Paket (@axe-devtools/puppeteer) siehe die Dokumentation oder ein einsatzbereites Beispiel auf GitHub.

WebdriverIO

Verwendete Pakete:

  • @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();
})();

Für weitere Informationen über das Node.js WebdriverIO-Paket (@axe-devtools/webdriverio) siehe die Dokumentation oder ein einsatzbereites Beispiel auf GitHub.

WebDriverJS

Verwendete Pakete:

  • @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');
  });
});

Für weitere Informationen über das Node WebDriverJS-Paket (@axe-devtools/webdriverjs) siehe die Dokumentation oder ein einsatzbereites Beispiel auf GitHub.