Объект Элемента

Объект Элемента - это объект, представляющий элемент в удаленном пользовательском агенте, например, DOM-узел при выполнении сессии в браузере или мобильный элемент для мобильных устройств. Его можно получить с помощью одной из множества команд запроса элементов, например, $, custom$, react$ или shadow$.

Свойства

Объект элемента имеет следующие свойства:

Имя	Тип	Детали
sessionId	String	Идентификатор сессии, назначенный удаленным сервером.
elementId	String	Связанная ссылка на веб-элемент, которую можно использовать для взаимодействия с элементом на уровне протокола
selector	String	Селектор, используемый для запроса элемента.
parent	Object	Либо Объект Браузера, когда элемент был получен из него (например, const elem = browser.$('selector')), либо Объект Элемента, если он был получен из области элемента (например, elem.$('selector'))
options	Object	Опции WebdriverIO в зависимости от того, как был создан объект браузера. Подробнее в типах настройки.

Методы

Объект элемента предоставляет все методы из раздела протокола, например, протокол WebDriver, а также команды, перечисленные в разделе элементов. Доступные команды протокола зависят от типа сессии. Если вы запускаете автоматизированную сессию браузера, ни одна из команд Appium commands не будет доступна, и наоборот.

Кроме того, доступны следующие команды:

Имя	Параметры	Детали
addCommand	- commandName (Тип: String) - fn (Тип: Function)	Позволяет определять пользовательские команды, которые можно вызывать из объекта браузера для целей композиции. Подробнее в руководстве по Пользовательским Командам.
overwriteCommand	- commandName (Тип: String) - fn (Тип: Function)	Позволяет переопределить любую команду браузера пользовательской функциональностью. Используйте осторожно, так как это может запутать пользователей фреймворка. Подробнее в руководстве по Пользовательским Командам.

Примечания

Цепочка Элементов

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

const header = await $('#header')
const headline = await header.$('#headline')
console.log(await headline.getText()) // выводит "I am a headline"

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

console.log(await $('#header').$('#headline').getText())

Это также работает при получении набора элементов, например:

// получить текст 3-го заголовка внутри 2-го хедера
console.log(await $$('#header')[1].$$('#headline')[2].getText())

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

const elems = await $$('div')
const locations = await Promise.all(
    elems.map((el) => el.getLocation())
)

Вы можете напрямую вызывать методы массива в цепочке элементов, например:

const location = await $$('div').map((el) => el.getLocation())

то же самое, что и:

const divs = await $$('div')
const location = await divs.map((el) => el.getLocation())

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

Примечание: все асинхронные итераторы возвращают обещание, даже если ваш обратный вызов не возвращает его, например:

const divs = await $$('div')
console.log(divs.map((div) => div.selector)) // ❌ возвращает "Promise<string>[]"
console.log(await divs.map((div) => div.selector)) // ✅ возвращает "string[]"

Пользовательские Команды

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