Exemples de code pour le package @axe-devtools/reporter
Cet article fournit des exemples de code qui montrent comment utiliser le package @axe-devtools/reporter avec d'autres packages Node axe DevTools.
La classe AxeDevToolsReporter hérite de la classe AxeDevToolsLogger , vous pouvez appeler des méthodes de logger en utilisant la classe AxeDevToolsReporter , en particulier la méthode logTestResult .
JavaScript de navigateur
L'exemple de code de cette section montre une implémentation d'un test React avec la bibliothèque de tests React et la conversion des résultats en un rapport HTML.
Paquets utilisés :
- @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();
});
});
Pour plus d'informations sur le package de navigateur Node (@axe-devtools/browser), consultez la documentation ou un exemple prêt à l'emploi sur GitHub.
Playwright
Packages utilisés :
- @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();
})();
Pour plus d'informations sur le package Node Playwright (@axe-devtools/playwright), consultez la documentation ou un exemple prêt à l'emploi sur GitHub.
Puppeteer
Packages utilisés :
- @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();
})();
Pour plus d'informations sur le package Node Puppeteer (@axe-devtools/puppeteer), consultez la documentation ou un exemple prêt à l'emploi sur GitHub.
WebdriverIO
Packages utilisés :
- @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();
})();
Pour plus d'informations sur le package Node.js WebdriverIO (@axe-devtools/webdriverio), consultez la documentation ou un exemple prêt à l'emploi sur GitHub.
WebDriverJS
Packages utilisés :
- @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');
});
});
Pour plus d'informations sur le package Node WebDriverJS (@axe-devtools/webdriverjs), consultez la documentation ou un exemple prêt à l'emploi sur GitHub.