Cursos Empresas Blog Live Conf Eventos Precios

0:0011:42

Probando accesibilidad

Curso Avanzado de Automatización de Pruebas con Puppeteer

Clase 9 de 24

Clase 9 / 24

const puppeteer = require('puppeteer');
const { AxePuppeteer } = require('@axe-core/puppeteer');
const { createHtmlReport } = require('axe-html-reporter');

describe('Emulando dispositivos', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch({
      headless: true,
      defaultViewport: null
    });
  });

  afterEach(async () => {
    await page.close();
    await browser.close();
  });

  beforeEach(async () => {
    page = await browser.newPage();
  });

  test('Accebilidad Nativa', async () => {
    await page.goto('https://platzi.com', {
      waitUntil: 'networkidle2'
    });
    await page.waitForSelector('img');
    const snapshot = await page.accessibility.snapshot();
    console.log(snapshot);
  });

  test('Accebilidad con AXE', async () => {
    await page.setBypassCSP(true);

    await page.goto('https://platzi.com', {
      waitUntil: 'networkidle2'
    });
    await page.waitForSelector('img');

    const result = await new AxePuppeteer(page).analyze();
    console.log(result.violations);
  });

  test('Accebilidad con AXE con reporte HTML', async () => {
    await page.setBypassCSP(true);

    await page.goto('https://platzi.com', {
      waitUntil: 'networkidle2'
    });

    await page.waitForSelector('img');

    const rawAxeResults = await new AxePuppeteer(page).analyze();

    createHtmlReport({
      results: rawAxeResults,
      options: {
        projectKey: 'Mi primer reporte AXE',
        doNotCreateReportFile: false,
      }
    });
  });
});

Comentarios (5)5 comentarios

Agustin Cammarota Muti

Hace 4 años

Dejo esta dependencia para generar reporte HTML con AXE: npm i axe-html-reporter

Gabriel Cayoja

Hace 3 años

hola Agustin realice el test generando el reporte HTML se ve muy bien, gracias por tu aporte

David steven Abril Pulecio

Hace 2 años

Que buen aporte bro, gracias.

Expandi el codigo agregando un try catch por si las moscas, agregando todas las propiedades del createHtmlReport y commentando la explicacion de cada una, tambien usando css para cambiar el fondo de la pagina a negro y el color del texto a blanco y por ultimo agregue 2 funciones mas para asegurar que la pagina cargue por completo antes de generar el reporte, espero les sea util,

// Import the necessary libraries for generating accessibility reportsconst { AxePuppeteer } = require('@axe-core/puppeteer') const puppeteer = require('puppeteer') const {createHtmlReport} = require('axe-html-reporter'); // Function to wait until the page is stable by checking for network activityconst waitUntilPageIsStable = async (page) => { // Wait for the network to be idle for (5 seconds) await page.waitForNetworkIdle({ idleTime: 5000 });}; // Function to wait for a specific element to appear on the pageconst waitForElement = async (page, selector, timeout = 10000) => { // Waits for the element matching the selector to appear, with a default timeout of (10 seconds) await page.waitForSelector(selector, { timeout });};

describe('Accessibility', () => { let browser let page beforeAll(async () => { browser = await puppeteer.launch({ headless: false, defaultViewport: null, }); page = await browser.newPage(); }, 10000); test('Generates HTML Accessibility Report With Axe Library', async () => { //Bypasses the content security policy page.setBypassCSP(true) //awaits till the site doesnt have any more pending connections to make page.goto('https://www.remodelrepublic.com', { waitUntil: 'networkidle2' }); //waits until Site is fully loaded await waitUntilPageIsStable(page); await waitForElement(page, 'img'); try { //Analyzes the given page const rawAxeResults = await new AxePuppeteer(page).analyze(); //Sets the properties of the report createHtmlReport({ results: rawAxeResults, options: { //Represents the project name or key projectKey: 'My First AXE Accessibility Report', //A boolean that, when set to true, prevents the creation of the report file. Instead, the HTML content is returned as a string. doNotCreateReportFile: false, //String that specifies the name of the report file. If not provided, a default name like accessibilityReport.html is used. reportFileName: 'AccessibilityReport.html', //The directory where the report file should be saved. outputDir: './HTML-Reports', //Allows you to add custom HTML content to the summary section of the report. This can be used to include additional information or styling. customSummary: \<style> body { background-color: black; color: white; } \</style> \<p>Custom summary content\</p>, } }); //Adds a CSS selector to the list of elements to include in analysis // new AxePuppeteer(page).include('.results-panel'); //Add a CSS selector to the list of elements to exclude from analysis // new AxePuppeteer(page).include('.results-panel').exclude('.results-panel h2'); //Prints only The First accessibility violation of the report console.log(rawAxeResults.violations[0].nodes[0]) } catch (e) { console.error('Error Found:', e); } },350000)

afterAll(async () => { await browser.close();}); })

Jose Alzugaray

Hace 5 años

Si a alguien le sirve, yo instale AXE con la siguiente línea: npm install axe-puppeteer

La forma en la que la hizo el profesor no me funcionó en Windows.

Javier Fuentes Mora

Profesor

Hola Jose!, me acabo de dar cuenta que el paquete que estas instalando esta deprecado y se movió al que uso en el video, he notado que con las nuevas versiones de puppeteer al parecer sale un error , para ello y poderlo instalar usa el siguiente comando , lo probe y hasta ahora no ha habido problemas

npm install @axe-core/puppeteer --legacy-peer-deps

Quedo deprecada la librería utilizada, paso la nueva: https://www.npmjs.com/package/@axe-core/puppeteer

Malinda Marlene Perez Alvarado

Hola!!!, estoy llevando el curso, bueno he instalado la librerias que indica el profe, para usar en el código (ambas) y corrieron super, pero a la hora de correr el código me sale error y No logro ubicarlo donde esta ese detalle, si alguien me apoyaaaa!!!, gracias

Carlos Andrés Agudelo Mora

Hace un año

¿Que te dice la consola del error?

In automated testing, bypassing CSP can be useful for several reasons:

Testing Flexibility: It allows testers to inject scripts and styles into the page for testing purposes without being blocked by the CSP. This is particularly useful when you need to test how your application behaves with different scripts or styles.
Debugging: It helps in debugging issues related to CSP by allowing you to temporarily bypass the policy and identify the root cause of the problem.
Automation: When automating tests, you might need to interact with third-party content or resources that are blocked by the CSP. Bypassing CSP ensures that your tests can run smoothly without being interrupted by security policies.

Probando accesibilidad

Progreso del curso

Para quién es este curso?

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

Conclusion del curso