by.name()

by.name() — это один из локаторов Protractor, который используется для поиска элементов на веб-странице по атрибуту name. Он является частью встроенного объекта by, предоставляемого Protractor, и позволяет взаимодействовать с элементами формы, кнопками и другими элементами, имеющими уникальный или известный name.

Синтаксис

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

Пример использования

HTML-структура:

<input type="text" name="username" />
<input type="password" name="password" />
<button name="loginBtn">Войти</button>

Пример теста:

it('ввод данных и клик по кнопке входа', async () => {
    const usernameInput = element(by.name('username'));
    const passwordInput = element(by.name('password'));
    const loginButton = element(by.name('loginBtn'));

    await usernameInput.sendKeys('testuser');
    await passwordInput.sendKeys('password123');
    await loginButton.click();
});

В этом примере:

  • element(by.name('username')) находит поле ввода с атрибутом name="username".
  • Методы sendKeys() и click() выполняют взаимодействие с элементами.

Особенности использования

  1. Уникальность имени Локатор by.name() эффективен, когда атрибут name уникален на странице. Если несколько элементов имеют одинаковый name, element(by.name('name')) вернёт первый найденный элемент. Для работы с несколькими элементами используется element.all(by.name('name')), возвращающий коллекцию ElementArrayFinder.

  2. Поддержка форм Атрибут name чаще всего встречается в элементах формы (input, select, textarea, button). Это делает by.name() удобным для тестирования регистрации, авторизации, поиска и других форм.

  3. Сочетание с ожиданиями Часто by.name() используется вместе с ExpectedConditions для ожидания появления элемента перед взаимодействием:

const EC = protractor.ExpectedConditions;
const usernameInput = element(by.name('username'));

await browser.wait(EC.visibilityOf(usernameInput), 5000);
await usernameInput.sendKeys('testuser');

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

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

Если несколько элементов имеют одинаковый атрибут name, можно получить их все:

const inputs = element.all(by.name('inputField'));
const count = await inputs.count();
console.log('Количество элементов:', count);

await inputs.get(0).sendKeys('Первое значение');
await inputs.get(1).sendKeys('Второе значение');
  • element.all(by.name('inputField')) создаёт коллекцию элементов.
  • Методы count() и get(index) позволяют работать с элементами по индексу.

Сравнение с другими локаторами

  • by.id() — ищет элемент по уникальному id. Обычно быстрее и надёжнее, если id присутствует.
  • by.css() — позволяет использовать селекторы CSS, включая имя элемента ([name='username']) и другие атрибуты.
  • by.model() — специфично для AngularJS и связывает элементы с моделью Angular.

by.name() полезен, когда атрибут name уже присутствует и уникален для целевого элемента, особенно в формах.

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

  • Всегда проверять, что значение name уникально на странице для точного нахождения элемента.
  • Для элементов, которые динамически создаются или появляются с задержкой, использовать ожидания через ExpectedConditions.
  • Для работы с коллекциями элементов, использовать element.all() вместо element().
  • При комбинировании с by.css() можно создавать более сложные селекторы, если один атрибут name встречается в нескольких местах на странице:
element(by.css('form#loginForm [name="username"]'));

Частые ошибки

  1. Несоответствие атрибута Если атрибут name указан неверно или динамически меняется, поиск элемента завершится ошибкой.

  2. Несколько совпадений при использовании element() Возвращается только первый элемент, остальные игнорируются. Для работы со всеми элементами следует использовать element.all().

  3. Игнорирование ожиданий Попытка взаимодействовать с элементом до его отображения вызывает ошибки ElementNotVisibleError. Необходимо использовать ожидания или browser.wait().

Заключение по by.name()

Локатор by.name() обеспечивает удобный способ взаимодействия с элементами по их атрибуту name, особенно в формах. Он прост в использовании, интегрируется с другими методами Protractor и позволяет гибко работать с одиночными и множественными элементами. При правильном применении этот локатор становится мощным инструментом для написания стабильных и читаемых тестов.

Оглавление