Ejemplos de Código para el Paquete @axe-devtools/reporter

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Ejemplos de código que muestran cómo usar el paquete @axe-devtools/reporter con otros paquetes de Axe DevTools Node

Not for use with personal data

Este artículo proporciona ejemplos de código que demuestran cómo usar el paquete @axe-devtools/reporter con otros paquetes de Axe DevTools Node.

note

La clase AxeDevToolsReporter hereda de la clase AxeDevToolsLogger, puedes llamar a los métodos del logger usando la clase AxeDevToolsReporter, específicamente el método logTestResult.

JavaScript para Navegadores

El ejemplo de código en esta sección muestra una implementación de un test de React con la biblioteca de pruebas de 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 { 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();
  });
});

Para más información sobre el paquete de navegador Node (@axe-devtools/browser), consulta la documentación o un ejemplo listo para ejecutarse en GitHub.

Playwright

Paquetes utilizados:

  • @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();
})();

Para más información sobre el paquete Node Playwright (@axe-devtools/playwright), consulta la documentación o un ejemplo listo para ejecutarse 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');

(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 más información sobre el paquete Node Puppeteer (@axe-devtools/puppeteer), consulta la documentación o un ejemplo listo para ejecutarse 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');

(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 más información sobre el paquete Node.js WebdriverIO (@axe-devtools/webdriverio), consulta la documentación o un ejemplo listo para ejecutarse 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');

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 más información sobre el paquete Node WebDriverJS (@axe-devtools/webdriverjs), consulta la documentación o un ejemplo listo para ejecutarse en GitHub.