Esempi di Codice per il Pacchetto @axe-devtools/reporter
Esempi di codice che mostrano come utilizzare il pacchetto @axe-devtools/reporter con altri pacchetti Axe DevTools Node
Questo articolo fornisce esempi di codice che dimostrano come utilizzare il pacchetto @axe-devtools/reporter con altri pacchetti Axe DevTools Node.
La classe AxeDevToolsReporter eredita dalla classe AxeDevToolsLogger, è possibile chiamare i metodi del logger usando la classe AxeDevToolsReporter, in particolare il metodo logTestResult.
JavaScript per Browser
L'esempio di codice in questa sezione mostra un'implementazione di un test React con la React Testing Library e la conversione dei risultati in un report HTML.
Pacchetti utilizzati:
- @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();
});
});Per ulteriori informazioni sul pacchetto Node browser (@axe-devtools/browser), vedere la documentazione o un esempio pronto all'uso su GitHub.
Playwright
Pacchetti utilizzati:
- @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();
})();Per ulteriori informazioni sul pacchetto Node Playwright (@axe-devtools/playwright), vedere la documentazione o un esempio pronto all'uso su GitHub.
Puppeteer
Pacchetti utilizzati:
- @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();
})();Per ulteriori informazioni sul pacchetto Node Puppeteer (@axe-devtools/puppeteer), vedere la documentazione o un esempio pronto all'uso su GitHub.
WebdriverIO
Pacchetti utilizzati:
- @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();
})();Per ulteriori informazioni sul pacchetto Node.js WebdriverIO (@axe-devtools/webdriverio), vedere la documentazione o un esempio pronto all'uso su GitHub.
WebDriverJS
Pacchetti utilizzati:
- @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');
});
});Per ulteriori informazioni sul pacchetto Node WebDriverJS (@axe-devtools/webdriverjs), vedere la documentazione o un esempio pronto all'uso su GitHub.
