7. Writing Accessibility Tests with Cypress Axe

En el capítulo anterior, vimos cómo podemos configurar Cypress y Cypress-Axe en un proyecto de pruebas.

Ahora comenzaremos a agregar algunas pruebas automatizadas de accesibilidad en nuestro proyecto utilizando el editor de código Visual Studio Code.

Visual Studio Code es un software libre que puede ser descargado desde la página https://code.visualstudio.com/

Empecemos.

Escribiendo el primer test

Entonces, tengo el programa Visual Studio abierto y lo que haré es eliminar los otros archivos de prueba que no necesitamos para este proyecto dentro de la carperta /integration.

Ahora, dentro de la carpeta integration voy a agregar un nuevo archivo de prueba que llamaré accessibility-test.spec.js, y éste será nuestro primer test de accessibilidad.

Luego en este archivo, empiezo agregando una importación a los tipos de referencia de Cypress con el siguiente comando:

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

Ahora, lo que significa este tipo de referencia es asegurar que podamos acceder a todos los diferentes métodos de Cypress automáticamente.

Ahora empezamos a escribir el primer bloque de tests en Cypress con el primer parámetro 'describe' el cual se le dará un nombre, el que tu quieras.

Este tipo de comandos en Cypress te permite agrupar tus pruebas de una manera mucho más estructurada.

Ahora, sigamos adelante y escribamos nuestro primer bloque 'it' en Cypress donde se incluye los diferentes comandos de Cypress que necesitamos ejecutar para las pruebas automatizadas.

Entonces, el primer comando que necesitamos es cy.visit, que es un método en Cypress para visitar la aplicación que vamos a realizar los tests. En mi caso yo estoy utilizando la página OpenCart: https://demo.opencart.com

El siguiente comando en realidad proviene de la libreriaCypress-Axe y se llama cy.injectAxe. Este comando se activa automaticamente durante la ejecución de las pruebas, por lo que debe agregarse después de visitar la página que vamos a testear.

El último comando que necesitamos aplicar en nuestro código es el comando cy.checkA11yel cual permite escanear automaticamente las reglas de accesibilidad en busca de fallas y errores de accesibilidad.

A continuación presentamos el código completo utilizado 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 log accessibility failures', () => {
        cy.visit('https://demo.opencart.com');
        cy.injectAxe();
        cy.checkA11y();
    });
});

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

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

Ahora solo es ir de nuevo a la terminal y ejecutar Cypress con el comando: npx cypress open

Si recuerda el capítulo anterior, usamos este comando para iniciar el Cypress Runner donde se ejecutan las pruebas automáticamente.