Escribir pruebas de Cucumber

Uso de Cucumber con axe DevTools

Prerrequisitos

Para escribir pruebas de accesibilidad y producir resultados, ya debe haber creado un archivo de prueba con axe DevTools y su elección de Selenium WebDriver preimportado y preinicializado. Si aún no lo has hecho, lee esta guía sobre cómo hacerlo.

Configuración

Primero, agregue axe DevTools a su configuración

public class AppConfiguration {

    @Bean
    public static AxeWorld axeWorld() {
        return new AxeWorld();
    }
}

Ahora, agregue los pasos necesarios para usar axe DevTools

public class StepDefinitions {

    private AxeWorld axeWorld;

    public StepDefinitions(AxeWorld axeWorld) {
        this.axeWorld = axeWorld;
    }

    private WebDriver webDriver;

    @Before
    public void setup() throws IOException {
        webDriver = new ChromeDriver();
        axeWorld.setPage(new AxeDriver(webDriver));
    }

    @After
    public void tearDown() throws Exception {
        webDriver.quit();
    }

    @When("^I visit \"([^\"]*)\"$")
    public void iVisit(String url) throws Throwable {
        webDriver.get(url);

    }
}

Escribir pruebas

Antes de poder probar una página, necesita acceder a ella. El primer paso es crear una instancia de Selenium WebDriver y acceder a una página

WebDriver webDriver = new ChromeDriver();
webDriver.get("'https://broken-workshop.dequelabs.com'");

Luego, puede crear un objeto de controlador de escaneo de axe DevTools y pasarlo al WebDriver

AxeDriver axeDriver = new AxeDriver(webDriver);

Por último, incluye axeDriver en tus definiciones de pasos.

// Inject AxeWorld into your step definitions.
public StepDefinitions(AxeWorld axeWorld) {
  this.axeWorld = axeWorld;
}
// Provide the page to the Axe World
axeWorld.setPage(new axeDriver(webDriver));

Luego puedes probar la accesibilidad de la página. Actualmente, axe DevTools admite testeo de Pico y Spring a través de Cucumber.

Uso

Pasos de Cucumber de accesibilidad

Los ejemplos de comprobaciones de accesibilidad que aparecen a continuación utilizan Then the page should be axe clean, pero todas las comprobaciones funcionan indistintamente con Then the page should be audited for accessibility. La diferencia entre estos dos es si las pruebas fallarán ante violaciones de accesibilidad con Then the page should be axe clean, o si no fallarán con Then the page should be audited for accessibility.

Para construir un paso de Cucumber con accesibilidad de axe, comience con el paso base y agregue las cláusulas necesarias. Todas las cláusulas siguientes pueden combinarse; sin embargo, deben aparecer en el orden especificado:

Then the page should be axe clean [including] [excluding] [according-to] [checking-rules/checking-only-rules] [skipping-rules]

Paso base

El paso base es el componente principal del paso Cucumber. Es un paso completo por sí solo y verifica que la página cargada actualmente sea accesible. Realiza una auditoría sobre la accesibilidad de tu página. La auditoría registra los problemas de accesibilidad en target/axe-report/accessibility-check.log y crea una salida JSON de los resultados en target/axe-report/accessibility-check.json.

Then the page should be axe clean

This step will cause test suite failures if accessibility violations are found

Then the page should be audited for accessibility

This step will require handling of violations outside of test suite failures, as this step does not trigger the suite to fail if violations are found.

Alcance

Axe DevTools permite que los análisis de accesibilidad tengan un alcance inclusivo y exclusivo. Además, estos alcances pueden funcionar entre sí para crear áreas o zonas de alcance complejas. Estos alcances funcionan a partir de selectores CSS.

Cláusula de inclusión

La cláusula de inclusión within "#selector" especifica qué elementos comprobar en la página. Sólo se escanearán los elementos dentro del ámbito seleccionado. La cláusula de inclusión debe incluir un selector CSS válido entre comillas dobles. Utilice selectores compuestos para seleccionar múltiples elementos. P.ej. within "#header, .footer"

Then the page should be axe clean within "#selector"

Cláusula de exclusión

