Escribir pruebas con Selenium

Utilizar Axe DevTools Java Selenium

Esta configuración de Axe DevTools no está inherentemente vinculada a ninguna biblioteca de afirmaciones. Esto permite realizar pruebas de accesibilidad simples, así como la total personalización de las pruebas y el uso con afirmaciones personalizadas.

Requisitos previos

Para poder usar Axe DevTools Java Selenium y obtener resultados con él, debe haber creado previamente un archivo de prueba con Axe DevTools y tener su elección de Selenium WebDriver importado e inicializado. Si no ha completado este paso, primero lea esta guía sobre cómo hacerlo.

Ejecutar un escaneo

Con esta configuración, ejecutar un escaneo básico de accesibilidad requiere solo tres líneas de código. En su archivo de prueba, reemplace <URL> con la dirección web deseada de la página que desea probar. Los resultados del escaneo se guardan en la variable results

webdriver.get("<URL>");
Results results = axeSelenium.run(axedriver);
webdriver.quit();

Utilizar los resultados del escaneo

Una vez que haya ejecutado el escaneo, puede que quiera hacer algo con los resultados. La opción más sencilla es imprimir los resultados en la consola.

System.out.print(results);

También puede usar los resultados para verificar violaciones de accesibilidad. La forma más sencilla de hacerlo es con una instrucción como esta:

if (!results.violationFree()) { 
    //do something, like throw an exception
}

Para obtener más información sobre cómo utilizar el objeto de resultados para escribir pruebas personalizadas, consulte la página sobre usando los resultados.

Archivo de prueba de ejemplo

Este archivo de prueba funciona con los mismos componentes básicos cubiertos en importar e inicializar, así como la guía de escritura de pruebas en esta página.

import com.deque.html.axedevtools.selenium.*;
import com.deque.html.axedevtools.selenium.results.*;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Example {
    public static void main(final String[] args) {
        AxeSelenium axeselenium = new AxeSelenium();
        WebDriver webdriver = new ChromeDriver();
        AxeDriver axedriver = new AxeDriver(wd);

        webdriver.get("<URL>");

        Results results = axeselenium.run(axedriver);

        webdriver.quit();

        if (!results.violationFree()) {
            int violationCount = results.getViolations().size();
            System.out.printf("Found %d violations!\n", violationCount);
            System.exit(1);
        }

        System.out.println("No violations found!");
    }
}

En este ejemplo, se utilizan Chrome y ChromeDriver. Esto puede sustituirse por cualquier otro controlador de navegador de Selenium y navegador. Si este archivo de prueba encuentra algún problema de accesibilidad, imprime el número de violaciones encontradas y sale con el código de estado 1 (error). Para usar este archivo de prueba en su propio entorno, deberá agregar una URL a la línea

webdriver.get("<URL>");

Referencia adicional

Además del uso básico descrito anteriormente, Axe DevTools Java Selenium ofrece varios métodos de encadenamiento para modificar la forma en que se ejecuta el escaneo. Estos métodos pueden modificar el alcance del escaneo y el conjunto de reglas a cualquier configuración deseada. Por defecto, se escanea toda la página y se verifica si hay violaciones de accesibilidad según las directrices WCAG 2.0 nivel AA. Un dato importante es que las llamadas subsecuentes al método de ejecución sobrescribirán las preferencias de cualquiera de los métodos de cadena a continuación. Los cambios realizados en el alcance o las reglas no se conservan para múltiples escaneos utilizando estos métodos de cadena.

Alcance

Por defecto, se escanea toda la página. Sin embargo, Axe DevTools permite escanear partes específicas de una página con sus métodos de cadena de alcance. Estos métodos de alcance cambian efectivamente el "área de superficie" de la página que se escaneará al área(s) objetivo deseada(s). Además, hay un método para ignorar violaciones disponible. "Definir el alcance" de la página con este método no reduce el área del escaneo, pero ignorará violaciones de un tipo específico dentro del área especificada y aun así escaneará el área en busca de otras posibles violaciones. Todos estos métodos funcionan basándose en áreas de selectores CSS. El área de cada selector CSS en una página determinada se puede determinar utilizando el widget "inspeccionar elemento" de las herramientas para desarrolladores de su navegador.

