Ejemplos de código para el paquete @axe-devtools/reporter
Este artículo proporciona ejemplos de código que demuestran cómo utilizar el paquete @axe-devtools/reporter con otros paquetes de Node axe DevTools.
La clase AxeDevToolsReporter hereda de la clase AxeDevToolsLogger , puede llamar a métodos de logger utilizando la clase AxeDevToolsReporter , específicamente el método logTestResult .
JavaScript del navegador
El ejemplo de código en esta sección muestra una implementación de una prueba React con la biblioteca de pruebas React y la conversión de los resultados en un informe HTML.
Paquetes utilizados:
- @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();
});
});
Para obtener más información sobre el paquete del navegador Node (@axe-devtools/browser), consulte la documentación o un ejemplo listo para ejecutar en GitHub.
Playwright
Paquetes utilizados:
- @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();
})();
Para obtener más información sobre el paquete Node Playwright (@axe-devtools/playwright), consulte la documentación o un ejemplo listo para ejecutar en GitHub.
Puppeteer
Paquetes utilizados:
- @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();
})();
Para obtener más información sobre el paquete Node Puppeteer (@axe-devtools/puppeteer), consulte la documentación o un ejemplo listo para ejecutar en GitHub.
WebdriverIO
Paquetes utilizados:
- @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();
})();
Para obtener más información sobre el paquete Node.js WebdriverIO (@axe-devtools/webdriverio), consulte la documentación o un ejemplo listo para ejecutar en GitHub.
WebDriverJS
Paquetes utilizados:
- @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');
});
});
Para obtener más información sobre el paquete Node WebDriverJS (@axe-devtools/webdriverjs), consulte la documentación o un ejemplo listo para ejecutar en GitHub.