Cucumber JavaScript
Pruebas con JavaScript, axe DevTools y Cucumber
Prerrequisitos
Para probar su contenido usando Cucumber con axe DevTools, primero debe importarlo e inicializarlo en su proyecto.
Si aún no ha completado este paso, seleccione una de las siguientes opciones para configurarlo con Cucumber:
Cucumber con axe DevTools
Una vez que haya seleccionado una implementación para trabajar con Cucumber, ahora puede crear un paso reutilizable que se puede usar en cada una de sus características que probarán el contenido de su nivel de página o un componente específicamente.
Esta documentación muestra el uso con la integración de WebDriverJS, sin embargo, funcionará de la misma manera con WebdriverIO y Puppeteer.
Creación de un paso de escaneo de página
Para crear un paso de Cucumber que escanee toda la página en busca de problemas de accesibilidad, cree una función Then que tome una cadena como nombre de la página. A continuación, dentro del paso, simplemente cree una nueva instancia del controlador de axe DevTools que elija y luego llame a analyze().
Los resultados del escaneo se pueden usar luego con el paquete de reporter de axe DevTools y usarse para todas las funciones de informes. Consulte Generación de informes a partir de resultados JSON de axe DevTools para obtener más información sobre los informes de axe DevTools.
El siguiente ejemplo muestra el uso de la función Then :
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 Then 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 escaneo de componentes
Para crear un paso de Cucumber que escanee solo una parte de la página o un componente en busca de problemas de accesibilidad, cree una función Then que tome una cadena para el nombre del componente y otra cadena para el selector CSS. A continuación, dentro del paso, simplemente cree una nueva instancia del controlador de axe DevTools de su elección y luego llame a analyze().
Los resultados del escaneo se pueden usar luego con el paquete de reporter de axe DevTools y usarse para todas las funciones de informes. Consulte Generación de informes a partir de resultados JSON de axe DevTools para obtener más información sobre los informes de axe DevTools.
El siguiente ejemplo muestra cómo utilizar Luego 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 utilizar el paso Luego con un escenario que solo escanea 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 ha completado con éxito un análisis de accesibilidad, está listo para pasar a temas de análisis más avanzados, como generar informes y usar el objeto de resultados.
Solución de problemas
Si tiene problemas para obtener los resultados del escaneo, comuníquese directamente con su representante de Deque, contáctenos a través de nuestro servicio de asistencia o envíenos un correo electrónico. Estaremos encantados de ayudarle.
Para obtener más información sobre axe DevTools en general, consulte la axe DevTools página de bienvenida