Codebeispiele für das Paket @axe-devtools/reporter
Dieser Artikel enthält Codebeispiele, die zeigen, wie das Paket @axe-devtools/reporter mit anderen axe DevTools Node-Paketen verwendet wird.
Die Klasse AxeDevToolsReporter erbt von der Klasse AxeDevToolsLogger . Sie können Logger-Methoden mit der Klasse AxeDevToolsReporter aufrufen, insbesondere die Methode logTestResult .
Browser-JavaScript
Das Codebeispiel in diesem Abschnitt zeigt eine Implementierung eines React-Tests mit der React Testing Library und die Konvertierung 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 AxeDevToolsReporter from '@axe-devtools/reporter';
import "babel-polyfill"
const axeReporter = new AxeDevToolsReporter("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();
});
});
Weitere Informationen zum Node-Browserpaket (@axe-devtools/browser) finden Sie in der Dokumentation oder einem lauffähigen Beispiel auf GitHub.
Playwright
Verwendete Pakete:
- @axe-devtools/playwright
- @axe-devtools/reporter
const rimraf = require('rimraf');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;
const playwright = require('playwright');
const Reporter = require('@axe-devtools/reporter').default;
(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();
})();
Weitere Informationen zum Node Playwright-Paket (@axe-devtools/playwright) finden Sie in der Dokumentation oder einem lauffähigen 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').default;
(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();
})();
Weitere Informationen zum Node Puppeteer-Paket (@axe-devtools/puppeteer) finden Sie in der Dokumentation oder einem lauffähigen 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').default;
(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();
})();
Weitere Informationen zum Node.js WebdriverIO-Paket (@axe-devtools/webdriverio) finden Sie in der Dokumentation oder einem lauffähigen 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').default;
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');
});
});
Weitere Informationen zum Node WebDriverJS-Paket (@axe-devtools/webdriverjs) finden Sie in der Dokumentation oder einem lauffähigen Beispiel auf GitHub.