Escribir Pruebas de Cucumber

Usar Cucumber con Axe DevTools

Requisitos previos

Para escribir pruebas de accesibilidad y obtener resultados, debe haber creado previamente un archivo de prueba con Axe DevTools y su elección de Selenium WebDriver preimportado y preinicializado. Si aún no ha hecho esto, lea esta guía sobre cómo hacerlo.

Configuración

Primero, añada Axe DevTools a su configuración

public class AppConfiguration {

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

Ahora, añada 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 instanciar 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 pasar el WebDriver

AxeDriver axeDriver = new AxeDriver(webDriver);

Finalmente, incluya el axeDriver en sus 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 puede probar la página en busca de accesibilidad. Actualmente, Axe DevTools admite pruebas con Pico y Spring a través de Cucumber.

Uso

Pasos de Cucumber de Accesibilidad

Los ejemplos de comprobaciones de accesibilidad 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 la prueba fallará por violaciones de accesibilidad con Then the page should be axe clean, frente a no fallar con Then the page should be audited for accessibility.

Para construir un paso de Cucumber de accesibilidad con axe, comience con el paso base y agregue las cláusulas necesarias. Todas las siguientes cláusulas pueden combinarse y ajustarse; 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 central del paso de Cucumber. Es un paso completo por sí solo y verifica que la página actualmente cargada sea accesible. Realiza una auditoría de la accesibilidad de su página. La auditoría registra 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.

Delimitación

Axe DevTools permite que los escaneos de accesibilidad estén delimitados de manera inclusiva y exclusiva. Además, estos alcances pueden funcionar entre sí para crear complejos enclaves y anexos de delimitación. Estos alcances funcionan a partir de selectores CSS.

Cláusula de Inclusión

La cláusula de inclusión within "#selector" especifica qué elementos verificar en la página. Solo se escanearán los elementos dentro del alcance seleccionado. La cláusula de inclusión debe incluir un selector CSS válido rodeado de comillas dobles. Use selectores compuestos para seleccionar múltiples elementos. 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 ignorar. No se escanearán elementos dentro del alcance seleccionado. La cláusula de exclusión debe incluir un selector CSS válido rodeado de comillas dobles. Use selectores compuestos para seleccionar múltiples elementos. Ej. excluding "#widget, .ad"

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

Encadenamiento de inclusión y exclusión

Para encadenar cláusulas de inclusión y exclusión, use 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 varias formas de cambiar la configuración estándar de reglas 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 usar 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 están separados por comas. Ej. according to: wcag2a, section508

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

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

Verificación de Cláusulas de Reglas Adicionales

Esta cláusula le permite añadir 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 una lista de las reglas y sus IDs de regla. Use un punto y coma (;) o la palabra and para separar la cláusula de verificación de las reglas de cualquier cláusula(s) anterior(es).

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

Verificación de Solo Reglas Específicas

Al agregar la palabra only a la cláusula de verificación de reglas, puede cambiar el significado del paso. Como se describió anteriormente, la cláusula de verificación de reglas especifica reglas adicionales para ejecutar. Solo se verifican las reglas especificadas si se utiliza la palabra only. Consulte la documentación de reglas para una lista de las reglas y sus IDs de regla. Use un punto y coma (;) o la palabra and para separar la cláusula de verificación de las reglas de cualquier cláusula(s) anterior(es).

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

Cláusula de Omisión de Reglas

La cláusula de omisión de reglas especifica qué reglas omitir de la configuración de regla existente. Las reglas a omitir se especifican por ID de regla separadas por comas. Consulte la documentación de reglas para una lista de las reglas y sus IDs de regla. Use un punto y coma (;) o la palabra and para separar la cláusula de verificación de las reglas de cualquier cláusula(s) anterior(es).

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 conjuntos de reglas etiquetados en el axeDriver a través de una cláusula de Cucumber. Esta funcionalidad le permite especificar un conjunto de reglas (Ej: 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

Por defecto, el servicio de uso está habilitado y la URL predeterminada es https://usage.deque.com. Establezca la variable de entorno AXE_TRACK_USAGE en false para desactivarlo. Si sus eventos de uso no llegan a Deque, establezca explícitamente la variable de entorno AXE_METRICS_URL.

Variables de entorno

Estas variables de entorno te permiten configurar el servicio de uso y cambiar las propiedades de los eventos reportados.

Próximos pasos

Para un uso posterior de los resultados de tus análisis de Axe DevTools, como reportes, consulta la documentación del paquete Axe DevTools Java Selenium

Solución de problemas

Si experimentas problemas al configurar tus pruebas de accesibilidad, contacta directamente a tu representante de Deque, contáctanos a través de nuestra mesa de ayuda, o envíanos un correo electrónico. Nos complace ayudarte a poner en marcha tus esfuerzos de pruebas de accesibilidad.