Cucumber JavaScript
Pruebas usando JavaScript, Axe DevTools y Cucumber
Requisitos previos
Para probar tu contenido usando Cucumber con Axe DevTools, primero necesitas importarlo e inicializarlo en tu proyecto.
Si aún no has completado este paso, por favor selecciona una de las siguientes opciones para configurarte con Cucumber:
Cucumber con Axe DevTools
Una vez que hayas seleccionado una implementación para trabajar con Cucumber, ahora puedes crear un paso reutilizable que se puede usar en cada una de tus características para probar el contenido a nivel de página o un componente específico.
Esta documentación muestra el uso con la integración de WebDriverJS, sin embargo, esto funcionará igual con WebdriverIO y Puppeteer.
Creación de un paso de exploración de página
Para crear un paso de Cucumber que explore toda la página en busca de problemas de accesibilidad, crea una función Entonces que tome un string para el nombre de las páginas. Luego, dentro del paso, simplemente crea una nueva instancia del controlador de Axe DevTools de tu elección y llama a analizar().
Los resultados del escaneo pueden usarse con el paquete de reportes de Axe DevTools y utilizarse para toda la funcionalidad de reportes. Ver Generar informes a partir de resultados JSON de Axe DevTools para más información sobre los reportes de Axe DevTools.
El siguiente ejemplo muestra el uso de una función Entonces:
Then('I check if {string} is axe clean', async pageName => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});El siguiente ejemplo muestra un escenario de Cucumber con un paso Entonces para probar la accesibilidad:
Feature: abcdTech search
As a user, I want to search for computers on abcdTech.
Scenario: Searching for computers
Given I am on the abcdTech homepage
Then I audit "homepage" for accessibility issues
When I search for "computers"
Then I see the page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I check if "searchPage" is axe clean
Creación de un paso de exploración de componentes
Para crear un paso de Cucumber que explore solo una parte de la página o un componente en busca de problemas de accesibilidad, crea una función Entonces que tome un string para el nombre de los componentes y otro string para el selector CSS. Luego, dentro del paso, simplemente crea una nueva instancia del controlador de Axe DevTools de tu elección y llama a analizar().
Los resultados del escaneo pueden usarse con el paquete de reportes de Axe DevTools y utilizarse para toda la funcionalidad de reportes. Ver Generar informes a partir de resultados JSON de Axe DevTools para más información sobre los reportes de Axe DevTools.
El siguiente ejemplo muestra cómo usar Entonces con un selector para escanear parte de una página:
Then('I check if {string} is axe clean with selector {string}', async (pageName, selector) => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.include(selector).analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});Este ejemplo muestra cómo usar el paso Entonces con un escenario que solo explora parte de una página:
Feature: abcdTech cart flow
As a user, I want to find a computer and add it to cart
Scenario: Selecting a new computer and adding to cart
Given I am on the abcdTech laptops page
Then I audit "laptops" for accessibility issues
When I click on more details
Then I see the proper page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I audit "mainContent" for accessibility issues with selector "#container"
Ahora que has completado exitosamente un escaneo de accesibilidad, estás listo para avanzar a temas de escaneo más avanzados como generando informes y usando el objeto de resultados.
Solución de problemas
Si tienes problemas al obtener resultados de exploración, contacta directamente a tu representante de Deque, comunícate con nosotros a través de nuestra mesa de ayuda, o envíanos un correo electrónico. Estaremos encantados de ayudar.
Para obtener más información sobre Axe DevTools en general, consulta la página de bienvenida de Axe DevTools