Как протестировать доступность (accessibility) страницы

Обзор

warning

Данный рецепт работает только при использовании Chrome DevTools Protocol (CDP).

Читайте подробности в разделе «Как использовать CDP в Testplane»

Accessibility tree — это дерево доступности, которое содержит иерархическую структуру доступных объектов. В отличие от DOM-дерева, которое предназначено для браузеров, accessibility-дерево предназначено для скрин-ридеров и других инструментов, помогающих взаимодействовать с сайтами людям с ограниченными возможностями.

Для получения такого дерева в puppeteer есть специальный класс Accessibility.

Пример

Вот пример, как его можно использовать:

it("should get accessibility tree of yandex.ru", async function () {
    // Получаем инстанс puppeteer'а
    const puppeteer = await this.browser.getPuppeteer();

    // Получаем первую открытую страницу (считаем, что она активная в данный момент)
    const [page] = await puppeteer.pages();

    await this.browser.url("https://yandex.ru");

    // Получаем текущее состояние accessibility дерева
    const snapshot = await page.accessibility.snapshot();
    console.log("snapshot:", JSON.stringify(snapshot, null, 4));
});

Accessibility-дерево

А вот как выглядит получаемое accessibility-дерево:

{
    "role": "WebArea",
    "name": "Яндекс",
    "children": [
        {
            "role": "link",
            "name": "Войти"
        },
        {
            "role": "link",
            "name": "Почта"
        },
        {
            "role": "link",
            "name": "Диск"
        },
        {
            "role": "link",
            "name": "Попробовать Плюс"
        },

        // пропустим для краткости...

        {
            "role": "link",
            "name": "финансы"
        },
        {
            "role": "link",
            "name": "политика"
        }
    ]
}
}

Используя полученное дерево мы можем проверить, что все необходимые узлы содержатся в дереве и имеют правильную структуру.