Инъекция jQuery и других библиотек

Инъекция сторонних библиотек в тестируемое веб-приложение позволяет расширить возможности автоматизации, упрощает выбор элементов и выполнение сложных операций с DOM. В WebdriverIO это реализуется через выполнение скриптов в контексте страницы с использованием метода browser.execute.

Подключение jQuery

jQuery предоставляет удобный синтаксис для поиска элементов, манипуляций с DOM и работы с событиями. Если веб-приложение не использует jQuery, её можно динамически подключить:

const jqueryUrl = 'https://code.jquery.com/jquery-3.6.0.min.js';

browser.execute((url) => {
    if (!window.jQuery) {
        const script = document.createElement('script');
        script.src = url;
        script.type = 'text/javascript';
        script.onl oad = () => console.log('jQuery загружен');
        document.head.appendChild(script);
    }
}, jqueryUrl);

Особенности подхода:

Проверка if (!window.jQuery) предотвращает повторную загрузку библиотеки.
Метод browser.execute выполняет функцию в контексте браузера, что позволяет работать с глобальными объектами страницы.
onload используется для отслеживания завершения загрузки, но в тестах часто достаточно паузы или ожидания элементов.

После инъекции можно использовать jQuery для поиска элементов и выполнения действий:

browser.execute(() => {
    $('button.submit').click();
});

Инъекция других библиотек

Любую JavaScript-библиотеку можно подключить аналогично jQuery. Необходимо указать URL скрипта и использовать browser.execute:

const libraryUrl = 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js';

browser.execute((url) => {
    if (!window._) {
        const script = document.createElement('script');
        script.src = url;
        script.type = 'text/javascript';
        document.head.appendChild(script);
    }
}, libraryUrl);

После этого глобальная переменная библиотеки доступна в контексте страницы, и её функции можно использовать для обработки данных, фильтрации массивов или любых других операций:

browser.execute(() => {
    const arr = [1, 2, 3, 4, 5];
    console.log(_.shuffle(arr));
});

Асинхронные библиотеки и ожидания

Если библиотека загружается асинхронно, важно дождаться её полной загрузки перед использованием. Один из подходов — использовать промисы внутри browser.executeAsync:

const jqueryUrl = 'https://code.jquery.com/jquery-3.6.0.min.js';

browser.executeAsync((url, done) => {
    if (!window.jQuery) {
        const script = document.createElement('script');
        script.src = url;
        script.type = 'text/javascript';
        script.onl oad = () => done(true);
        document.head.appendChild(script);
    } else {
        done(true);
    }
}, jqueryUrl);

Метод executeAsync позволяет WebdriverIO дождаться завершения выполнения кода в браузере перед продолжением теста.

Работа с конфликтами и изоляцией

Подключение сторонней библиотеки может вызвать конфликт с существующими скриптами страницы. Чтобы избежать этого:

Использовать jQuery.noConflict(), если на странице уже есть другая версия jQuery.
Загружать библиотеку с уникальными глобальными переменными.
Изолировать скрипты внутри анонимных функций или замыканий.

Пример с noConflict:

browser.execute(() => {
    const $j = jQuery.noConflict(true);
    $j('button.submit').click();
});

Применение в тестах

Инъекция библиотек особенно полезна для:

Упрощения сложных селекторов.
Быстрой манипуляции DOM элементов, которые сложно найти через стандартные методы WebdriverIO.
Использования сторонних утилит для работы с данными на странице.
Тестирования старых или динамически создаваемых элементов, где стандартные методы ожидания могут быть неудобны.