by.tagName()

Метод by.tagName() является одним из локаторов, предоставляемых библиотекой Protractor для идентификации элементов на веб-странице по имени HTML-тега. Это один из наиболее базовых способов поиска элементов, который позволяет работать с элементами на уровне структуры DOM без привязки к классам, идентификаторам или атрибутам.

Синтаксис

element(by.tagName('tag_name'))
  • tag_name — строка, содержащая имя HTML-тега, например: 'input', 'button', 'div', 'span'.
  • Метод возвращает объект ElementFinder, который предоставляет доступ к взаимодействию с найденным элементом.

Для поиска нескольких элементов используется:

element.all(by.tagName('tag_name'))
  • Возвращает ElementArrayFinder, массив объектов ElementFinder.
  • Позволяет выполнять операции над всеми найденными элементами одновременно, например, count(), get(index), each().

Примеры применения

Пример 1: Поиск одиночного элемента

let loginButton = element(by.tagName('button'));
loginButton.click();

В этом случае будет найден первый элемент <button> на странице, и выполнено действие click().

Пример 2: Поиск всех элементов определённого тега

let inputs = element.all(by.tagName('input'));
console.log(inputs.count());
inputs.each(function(input) {
    input.sendKeys('Test');
});
  • count() возвращает количество найденных элементов.
  • each() позволяет применить функцию к каждому найденному элементу.

Пример 3: Комбинация с другими локаторами

Метод by.tagName() часто используют в сочетании с методами фильтрации:

let buttons = element.all(by.tagName('button')).filter(function(button) {
    return button.getText().then(function(text) {
        return text === 'Submit';
    });
});
buttons.first().click();
  • Используется filter(), чтобы выбрать элементы по тексту.
  • first() возвращает первый элемент из отфильтрованного списка.

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

  • by.tagName() ищет только элементы по имени тега, не учитывая классы, идентификаторы или другие атрибуты.
  • Метод эффективен для простых страниц, где структура DOM небольшая и теги уникальны.
  • Для сложных страниц рекомендуется использовать сочетания локаторов, например: by.css('div input') или element(by.tagName('form')).element(by.tagName('input')).
  • Поиск через element.all(by.tagName()) может быть полезен для подсчета элементов или массовых действий, но нужно учитывать производительность на страницах с большим количеством однотипных тегов.

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

Локатор Особенности
by.id() Поиск по уникальному идентификатору; самый быстрый способ
by.className() Поиск по имени класса; работает для множества элементов
by.css() Гибкий, позволяет комбинировать селекторы и псевдоклассы
by.tagName() Простой поиск по тегу; удобно для базовой структуры DOM
by.xpath() Позволяет сложные выражения; медленнее, сложнее поддерживать

Практические сценарии

  1. Автоматизация форм Поиск всех полей ввода <input> для заполнения формы:

    let inputs = element.all(by.tagName('input'));
inputs.get(0).sendKeys('username');
inputs.get(1).sendKeys('password');

  2. Навигация по спискам Получение всех элементов <li> для проверки содержимого списка:

    let items = element.all(by.tagName('li'));
items.each(function(item) {
    item.getText().then(function(text) {
        console.log(text);
    });
});

  3. Работа с таблицами Извлечение всех ячеек <td> таблицы:

    let cells = element.all(by.tagName('td'));
cells.each(function(cell) {
    cell.getText().then(function(text) {
        console.log(text);
    });
});

Взаимодействие с вложенными элементами

Метод by.tagName() можно использовать для поиска внутри другого элемента:

let form = element(by.tagName('form'));
let usernameInput = form.element(by.tagName('input'));
usernameInput.sendKeys('testuser');
  • Позволяет ограничить область поиска конкретным родительским элементом, что уменьшает вероятность выбора неправильного элемента.

Поддержка асинхронности

Все методы возвращают объекты ElementFinder или ElementArrayFinder, которые работают с Promise. Для получения значения необходимо использовать then() или синтаксис async/await:

let buttons = await element.all(by.tagName('button'));
let count = await buttons.count();
console.log(count);

Использование async/await делает код более читаемым и упрощает обработку результатов поиска элементов.

Итоговые рекомендации по by.tagName()

  • Применять для базовых структур и уникальных тегов.
  • Для динамических или сложных страниц сочетать с element.all() и фильтрацией.
  • Комбинировать с другими локаторами, чтобы повысить точность поиска.
  • Всегда учитывать асинхронный характер методов Protractor при взаимодействии с элементами.

Метод by.tagName() обеспечивает прямой доступ к элементам DOM на уровне тегов и является удобным инструментом для простых и повторяющихся задач в тестировании интерфейсов.

Оглавление