🦍
Test Automation for Accessibility
  • Bienvenidos
  • Introducción
    • 1. Introduction to Web Accessibility
      • Web Content Accessibility Guidelines 2.0
    • 2. Why Accessibility Testing is Important
      • How can automated accessibility tests help us?
  • 3. Web Accessibility Testing Checks
    • Checks that can be automated
    • Checks that you need to test
    • Tips on doing accessibility testing
  • 4. Accessibility Testing Tools
    • Tools Requiring Human Assistance
    • Semi Automated Accessibility Testing Tools
    • Automated Accessibility Testing Tools
  • 5. Exploring Axe CLI
  • 6. Setting up Cypress
  • 7. Writing Accessibility Tests with Cypress Axe
    • Reviewing the Accessibility Findings in the Tests
    • Testing Specific Elements with Cypress Axe
  • 8. Wrapping Up
Powered by GitBook
On this page
  • Precondiciones
  • Instalación de Cypress
  • Instalación de Cypress-Axe Plugin

Was this helpful?

6. Setting up Cypress

Previous5. Exploring Axe CLINext7. Writing Accessibility Tests with Cypress Axe

Last updated 3 years ago

Was this helpful?

Precondiciones

es una aplicación GUI Test Runner que se instala en la computadora de manera muy sencilla en cualquier de los sistemas operativos:

Sistemas operativos soportados por Cypress macOS 10.9 and above (64-bit only) Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only) Windows 7 and above

Detrás de Cypress hay un proceso de donde se comunican, sincronizan y realizan tareas constantemente en nombre de cada uno. Por lo tanto, para ejecutar Cypress se necesita los siguientes paquetes:

Prerrequisitos para instalar Cypress Tener instalado Node.js y el paquete NPM: Para verificar que ambos paquetes están instalados: node - v npm -v

Si tienes alguna duda de cómo instalar estos dos paquetes, puede seguir este tutorial:

Instalación de Cypress

Es tan sencillo como abrir la carpeta del proyecto donde queremos instalar Cypress y ejecutamos el siguiente comando utilizando la herramienta npm

npm install cypress --save-dev

Luego debemos crear el archivo package.json para configurar las dependencias de Cypress a través del siguiente comando:

npm init

De esta forma Cypress se instalará en el directorio ./node_modules

Antes de ejecutar Cypress, es importante modificar el archivo package.json con el fin de agregar un comando en el apartado "scripts" que nos permita abrir Cypress de una manera más sencilla:

"cypress:open": "cypress open"

Adicionalmente agregamos otro comando para ejecutar cypress sin levantar el runner a través del Cypress CLI:

"test": "cypress run spec"

Finalmente el archivo podría quedar así como la siguiente imagen

Ahora ya podemos ejecutar Cypress framework todas las veces que queramos simplemente escribiendo en la terminal el siguiente comando:

npm run cypress:open

También es posible ejecutar más rapidamente Cypress ejecutando el comando npx

npx cypress open

Cada vez que iniciemos Cypress con el comando se abrirá el Test Runner de Cypress

Instalación de Cypress-Axe Plugin

Por supuesto, para poner en práctica las pruebas automáticas de accessibilidad debemos instalar el paquete cypress-axe con el siguiente comando:

npm i -D cypress-axe@latest

Ahora es sólo esperar que el proceso de instalación este completo, y luego el proyecto ya está listo con las dependencias correctas para iniciar con las pruebas automatizadas de Accessibilidad.

Para usar Cypress-Axe en este proyecto, tengo una configuración más que necesito mostrarte.

Dentro de la carpeta de support debes encontrar el archivo support/index.js

Ahora, debes agregar la declaración import para poder importar correctamente el paquete cypress-axe

import 'cypress-axe';

Este comando básicamente nos permitirá extender el comportamiento predeterminado de Cypress y usar los comandos adicionales que necesitaremos de Cypress-Axe.

Ahora si ya estamos listos para iniciar con las pruebas automatizadas de Accessibilidad.

Si deseas conocer más detalles de como instalar Cypress.io puedes ir directamente a la documentación oficial:

También puedes visitar la documentación oficial de Cypress-Axe para conocer más detalles de su instalación y aplicación en los proyectos:

😄
☝️
https://docs.cypress.io/guides/getting-started/installing-cypress.html#Opening-Cypress
ℹ️
https://github.com/component-driven/cypress-axe
Cypress.io
Node.js
https://nodejs.org/en/download/
https://blog.teamtreehouse.com/install-node-js-npm-windows
Cypress.io instalado en el workspace
Archivo package.json con las configuraciones adicionales
Ejecutando Cypress desde la terminal
El Test Runner de Cypress inicializado
La dependencia cypress-axe instalado correctamente en el archivo package.json
El paquete es importado dentro del archivo index.js