La cláusula de exclusión excluding "#selector" especifica qué elementos deben ignorarse. No se escaneará ningún elemento dentro del ámbito seleccionado. La cláusula de exclusión debe incluir un selector CSS válido entre comillas dobles. Utilice selectores compuestos para seleccionar múltiples elementos. P.ej. excluding "#widget, .ad"

Then the page should be axe clean excluding "#selector"

Encadenando inclusión y exclusión

Para encadenar cláusulas de inclusión y exclusión, utilice el punto y coma (;) o la palabra pero para separarlas.

Then the page should be axe clean within "main"; excluding "aside"
Then the page should be axe clean within "main" but excluding "aside"

Configuración de reglas

Hay algunas formas de cambiar la configuración de reglas estándar usando la API de Cucumber. Puede seleccionar reglas por grupo mediante el uso de etiquetas o seleccionar reglas individualmente por su ID de regla.

Cláusula de etiqueta de regla

La cláusula de etiqueta especifica qué estándar (o estándares) de accesibilidad utilizar en la verificación de la página. Especifique los estándares de accesibilidad por nombre (etiqueta). Se pueden especificar múltiples estándares cuando se separan por comas. P.ej. according to: wcag2a, section508

Todos los nombres de las etiquetas están documentados además de una lista completa de descripciones de reglas que corresponden a cada etiqueta.

Then the page should be axe clean according to: best-practice

Consulte la cláusula de reglas adicionales

Esta cláusula le permite agregar reglas adicionales a sus reglas existentes. Puede especificar una sola regla por ID de regla o una lista de reglas separadas por comas. Consulte la documentación de reglas para obtener una lista de las reglas y sus ID de regla. Utilice un punto y coma (;) o la palabra [missing word] and para separar la cláusula de reglas de verificación de cualquier cláusula anterior.

Then the page should be axe clean checking: color-contrast

Then the page should be axe clean according to: wcag2a; checking: color-contrast
Then the page should be axe clean according to: wcag2a and checking: color-contrast

Cláusula de verificación solo de reglas especificadas

Al agregar la palabra only [insertar palabra] a la cláusula de reglas de verificación, puede cambiar el significado del paso. Como se describió anteriormente, la cláusula de verificación de reglas especifica reglas adicionales para ejecutar. Sólo se comprueban las reglas especificadas si se utiliza la palabra only [palabra]. Consulte la documentación de reglas para obtener una lista de las reglas y sus ID de regla. Utilice un punto y coma (;) o la palabra [missing word] and para separar la cláusula de reglas de verificación de cualquier cláusula anterior.

Then the page should be axe clean checking only: color-contrast

Cláusula de omisión de reglas

La cláusula skipping-rules especifica qué reglas se deben omitir de la configuración de reglas existente. Las reglas que se deben omitir se especifican mediante identificadores de reglas separados por comas. Consulte la documentación de reglas para obtener una lista de las reglas y sus ID de regla. Utilice un punto y coma (;) o la palabra [missing word] para separar la cláusula de reglas de verificación de cualquier cláusula anterior. and

Then the page should be axe clean skipping: color-contrast

Then the page should be axe clean according to: wcag2a; skipping: color-contrast
Then the page should be axe clean according to: wcag2a but skipping: color-contrast

Cláusula de selección de conjunto de reglas

Acceda a los conjuntos de reglas etiquetados en axeDriver a través de una cláusula Cucumber. Esta funcionalidad le permite especificar un conjunto de reglas (por ejemplo: 508, wcag2, wcag2.1) para auditar la accesibilidad de la página.

Then the page should be axe clean according to ruleset: wcag2.1

Servicio de uso

Obtenga información sobre las tendencias de uso de axe DevTools dentro de su organización

De forma predeterminada, el servicio de utilización está deshabilitado y la URL predeterminada es https://usage.deque.com.

Variables de entorno

Este método permite a los usuarios cambiar valores específicos del servicio de utilización a través de variables de entorno.

Próximos pasos

Para un uso posterior de los resultados del análisis de axe DevTools, como los informes, consulte la documentación del paquete Java Selenium de axe DevTools

Solución de problemas

Si tiene problemas al configurar su prueba de accesibilidad, comuníquese directamente con su representante de Deque, contáctenos a través de nuestra mesa de soporte o envíenos un correo electrónico. Estaremos encantados de ayudarle a poner en marcha sus esfuerzos de pruebas de accesibilidad.