Codevoorbeelden voor het @axe-devtools/reporter-pakket
Codevoorbeelden die tonen hoe het @axe-devtools/reporter-pakket te gebruiken met andere Axe DevTools Node-pakketten
Dit artikel biedt codevoorbeelden die aantonen hoe het @axe-devtools/reporter-pakket met andere Axe DevTools Node-pakketten gebruikt kan worden.
De AxeDevToolsReporter-klasse erft van de AxeDevToolsLogger-klasse, u kunt logger-methodes aanroepen met de AxeDevToolsReporter-klasse, specifiek de logTestResult-methode.
Browser JavaScript
Het codevoorbeeld in deze sectie toont een implementatie van een React-test met de React Testing Library en de conversie van de resultaten naar een HTML-rapport.
Gebruikte pakketten:
- @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();
});
});Voor meer informatie over het Node browser-pakket (@axe-devtools/browser), zie de documentatie of een kant-en-klaar voorbeeld op GitHub.
Playwright
Gebruikte pakketten:
- @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();
})();Voor meer informatie over het Node Playwright-pakket (@axe-devtools/playwright), zie de documentatie of een kant-en-klaar voorbeeld op GitHub.
Puppeteer
Gebruikte pakketten:
- @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();
})();Voor meer informatie over het Node Puppeteer-pakket (@axe-devtools/puppeteer), zie de documentatie of een kant-en-klaar voorbeeld op GitHub.
WebdriverIO
Gebruikte pakketten:
- @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();
})();Voor meer informatie over het Node.js WebdriverIO-pakket (@axe-devtools/webdriverio), zie de documentatie of een kant-en-klaar voorbeeld op GitHub.
WebDriverJS
Gebruikte pakketten:
- @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');
});
});Voor meer informatie over het Node WebDriverJS-pakket (@axe-devtools/webdriverjs), zie de documentatie of een kant-en-klaar voorbeeld op GitHub.
