Probando accesibilidad

Curso Avanzado de Automatización de Pruebas con Puppeteer

Contenido del curso

Para quién es este curso?

1
¿Para quién es este curso?
04:07 min

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

23
Configurando Jenkins con nuestras pruebas y creando reportes
16:33 min

Conclusion del curso

24
Sigue aprendiendo
02:07 min

Tomar examen

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

Agustin Cammarota Muti

Hace 4 años

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

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,
      }
    });
  });
});

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

Para quién es este curso?

¿Para quién es este curso?

Conceptos Avanzados

Emulación de dispositivos

Modo incógnito del navegador

Creando helpers de utilidad

Capturas de pantalla

Visual Testing

Generando PDFs

Geolocalización

Probando accesibilidad

Puppeteer con Firefox

Medir performance: page load

Medir performance: first contentful paint

Creando nuestro propio framework

Inicializando nuestro framework

Creando la Base Page

Page Object Model

Hacer un E2E

Agregar reporte

BDD

BDD y Gherkin

Configurando codeceptjs con Gherkin y BDD

Creando una Prueba con Gherkin

Creando un Scenario Outline

Generando reporte y agregando imágenes al reporte

CI/CD

Configurando Jenkins con nuestras pruebas y creando reportes

Conclusion del curso

Sigue aprendiendo

Probando accesibilidad

Progreso del curso

Para quién es este curso?

Conceptos Avanzados

Creando nuestro propio framework

BDD

CI/CD

Conclusion del curso

Recursos

Recursos