Работа с jQuery если используется

Protractor — это инструмент для end-to-end тестирования Angular-приложений на базе JavaScript, однако он может использоваться и для сайтов с обычным DOM. При работе с динамическим контентом часто возникает необходимость взаимодействовать с элементами, управляемыми библиотекой jQuery. Protractor предоставляет возможности для интеграции с jQuery, что позволяет писать стабильные и надежные тесты даже для сложных UI-компонентов.

Доступ к элементам через jQuery

jQuery обычно используется для быстрого поиска элементов в DOM с помощью CSS-селекторов или собственных методов, таких как $('.class') или $('#id'). В Protractor доступ к jQuery-элементам осуществляется через метод browser.executeScript(), который позволяет выполнять произвольный JavaScript в контексте браузера:

let elementText = browser.executeScript("return $('.my-class').text();");

В этом примере выполняется jQuery-запрос для получения текста всех элементов с классом my-class. Результат возвращается в виде промиса, который можно обрабатывать с помощью then() или async/await:

(async () => {
    let text = await browser.executeScript("return $('.my-class').text();");
    console.log(text);
})();

Взаимодействие с jQuery-элементами

Помимо получения значений, можно выполнять действия над элементами — клик, изменение значений, установку атрибутов:

await browser.executeScript("$('.my-button').click();");
await browser.executeScript("$('#my-input').val('тестовое значение');");

Важно помнить, что такие операции выполняются синхронно в контексте браузера, но результат возвращается в Protractor через промис. Поэтому необходимо всегда использовать асинхронную обработку.

Проверка состояния элементов

jQuery предоставляет удобные методы для проверки состояния элементов, например is(':visible') или hasClass('active'). Protractor может использовать это для ассертов:

let isVisible = await browser.executeScript("return $('#my-element').is(':visible');");
expect(isVisible).toBe(true);

let hasActiveClass = await browser.executeScript("return $('#my-element').hasClass('active');");
expect(hasActiveClass).toBe(true);

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

Использование jQuery с ожиданиями (ExpectedConditions)

Для надежного тестирования важно синхронизироваться с состоянием страницы. Protractor предоставляет ExpectedConditions, а jQuery позволяет точно проверять готовность элементов:

const EC = protractor.ExpectedConditions;

await browser.wait(async () => {
    return await browser.executeScript("return $('#dynamic-element').length > 0;");
}, 5000, "Элемент не появился на странице");

Такой подход комбинирует преимущества Protractor и jQuery: можно проверять наличие, видимость или любые другие свойства элементов до выполнения действий над ними.

Рекомендации по использованию jQuery в Protractor

  • jQuery следует применять только там, где стандартные методы Protractor (element, by.css, by.id) недостаточны. Использование jQuery увеличивает связность теста с конкретной реализацией DOM.
  • Всегда обрабатывать промисы корректно через await или then(), чтобы избежать гонок или ошибок синхронизации.
  • Для сложных селекторов и динамических элементов рекомендуется комбинировать jQuery с ExpectedConditions для надежного ожидания состояния элементов.
  • Избегать прямого изменения стилей или DOM через jQuery в тестах, если это не часть тестируемой функциональности, чтобы тесты оставались независимыми от реализации.

Пример комплексного сценария

it('должен кликнуть по видимой кнопке и проверить появление сообщения', async () => {
    // Ждем появления кнопки через jQuery
    await browser.wait(async () => {
        return await browser.executeScript("return $('.submit-btn:visible').length > 0;");
    }, 5000, "Кнопка не появилась");

    // Кликаем по кнопке
    await browser.executeScript("$('.submit-btn:visible').click();");

    // Проверяем, что сообщение появилось
    let messageText = await browser.executeScript("return $('#success-message').text();");
    expect(messageText).toContain("Успешно");
});

Этот пример демонстрирует сочетание jQuery-запросов, ожиданий и асинхронной обработки в Protractor для тестирования элементов, которые динамически появляются и изменяются на странице.

Использование jQuery в Protractor позволяет гибко управлять элементами DOM, делать тесты более стабильными при работе с динамическими интерфейсами и упрощает доступ к сложным элементам, которые трудно выбрать стандартными средствами.

Оглавление