Об'єкт Element

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

Властивості

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

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

Методи

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

Крім того, доступні наступні команди:

Назва	Параметри	Деталі
addCommand	- commandName (Тип: String) - fn (Тип: Function)	Дозволяє визначати користувацькі команди, які можна викликати з об'єкта браузера для композиції. Дізнайтеся більше в посібнику Custom Command.
overwriteCommand	- commandName (Тип: String) - fn (Тип: Function)	Дозволяє перевизначити будь-яку команду браузера власною функціональністю. Використовуйте обережно, оскільки це може заплутати користувачів фреймворку. Дізнайтеся більше в посібнику Custom Command.

Примітки

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

При роботі з елементами 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[]"

Користувацькі команди

Ви можете встановити користувацькі команди в області браузера, щоб абстрагувати робочі процеси, які часто використовуються. Дізнайтеся більше в нашому посібнику Custom Commands.