Об'єкт Element

Element Object - це об'єкт, що представляє собою видимий чи невидимий елемент у вашому додатку, наприклад це може бути DOM Node під час запуску сесії в браузері або мобільний елемент для мобільних пристроїв. Він може бути отриманий за допомогою однієї з багатьох команд для пошуку елементів, наприклад, $, custom$, react$ або shadow$.

Властивості

Об'єкт елементу має наступні властивості:

Ім'я	Тип	Опис
sessionId	String	Id сесії, в якій було знайдено цей елемент. Призначається сервером.
elementId	String	Посилання на елемент, яке можна використовувати для взаємодії з елементом на рівні протоколу
selector	String	Селектор який був використаний для запиту елемента.
parent	Object	Об'єкт браузера, коли елемент був отриманий з нього (наприклад, const elem = browser.('selector')) або Об'єкт елементу якщо його було отримано пошуком від іншого елементу (наприклад, elem.$('selector'))
options	Object	WebdriverIO параметри залежно від того, як було створено об’єкт браузера. Дізнатися більше можна переглянувши параметри.

Методи

Об’єкт елементу надає всі методи з розділу протоколу, наприклад, протокол WebDriver, а також команди, перелічені в розділі Api елементу. Доступні команди протоколу залежать від типу сесії. Наприклад, якщо ви запускаєте браузерну сесію, жодна з команд Appium не буде доступною, і навпаки.

Також доступні такі команди:

Ім'я	Параметри	Опис
addCommand	- commandName (Type: String) - fn (Type: Function)	Дозволяє додати власні команди, які можна викликати в об’єкта браузера для кращої композиції. Докладніше читайте в розділі Власні команди.
overwriteCommand	- commandName (Type: String) - fn (Type: Function)	Дозволяє перезаписувати будь-яку команду браузера власною логікою. Будьте обережні! Це може збити з пантелику того хто буде використовувати код. Докладніше читайте в розділі Власні команди.

Примітки

Ланцюги елементів

Під час роботи з елементами WebdriverIO надає спеціальний синтаксис для спрощення пошуку у складному дереві елементів. Об’єкти елементів дозволяють шукати вкладені елементи за допомогою звичайних методів пошуку, наприклад:

const header = await $('#header')
const headline = await header.$('#headline')
console.log(await headline.getText()) // outputs "I am a headline"

З великими деревами елементів, зберігання кожного проміжного елементу до змінної для його подальшого використання може бути занадто розлого. Тому WebdriverIO має концепцію ланцюгів елементів, яка дозволяє отримувати вкладені елементи простіше:

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

Це також можна використовувати для отримання масиву елементів, наприклад:

// get the text of the 3rd headline within the 2nd header
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())

WebdriverIO uses a custom implementation that supports asynchronous iteratiors under the hood so all commands from their API are also supported for these use cases.

Власні команди

Ви можете додати власні команди до об'єкта браузера, щоб абстрагувати дії які часто використовуються. Ознайомтеся з нашим розділом про Власні Команди, щоб дізнатися більше.