Métodos de alcance

Como se explicó anteriormente, estos métodos cambian efectivamente la área de superficie de la página que se escaneará. Hay dos métodos en esta categoría, un método "inclusivo" y un método "exclusivo". Pueden encadenarse mutuamente entre sí para crear múltiples enclaves y exclaves de área de escaneo.

Definición del alcance - Inclusión

El método de cadena de alcance inclusivo altera el escaneo para que solo se ejecute dentro del área de la página especificada por el/los selector(es) CSS que se le pasa. Hay varias maneras de usar el método de inclusión: alcance único, múltiples alcances, alcance compuesto y alcance de IFrame.

Este método se puede utilizar con un solo selector de la siguiente manera:

axeselenium.including("#selector1").run(axedriver);

Este escaneo solo se ejecutará dentro del alcance del selector 1

Puede configurar un escaneo con múltiples alcances:

axeselenium.including("#selector1").including("#selector2").run(axedriver);

Esta llamada escaneará dentro del alcance del selector 1 y del selector 2. Pueden estar separados por comas o declararse en una cláusula de inclusión separada.

El alcance compuesto se puede lograr con la siguiente sintaxis:

axeselenium.including("#selector1 .selector2").run(axedriver);

Este alcance compuesto da como resultado que solo se escaneen los elementos con el selector 2 dentro del selector 1. Esto se configura al no separar con comas los selectores.

Para definir el alcance dentro de un IFrame, se puede pasar un List<String>. El alcance a ser escaneado dentro del IFrame se pasa como un parámetro adicional.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"})).run(axedriver);

Este escaneo se ejecuta en elementos dentro del selector 1, que está dentro del marco 1.

Definir el alcance dentro de múltiples IFrames funciona de la misma manera que la selección múltiple estándar. Simplemente llame a including nuevamente.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"}))
    .including(Arrays.asList(new String[] {"#frame2", "#selector2"})).run(axedriver);

Este escaneo se ejecuta solo dentro del selector 1 dentro del marco 1, y el selector 2 dentro del marco 2.

También es posible definir el alcance dentro de IFrames anidados:

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#frame2", "#selector1"})).run(axedriver);

Este escaneo se ejecuta dentro del alcance del selector 1 dentro del marco 2, que a su vez está dentro del marco 1

Definición del alcance - Exclusión

Además del método de cadena de inclusión, esta API tiene un método de exclusión. Este método altera el escaneo para que solo se escaneen los elementos fuera del alcance especificado. Su configuración y uso son idénticos al método de inclusión, por lo que consulte la sección anterior para obtener más detalles y ejemplos de cómo se puede usar. Un detalle importante a recordar es que los métodos de inclusión y exclusión pueden encadenarse entre sí para crear alcances complejos de manera mucho más sencilla de lo que se lograría solo utilizando inclusión o exclusión.

Este ejemplo muestra una de las formas de combinar los métodos de alcance dentro de y exclusión:

axeselenium.including("#selector1").excluding("#selector2").run(axedriver);

Este escaneo se ejecuta solo en la parte de la página que está dentro del selector 1 y que no está también dentro del selector 2.

Definición del alcance - Ignorar violaciones

El método final relacionado con el alcance es el método de ignorar resultados. Este método no altera el alcance general del escaneo, pero ignorará las violaciones de un tipo específico dentro de un alcance especificado. Funciona pasando el/los selector(es) de los elementos que desea ignorar como un arreglo, junto con la regla que violan.

axeselenium.ignoring("[\".sidebar\", \"#branded-content\"]", "color-contrast").run(axedriver);

Este escaneo ignorará las violaciones de contraste de color dentro de la sección lateral y la sección de contenido de marca.

Reglas

Hay tres formas de modificar la configuración de sus reglas para cada escaneo. Estos diferentes métodos permiten diferentes niveles de granularidad al seleccionar reglas contra las cuales probar. El método de conjunto de reglas menos granular selecciona un conjunto de reglas o un grupo más grande de reglas basado en los estándares comunes de accesibilidad. El método de normas de conjunto de reglas, ligeramente más granular, también conocido como etiquetas, selecciona reglas basadas en las áreas de un estándar de accesibilidad más amplio a las que pertenecen. Finalmente, hay tres opciones para la configuración con una regla a la vez. Todos juntos, estos métodos de cadena le permiten ajustar su escaneo para ejecutar precisamente las reglas que desea.

