Получение информации о странице через JavaScript

WebdriverIO предоставляет мощные возможности для взаимодействия с веб-страницей и получения данных из неё. Одним из ключевых инструментов для этого является использование JavaScript-кода внутри тестов. Это позволяет напрямую обращаться к DOM, получать значения элементов, атрибуты и свойства объектов.

Методы для выполнения JavaScript на странице

browser.execute — основной метод для выполнения произвольного JavaScript в контексте открытой страницы. Позволяет передавать аргументы в скрипт и получать результат:

const title = browser.execute(() => {
    return document.title;
});
console.log(title); // Выводит заголовок страницы
  • Аргументы можно передавать после функции:
const elementText = browser.execute((selector) => {
    return document.querySelector(selector).textContent;
}, '#main-title');
  • Возвращаемое значение автоматически сериализуется в JavaScript, что делает работу удобной для дальнейших проверок.

browser.executeAsync используется для асинхронного кода, например, при работе с промисами или таймерами на странице:

const result = browser.executeAsync((done) => {
    setTimeout(() => {
        done(document.readyState);
    }, 1000);
});
console.log(result); // 'complete' после выполнения

Получение текста и атрибутов элементов

WebdriverIO предоставляет встроенные методы для получения текста и атрибутов, но иногда требуется более гибкий подход через JavaScript.

  • Текст элемента:
const text = browser.execute((selector) => {
    return document.querySelector(selector).innerText;
}, '.header');
  • Значение атрибута:
const href = browser.execute((selector) => {
    return document.querySelector(selector).getAttribute('href');
}, 'a.link');
  • Свойства элемента:
const isChecked = browser.execute((selector) => {
    return document.querySelector(selector).checked;
}, '#accept-terms');

Использование прямого обращения к DOM через execute позволяет получить данные, которые не доступны через стандартные методы WebdriverIO или Selenium.

Работа с коллекциями элементов

Часто требуется собрать информацию сразу с нескольких элементов. Для этого удобно использовать методы массивов в Jav * aScript:

const items = browser.execute(() => {
    return Array.from(document.querySelectorAll('.item')).map(el => el.textContent);
});
console.log(items); // ['Элемент 1', 'Элемент 2', 'Элемент 3']
  • Array.from позволяет преобразовать NodeList в массив.
  • map помогает получить нужное свойство каждого элемента, например textContent, href, value.

Получение информации о состоянии страницы

Можно собирать данные не только с конкретных элементов, но и о состоянии всей страницы:

  • URL страницы:
const currentUrl = browser.execute(() => window.location.href);
  • Название страницы:
const pageTitle = browser.execute(() => document.title);
  • Скролл и размеры окна:
const viewport = browser.execute(() => ({
    width: window.innerWidth,
    height: window.innerHeight,
    scrollY: window.scrollY
}));

Динамическое взаимодействие с элементами

Через JavaScript можно не только читать данные, но и изменять их свойства или вызывать события:

browser.execute((selector) => {
    const input = document.querySelector(selector);
    input.value = 'Тестовое значение';
    input.dispatchEvent(new Event('input'));
}, '#search');
  • dispatchEvent позволяет эмулировать события, которые обычно вызываются пользователем.
  • Можно комбинировать чтение и запись данных в одном скрипте.

Применение JavaScript для сложных сценариев

С помощью JavaScript можно решать задачи, недоступные стандартными методами WebdriverIO:

  • Получение текста скрытых элементов, где getText() возвращает пустую строку.
  • Работа с элементами внутри shadow DOM:
const shadowText = browser.execute(() => {
    const shadowRoot = document.querySelector('#shadow-host').shadowRoot;
    return shadowRoot.querySelector('.shadow-element').textContent;
});
  • Выполнение асинхронных запросов через fetch для проверки API прямо на странице:
const data = browser.executeAsync((done) => {
    fetch('/api/data')
        .then(res => res.json())
        .then(json => done(json));
});

Практические рекомендации

  • Для простого получения текста или атрибутов предпочтительно использовать встроенные методы getText, getAttribute. JavaScript следует применять при нестандартных задачах.
  • Результаты, возвращаемые из execute, сериализуются, поэтому нельзя передавать сложные объекты с функциями.
  • Асинхронные операции всегда требуют executeAsync, иначе тест не дождётся результата.
  • Обращение к DOM через JavaScript быстрее и гибче, чем использование стандартного API для сложных структур.

Использование browser.execute и browser.executeAsync раскрывает возможности WebdriverIO для гибкого анализа страниц, работы с DOM, получения атрибутов, состояния элементов и выполнения сценариев, которые невозможно реализовать только через стандартные методы библиотеки. Это позволяет создавать надежные, быстрые и точные тесты, контролирующие все аспекты поведения веб-страницы.

Оглавление