Testing Specific Elements with Cypress Axe

En el capítulo anterior aprendimos cómo validar y comprender los errores de accesibilidad en un proyecto de pruebas automáticas.

Ahora vamos a conocer como ejecutar pruebas de accesibilidad para elementos específicos de una página a través de Cypress-Axe,esto es esencialmente útil cuando no queremos ejecutar las pruebas de accesibilidad para toda una página.

Ejecución de las pruebas en un elemento específico

cy.checkA11y

Para excluir elementos específicos para las pruebas automaticas de accesibilidad, lo que necesitamos hacer es ir a nuestro código en el comando cy.checkA11y()y pasarle un argumento con la propiedad Exclude() de la sección que queremos excluir en los tests de Cypress, en este caso vamos a excluir la sección #Content, y vamos a validar que la cantidad de errores de accesibilidad se debería reducir.

A continuación presentamos el código completo utilizado para excluir elementos específicos para las pruebas automáticas de accessibilidad utilizando Cypress.

/// <reference types="cypress" />

describe('Visit Democart main page to validate Accessibility rules', () => {

    it('Cypress-axe should exclude specific elements on the page', () => {
        cy.visit('https://demo.opencart.com');
        cy.injectAxe();
    cy.checkA11y({exclude: ['#content']});
    })
    
    it('Cypress-axe should only test specific element on the page', () => {
        cy.visit('https://demo.opencart.com');
        cy.injectAxe();
    cy.checkA11y('#content');
    })
});

Como se puede evidenciar, el código utilizado para realizar la exclusión de los elementos de las pruebas de accesibilidad con Cypress-Axe es realmente muy sencillo de programar.

Código utilizado en el archivo accessibility-test.spec.js

Guardemos los cambios que hemos realizado y observemos que después de guardar, Cypress ejecuta automáticamente la prueba.

Ahora vamos a ver el nuevo informe de errores de accessibilidad despues de ejecutado los tests al lado izquierdo de la pantalla donde aparece Test Body, y así mismo se presenta visualmente que los errores se han reducido a 5 accessibility violations were detected.

Los errores de accesibilidad se han reducido

Como se puede ver en la imagen, al excluir la sección #Content, la cantidad de errores de accesibilidad se han reducido.

Finalmente, recapitulemos rápidamente lo que hicimos.

☑️ Para excluir elementos, todo lo que necesita hacer es pasar un objeto con la propiedad Exclude(), y luego pasar la lista de elementos que desea excluir como una matriz.

✅ Para probar solo un elemento específico, todo lo que necesita hacer es pasar el selector que desea probar dentro de cy.checkA11y(), y ¡listo! 😄