Para obtener información sobre las reglas de axe-core, visite la página de resumen de conjuntos de reglas.

Selección de conjuntos de reglas

Este método selecciona reglas por su asociación más agregada: un conjunto de reglas. Un conjunto de reglas es una colección de todas las reglas que pertenecen a un estándar de accesibilidad de toda la industria. Conjuntos de reglas para WCAG 2.0, 2.1 y 2.2; ADA Sección 508; Trusted Tester v5; EN 301 549; y RGAA. Además, las reglas de mejores prácticas pueden activarse con una bandera booleana.

Los conjuntos de reglas a menudo están compuestos por múltiples etiquetas, que son reglas agrupadas por distinciones más específicas. Por ejemplo, el conjunto de reglas wcag2 contiene todas las reglas etiquetadas wcag2a reglas de nivel A de WCAG 2.0, wcag2aa para reglas de nivel AA de WCAG 2.0, y wcag2aaa para reglas de nivel AAA de WCAG 2.0.

Utilice esta opción cuando desee seleccionar un conjunto de reglas sin modificar.

axeselenium.forRuleset("wcag2.1").run(axedriver);

Esta verificación se ejecutará solo con las reglas de WCAG 2.1.

Para habilitar las reglas de mejores prácticas, use la segunda forma de forRuleset.

axeselenium.forRuleset("wcag2.1", true).run(axedriver);

Selección de estándar

El método de cadena de estándares de accesibilidad, o etiqueta, permite una mayor granularidad dentro de los conjuntos de reglas de axe-core. Para las reglas basadas en WCAG, este método le permite seleccionar solo las reglas etiquetadas como nivel-A o nivel-AA. Esta lista desglosa los nombres de etiquetas disponibles y sus estándares correspondientes.

Esta opción es particularmente útil cuando solo se prueba una porción específica de un conjunto de reglas, por ejemplo, solo las reglas de nivel A bajo WCAG 2.0.

Aunque no están definidas explícitamente como parte de ningún estándar de accesibilidad, ofrecemos una serie de reglas que llamamos "mejores prácticas". Aunque no son estrictamente necesarias, probar con estas reglas ayudará a que su sitio web sea lo más equitativo posible en su uso.

Se puede seleccionar un solo estándar de la siguiente manera:

axeselenium.accordingTo("wcag2a").run(axedriver);

Esta verificación se ejecutará solo con reglas etiquetadas bajo WCAG 2.0 nivel A

Además, se pueden especificar múltiples etiquetas para seleccionar múltiples estándares de accesibilidad:

axeselenium.accordingTo("wcag2a", "section508").run(axedriver);

Estas verificaciones ejecutarán tanto las reglas etiquetadas bajo WCAG 2.0 nivel A como ADA Sección 508.

Selección de reglas

Finalmente, puede alterar su conjunto de reglas por una sola regla. Para obtener información sobre los nombres de todas las reglas de axe-core y qué prueba cada regla, consulte la documentación de descripciones de reglas de axe-core.

Estos métodos funcionan bien cuando el grupo final de reglas deseado solo difiere de un conjunto de reglas existente o estándar/etiqueta en unas pocas reglas individuales. Para crear un conjunto de reglas completamente personalizado, consulte nuestras opciones de reglas personalizadas.

Comprobación de reglas adicionales

El método de cadena de comprobación le permite agregar reglas adicionales para probar además de su conjunto de reglas estándar.

Este método se puede usar para verificar una sola regla adicional:

axeselenium.checking("label").run(axedriver);

donde el escaneo se ejecuta con el conjunto de reglas predeterminado además de la regla "label".

También se puede usar para verificar múltiples reglas adicionales de dos maneras diferentes:

axeselenium.checking("label", "tabindex").run(axedriver);
axeselenium.checking("label").checking("tabindex").run(axedriver);

