Codebeispiele für das @axe-devtools/reporter-Paket
Codebeispiele, die zeigen, wie man das @axe-devtools/reporter-Paket mit anderen Axe DevTools Node-Paketen verwendet
Dieser Artikel bietet Codebeispiele, die demonstrieren, wie man das @axe-devtools/reporter-Paket mit anderen Axe DevTools Node-Paketen verwendet.
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.
