Escribir Pruebas de Cucumber

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 para 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 Cucumber. Es un paso completo por sí mismo y verifica la accesibilidad de la página actualmente cargada. El paso audited for accessibility registra problemas de accesibilidad en target/axe-report/accessibility-check.log y escribe el resultado en formato JSON en target/axe-report/accessibility-check.json (usa AxeWorld.setReportingOptions para cambiarlo). El paso axe clean no escribe un informe; falla la prueba y enumera las violaciones en el mensaje de error.

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 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 comprobar en la página. Solo los elementos dentro del ámbito seleccionado serán escaneados. La cláusula de inclusión debe incluir un selector CSS válido rodeado de comillas dobles. Una coma en la cláusula no separa una lista de selectores: separa los pasos de una ruta de iframe, por lo que within "#checkout-frame, form" comprueba el form dentro del iframe #checkout-frame. Un paso puede tener solo una cláusula de inclusión, así que para revisar varias áreas no relacionadas, usa un selector que coincida con un elemento que los contenga a todos, o escribe un paso separado para cada área.

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. Ningún elemento dentro del ámbito seleccionado será escaneado. La cláusula de exclusión debe incluir un selector CSS válido rodeado de comillas dobles. Al igual que con la cláusula de inclusión, una coma separa los pasos de una ruta de iframe, por lo que excluding "#ad-frame, .banner" omite el elemento .banner dentro del iframe #ad-frame. Para omitir varias áreas no relacionadas, usa un selector que coincida con todas ellas sin una coma, como una clase compartida.

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

Cláusula de verificación 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

Cláusula para verificar 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

La cláusula de solo verificación y la cláusula de etiquetas establecen la misma opción, por lo que cuando un paso tiene ambas, solo se ejecutan las reglas en la cláusula de solo verificación.

Cláusula para omitir reglas

La cláusula de omisión de reglas especifica qué reglas omitir de la configuración de reglas existente. Las reglas a omitir se especifican mediante IDs de regla separados por comas. Consulta el documentación de reglas para obtener una lista de las reglas y sus IDs de regla. Usa un punto y coma (;) o la palabra but para separar la cláusula de omisión de reglas de cualquier cláusula anterior.

No combines la cláusula de omisión de reglas con una cláusula de reglas de verificación en el mismo paso. Ambas establecen la misma opción y las reglas de verificación se aplican al final, por lo que las reglas que enumeras para omitir no se omiten.

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

Resolució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.