Проверка доступности с помощью WebdriverIO !!!

Тестирование доступности - одна из самых горячих тем в современном сообществе тестировщиков. Поскольку Интернет предназначен для всех, мы несем ответственность за то, чтобы Интернет «действительно» был доступен для всех.

Существуют различные инструменты и методы тестирования для проверки доступности веб-сайта, такие как программы чтения с экрана, сканеры, плагины и т. Д. Существуют также некоторые решения для автоматизации. Здесь мы рассмотрим, как мы можем провести тестирование доступности с помощью проекта на основе webdriverio. Пример проекта с использованием cucumber-webdriverIO можно найти здесь.

Ax-core - прекрасная утилита (в том числе с открытым исходным кодом), совместимая с большинством технологий. Существует модуль узла (ax-core), доступный для использования с проектами на основе webdriverIO. Также есть такие опции, как ax-webdriverjs и ax-webdriverIO. В этом посте мы обсудим интеграцию ax-webdriverIO с проектом огурца на основе webdriverIO.

Давайте начнем-

Установите модуль узла ax-webdriverIO

npm i ax-webdriverio -save-dev

Давайте создадим простой файл функций на огурце, чтобы запустить веб-страницу, как показано ниже.

Схема сценария: Тест для демонстрации тестирования доступности с помощью ax-webdriverIO
Когда я проверяю стандарт доступности A и AA с помощью AX для ‹page›
Примеры:
| page |
| https: //github.com/ |

Пора создать определение шага

Что мы собираемся делать в определении шага? Очевидно, нам нужно запустить данный URL, а также - да! правила доступности должны быть подтверждены на странице. Итак, давайте создадим для этого логику -

Axe-webdriverIO имеет метод под названием «анализ», который вводит заданные правила доступности (теги) в веб-страницу и выполняет сканирование. Если обнаружены какие-либо нарушения, в нем будут перечислены все проблемы с подробным описанием того, какое правило не удалось выполнить для какого компонента, а также предложено возможное решение.

Итак, определение шага будет выглядеть так:

browser.url(url);
browser.pause(5000);
//pass which standard to be validated, by default all three A, AA, AAA standards will be validated
return new axeBuilder(browser).withTags(['wcag2a','wcag2aa','wcag2aa']).analyze().then(function(results) {
        axeViolations = results.value.violations.length;
        report = results.value.violations;
        //If any violation found, write the error into a json file, and mark the test as failed with error details
        //Violation description will have description of the problem, rule id, what and where to fix in html
        if (axeViolations > 0) {
            //Marking test as failed if any accessibility violation is found
            return Promise.reject(
                new Error(
                    JSON.stringify(report, null, '\t')));
}
    });

Все готово! Давайте выполним это и посмотрим, как выглядят результаты -

В этом проекте я создал задачу gulp для выполнения тестов. И для этой цели я создал файл конфигурации «accessibility.conf» с именем файла функции, определениями steo и другими конфигурациями, такими как имя браузера - давайте пока будем проще!

Задача Gulp, как показано ниже -

gulp.task('runAxe', (done)=> {
    return gulp.src('tests/conf/accessibility.conf.js')
        .pipe(webdriver()).
        once('end', ()=> {
            selenium.child? selenium.child.kill(): console.log('No selenium is running')
        }).
        on('error', ()=>{
            done();
        })
});

а также

gulp.task('axe',gulpSequence('selenium-start','runAxe'));

Итак, чтобы выполнить, просто введите gulp runAxe в терминал и нажмите Enter.

Тест запустит браузер, url и ax просканируют страницу, и браузер прекратит работу. Мы увидим нарушения доступности в консоли, а также в отчетах по огурцам, как показано ниже:

Когда вы нажимаете на подробности ошибки, можно найти полную информацию.

Вот и все - мы закончили реализацию !!

Удачного обучения! :)