donde el escaneo se ejecuta con el conjunto de reglas predeterminado además de las reglas "label" y "tabindex".

También se puede usar para agregar una o varias reglas a una etiqueta especificada:

axeselenium.accordingTo("wcag2a").checking("tabindex").run(axedriver);

donde el escaneo se ejecuta probando contra las reglas de nivel A de WCAG 2.0, con la adición de la regla "tabindex".

Omisión de reglas

Similar al método de verificación, el método de omisión cambia las reglas predeterminadas a ser usadas por la(s) regla(s) especificada(s). Sin embargo, en lugar de agregarlas al conjunto de reglas, el método de omisión elimina la(s) regla(s) especificada(s) de las utilizadas para probar la página. Su configuración y uso son idénticos al método de verificación, por lo que consúltese la sección anterior para más detalles y ejemplos sobre cómo utilizarlo. Un detalle importante a recordar es que los métodos de verificación y omisión pueden encadenarse entre sí para crear conjuntos de reglas personalizados mucho más fácilmente que utilizando solo los métodos de omisión o verificación por separado.

axeselenium.accordingTo("wcag2a").checking("tabindex").skipping("label").run(axedriver);

Este ejemplo muestra un escaneo probando contra las reglas de nivel A de WCAG 2.0, con la adición de la regla "tabindex" y la eliminación de la regla "label".

Solo Verificación

El método de solo verificación verifica solo la(s) regla(s) especificada(s). Cualquier regla no especificada explícitamente no se incluirá en el escaneo.

Este método encadenado se puede usar para especificar una sola regla:

axeselenium.checkingOnly("tabindex").run(axedriver);

donde el escaneo se ejecuta solo con la regla "tabindex".

También se puede usar para especificar más de una regla de estas dos maneras:

axeselenium.checkingOnly("label", "tabindex").run(axedriver);
axeselenium.checkingOnly("label").checkingOnly("tabindex").run(axedriver);

donde el escaneo se ejecuta solo con las reglas "label" y "tabindex".

Deshabilitación de iframe

En páginas volátiles, los iframes pueden causar problemas. Axe necesita ser inyectado en cada frame y configurado de la misma manera en cada frame. Si se añaden o eliminan iframes mientras AxeSelenium::run está probando tu página, es posible que se lancen excepciones o que se produzca un comportamiento inesperado. Como medida de seguridad, AxeSelenium expone un método para deshabilitar toda interacción con iframes, AxeSelenium::disableIframeTesting. Cuando está habilitado, axe-core no se inyectará en los iframes de la página, ni se ejecutará en dichos iframes. Solo se verificará la página de nivel superior.

Se puede usar de esta manera:

axeselenium.disableIframeTesting().run(axedriver);

Servicio de Uso

Obtén información sobre las tendencias de uso de Axe DevTools dentro de tu organización

El servicio de uso puede configurarse mediante variables de entorno o métodos en tiempo de ejecución. Cuando se utilizan ambos, se utilizan los valores en los métodos. Nota: no todos los campos de datos del servicio de uso pueden configurarse mediante métodos.

De forma predeterminada, el servicio de uso está habilitado y los resultados se envían a https://usage.deque.com. Establezca la variable de entorno AXE_TRACK_USAGE en false para deshabilitarlo. 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.

Habilitar Seguimiento

Este método permite a los usuarios optar por enviar o no datos al servicio de uso. El envío está habilitado por defecto.

.enableTracking(boolean state)

Establecer URL de Seguimiento

Este método permite a los usuarios cambiar a dónde se envían los datos de métricas de uso. Por defecto, es https://usage.deque.com

.setTrackingUrl(String url)

Establecer ID Distinto

Este método permite a los usuarios cambiar el id distinto que se almacena/usa

.setDistinctId(String distinctId)

Próximos Pasos

Una vez que estés escribiendo pruebas con Axe DevTools, lee más sobre usando resultados para escribir pruebas personalizadas más detalladas, o lee sobre usando el generador de reportes para generar reportes de los escaneos de accesibilidad.

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 soporte, o envíanos un correo electrónico. Estamos encantados de ayudar a que tus esfuerzos de pruebas de accesibilidad despeguen.