by.id()

Метод by.id() является одним из основных локаторов в Protractor и служит для поиска элементов по атрибуту id в DOM-дереве страницы. Атрибут id уникален на странице, что делает этот локатор быстрым и надёжным для идентификации элементов.

Синтаксис и базовое использование

element(by.id('elementId'));
  • element — глобальная функция Protractor для получения элемента.
  • by.id('elementId') — локатор, который ищет элемент с указанным id. Возвращаемый объект — экземпляр ElementFinder, через который можно взаимодействовать с элементом.

Пример клика по кнопке с id="submitBtn":

element(by.id('submitBtn')).click();

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

Метод getText() позволяет извлечь текстовое содержимое найденного элемента:

let buttonText = element(by.id('submitBtn')).getText();
buttonText.then(function(text) {
    console.log(text);
});

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

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

Пример ожидания появления элемента перед кликом:

let EC = protractor.ExpectedConditions;
let submitButton = element(by.id('submitBtn'));

browser.wait(EC.visibilityOf(submitButton), 5000);
submitButton.click();
  • EC.visibilityOf() проверяет, что элемент видим на странице.
  • Второй аргумент функции browser.wait — таймаут в миллисекундах.

Взаимодействие с формами

При работе с формами by.id() позволяет легко находить поля ввода и другие элементы формы:

let usernameInput = element(by.id('username'));
usernameInput.sendKeys('testUser');

let passwordInput = element(by.id('password'));
passwordInput.sendKeys('securePassword');

element(by.id('loginBtn')).click();

Метод sendKeys() отправляет текст в поле ввода, а click() имитирует нажатие на кнопку.

Особенности и рекомендации

  • Уникальность: id должен быть уникальным на странице. Если это не так, by.id() вернёт первый найденный элемент.
  • Скорость: поиск по id выполняется быстрее, чем по CSS или XPath, так как браузер использует внутренний метод getElementById.
  • Комбинации: для более сложных сценариев можно комбинировать локаторы:
element(by.css('#formContainer')).element(by.id('username'));

В этом примере сначала ищется контейнер с id=formContainer, а затем внутри него — поле с id=username.

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

Для проверки присутствия элемента на странице используется метод isPresent():

let isLoginButtonPresent = element(by.id('loginBtn')).isPresent();
isLoginButtonPresent.then(function(result) {
    console.log(result); // true или false
});

Метод возвращает промис, который разрешается в true, если элемент найден, и false, если отсутствует.

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

Хотя by.id() чаще применяется для одиночных элементов, его можно использовать внутри коллекций element.all:

let inputs = element.all(by.css('input'));
let passwordField = inputs.filter(function(elem) {
    return elem.getAttribute('id').then(id => id === 'password');
}).first();
passwordField.sendKeys('securePassword');

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

Асинхронная обработка

Protractor работает с промисами, поэтому методы getText(), isPresent(), getAttribute() требуют асинхронной обработки:

async function printButtonText() {
    let text = await element(by.id('submitBtn')).getText();
    console.log(text);
}

printButtonText();

Использование async/await делает код более читаемым и избавляет от вложенных .then().

Отладка и логирование

Для отладки удобно проверять атрибуты элементов:

element(by.id('submitBtn')).getAttribute('class').then(function(classes) {
    console.log('Классы кнопки:', classes);
});

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

Хотя by.id() выглядит просто, его правильное применение ускоряет тестирование, снижает вероятность ошибок и упрощает поддержку тестов. Он особенно эффективен при работе с формами, кнопками и уникальными элементами интерфейса.

Оглавление