Модификация DOM через JavaScript

В Protractor работа с элементами веб-страницы часто требует не только стандартных методов взаимодействия (click, sendKeys, getText), но и прямой модификации DOM через JavaScript. Это особенно важно в случаях, когда элементы скрыты, заблокированы или требуют динамического изменения для корректного тестирования.

Использование `browser.executeScript`

Ключевым инструментом для работы с DOM напрямую является метод browser.executeScript. Он позволяет выполнять произвольный JavaScript-код в контексте текущей страницы. Синтаксис следующий:

browser.executeScript(script, ...args);

script — строка или функция с кодом JS, который будет выполнен в браузере.
...args — аргументы, передаваемые в скрипт, доступные внутри функции.

Пример изменения значения текстового поля:

let inputField = element(by.id('username'));
browser.executeScript("arguments[0].value='testUser';", inputField.getWebElement());

Здесь arguments[0] ссылается на переданный DOM-элемент. Метод getWebElement() используется для получения нативного элемента Selenium.

Динамическое изменение атрибутов

Для тестирования поведения элементов при изменении атрибутов часто требуется модификация атрибутов через JS.

let button = element(by.css('.submit-btn'));
browser.executeScript("arguments[0].setAttribute('disabled', 'true');", button.getWebElement());

Удаление атрибута disabled также возможно:

browser.executeScript("arguments[0].removeAttribute('disabled');", button.getWebElement());

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

Изменение стилей элементов

Для визуального тестирования или обхода ограничений CSS можно модифицировать стили напрямую:

let banner = element(by.id('promo-banner'));
browser.executeScript("arguments[0].style.backgroundColor='red'; arguments[0].style.display='block';", banner.getWebElement());

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

Выполнение сложной логики

executeScript поддерживает выполнение сложных функций, возвращающих значения:

let result = browser.executeScript(function(elem) {
    elem.innerText = 'Updated via JS';
    return elem.innerText.length;
}, element(by.id('info')).getWebElement());

result.then(length => {
    console.log('Длина текста после изменения:', length);
});

Это позволяет не только изменять элементы, но и получать динамическую информацию из DOM для дальнейших проверок.

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

Если требуется модифицировать несколько элементов одновременно, можно передать массив:

let items = element.all(by.css('.list-item'));
items.each(item => {
    browser.executeScript("arguments[0].style.color='blue';", item.getWebElement());
});

Такая техника особенно полезна при массовых тестах списков, таблиц или сеток, где необходимо изменить или проверить состояние нескольких элементов.

Особенности асинхронности

executeScript возвращает Promise, что требует внимательного обращения с асинхронными операциями. Для корректного использования в Protractor рекомендуется использовать async/await:

let input = element(by.id('search'));
await browser.executeScript("arguments[0].value='Protractor';", input.getWebElement());
await input.sendKeys(protractor.Key.ENTER);

Асинхронная обработка гарантирует, что модификации DOM завершатся до выполнения последующих действий.

Применение для обхода ограничений

Прямое выполнение JS часто используется для:

снятия ограничений видимости элементов (display: none, opacity: 0);
снятия блокировок ввода (readonly, disabled);
динамической генерации контента для тестов;
изменения внутреннего состояния компонентов без перезагрузки страницы.