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.

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.

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.

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.

PreviousReviewing the Accessibility Findings in the Tests Next8. Wrapping Up

Last updated 3 years ago

Was this helpful?

/// <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'); }) });