В любой среде тестирования автоматизации поиск элементов является наиболее фундаментальным видом деятельности. Мы должны очень тщательно выбирать веб-элементы, чтобы сценарий автоматизации мог обрабатывать статические и динамические элементы для стабильных результатов тестирования. WebDriverIO имеет много продвинутых стратегий локатора / селектора Selenium по сравнению с другими системами автоматизации тестирования. Традиционно каждый локатор имеет определенный метод By, который идентифицирует локаторы во время выполнения.
WebdriverIO упростил эти методы By, и теперь нам не нужно указывать их явно.
WebdriverIO обладает интеллектом, чтобы определить, какой локатор был передан. К концу этого учебного руководства по WebdriverIO вы узнаете, как WebDriverIO преобразует путь стратегии локатора Selenium и насколько легко ее запомнить и написать.
Вам также может понравиться: Как Selenium 4 Relative Locator может изменить способ тестирования
Примечание. Если вы обращаетесь к официальной документации платформы WebdriverIO , вы заметите, что они называли локаторы селекторами. Вам не нужно запутываться, если вы знакомы с некоторыми другими системами автоматизации тестирования в Selenium. Например, если вы работали с локаторами Selenium в Java, то эти локаторы в WebdriverIO рассматриваются как селекторы.
Для простоты понимания я буду называть их локаторами Selenium в этом руководстве по WebdriverIO. Так как это более стандартизированный и привычный термин для автоматизации тестирования с Selenium .
Что такое локаторы селена в WebDriverIO?
Прежде чем мы начнем этот учебник WebdriverIO для локаторов / селекторов Selenium, давайте быстро разберемся, для чего они используются. Локаторы Selenium используются для поиска элементов на веб-странице через Selenium WebDriver при выполнении сценария автоматизации тестирования. Селектор — это команда в Selenium. Библиотека Selenium читает эту команду из сценария, преобразует ее в HTTP-запрос и, наконец, взаимодействует с веб-браузерами, выполняет действия на основе этой команды.
Стратегии Selenium Locator
Когда вы получите практическое тестирование автоматизации Selenium с помощью WebdriverIO, вы должны знать о правильной стратегии, которая работает для поиска уникальных элементов на веб-странице. Поиск элементов по идентификатору, имени и относительной XPath будет первым выбором для поиска уникального элемента на веб-сайте. Если вы не смогли найти какой-либо из этих способов, рекомендуется выбрать другие типы локаторов / селекторов Selenium.
Если вы выполняли тестирование автоматизации Selenium с Java, вы могли использовать методы findElement () и findElements (), чтобы найти селектор из DOM. Тем не менее, WebdriverIO предлагает уникальный способ тестирования Selenium с WebDriverIO.
С WebdriverIO вам не нужно упоминать стратегию локатора Selenium, поскольку она автоматически поймет, какие типы стратегии локатора следует использовать. Мы рассмотрим каждый Selenium Locator в этом руководстве по WebdriverIO. Прежде чем приступить к практической демонстрации, обязательно запишите следующие методы поиска элементов в WebDriverIO:
$ (): Один знак доллара используется для поиска одного веб-элемента
$$ (): двойной знак доллара используется для поиска нескольких веб-элементов
Помимо этих двух методов, WebDriverIO поддерживает и другие методы:
custom $ (): используется для поиска пользовательской стратегии для одного веб-элемента.
custom $ (): используется для поиска пользовательской стратегии для нескольких веб-элементов.
реагирует $ (): используется для поиска одного компонента React по заданному имени и получает фильтр по реквизиту и состоянию.
реагирует $$ (): используется для поиска нескольких компонентов React по заданному имени и фильтрует по реквизиту и состоянию.
Примечание: команда реагировать на $ $ и реагировать на $$ работает только с приложениями, использующими React v16.x
Как найти веб-элемент в браузере?
Чтобы найти веб-элемент в браузере, пользователь должен перейти к инструментам разработчика браузера, нажав F12 в окнах и опцию + command + i в операционной системе Mac или щелкнув правой кнопкой мыши веб-сайт и выбрав опцию проверки.
Инструменты разработчика браузера
Открыв инструмент разработчика, вы можете увидеть HTML-теги на вкладке «Элементы». Эта вкладка HTML вызывает элементы DOM. Чтобы найти определенные веб-элементы, выберите значок селектора (перед вкладкой «Элементы») и наведите курсор на элемент, который вы хотите найти в DOM.
Список локаторов селена в WebDriverIO
Теперь, когда вы хорошо разбираетесь в локаторах Selenium, давайте рассмотрим различные типы локаторов Selenium в этом руководстве по WebdriverIO. Ниже перечислены поддерживаемые селекторы WebdriverIO.
- CSS Query Selector.
- Текст ссылки.
- Частичная ссылка на текст.
- Элемент с определенным текстом.
- Название тэга.
- Название.
- XPath.
- Я БЫ.
- Функция JS.
- Цепные селекторы.
- Реагировать селекторы
- Пользовательский селектор.
Используя методы $, $$, Custom $, Custom $$, реагировать $ и реагировать $$, пользователь может найти элементы и выполнить нужные операции. Давайте углубимся в каждый из этих локаторов Selenium в этом учебном руководстве по WebdriverIO для тестирования автоматизации Selenium с примерами DOM.
CSS Query Selector
Первый локатор в этом учебнике WebdriverIO для тестирования автоматизации Selenium — это селектор CSS Query, который используется для поиска элемента из DOM.
Как найти CSS-запрос?
Перейдите к инструментам разработчика, найдите элемент и щелкните правой кнопкой мыши на элементе Selected в DOM и скопируйте опцию селектора CSS.
Синтаксис: $(‘CSS Query’);
пример
Джава
xxxxxxxxxx
1
const assert = require("assert");
2
3
describe("Selector Example", function() {
4
it("CSS Query Selector", function() {
5
driver.url("https://lambdatest.github.io/sample-todo-app/");
6
$("body > div.ng-scope > div > div > ul").click();
7
});
8
});
Вывод
Когда вы запустили приведенный выше скрипт, вы можете найти консольный журнал и заметить, что WebdriverIO преобразован в метод findElement с помощью стратегии селектора CSS.
Джава
xxxxxxxxxx
1
[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: COMMAND findElement("css selector", "body > div.ng-scope > div > div > ul")
2
[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: [POST] http://127.0.0.1:4444/session/839505649081eaf3bef60a252593f2f9/element
3
[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: DATA { using: 'css selector',
4
value: 'body > div.ng-scope > div > div > ul' }
Помните, что иногда использование селектора запросов CSS может привести к нахождению нескольких элементов в виде листа CSS, используемого для всего сайта. Теперь давайте перейдем к следующему локатору Selenium в этом руководстве по WebdriverIO.
Текст ссылки
Веб-сайт состоит из различных типов компонентов, таких как текстовое поле, ссылки, раскрывающийся список и т. Д. Даже одна веб-страница может иметь множество ссылок на нее. Выбор конкретной ссылки для вашего скрипта автоматизации Selenium может стать сложной задачей. Именно здесь вступает в игру ссылка Text Selenium Locators для WebdriverIO. Если вы хотите найти какую-либо гиперссылку, используйте эту стратегию выбора текста ссылки.
Синтаксис: $(‘=anchorText’);
Здесь знак = равно используется для поиска элемента привязки с «конкретным текстом».
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
describe("Selector Example", function() {
3
it("Open URL", function() {
4
driver.url("https://www.lambdatest.com/");
5
});
6
it("Link Text Example", function() {
7
$("=Automation").click();
8
});
9
});
Когда вы запустите приведенный выше скрипт тестирования автоматизации, вы сможете найти консольный журнал. Если вы заметите журналы, вы заметите, что WebdriverIO автоматически обнаружил метод findElement со стратегией текста ссылки.
Вывод
JavaScript
xxxxxxxxxx
1
0-0] 2019-12-24T10:58:56.640Z INFO webdriver: COMMAND findElement("link text", "Automation")
2
[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: [POST] http://127.0.0.1:4444/session/0a34df231b0b77c5e0e4d687a14829a2/element
3
[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: DATA { using: 'link text', value: 'Automation' }
Будьте осторожны с элементами, выбираемыми этим Selenium Locator в WebdriverIO, так как это может привести к нескольким якорям с одинаковым текстом ссылки. Теперь, когда мы знаем текст ссылки, давайте теперь перейдем к локатору текста частичной ссылки в этом руководстве по WebdriverIO.
Частичная ссылка
Частичный текст ссылки аналогичен тексту ссылки, но единственное отличие состоит в том, что это помогает, когда начальные несколько символов ссылки фиксированы, а остальные являются динамическими.
Синтаксис: $(‘=anchorMatchedText’);
* = начало, равное знаку, используется для поиска элемента привязки с сопоставленным текстом ‘.
$("=Automa")
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
describe("Selector Example", function() {
3
it("Open URL", function() {
4
driver.url("https://www.lambdatest.com/");
5
});
6
it("Partial Link Text Example", function() {
7
$("*=Automa").click();
8
});
9
});
Когда вы запустите приведенный выше скрипт, вы сможете найти консольный журнал и заметить, что WebdriverIO преобразован в метод findElement с текстовой стратегией частичной ссылки.
Вывод
JavaScript
xxxxxxxxxx
1
0-0] 2019-12-24T11:15:23.860Z INFO webdriver: COMMAND findElement("partial link text", "Automa")
2
[0-0] 2019-12-24T11:15:23.860Z INFO webdriver: [POST] http://127.0.0.1:4444/session/592f966aa9382a63642f944c37068533/element
3
[0-0] 2019-12-24T11:15:23.861Z INFO webdriver: DATA { using: 'partial link text', value: 'Automa' }
Элемент с определенным текстом
В HTML каждый тег известен как элемент, и немногие элементы имеют прямой текст, а несколько элементов обернуты вокруг других тегов. Если вы хотите найти элемент, имеющий определенный или частичный текст, то этот селектор предпочтительнее использовать.
Во время тестирования автоматизации Selenium с использованием Java вы должны использовать XPath с методом normalize-space (), чтобы найти текст вместе с тегом HTML, если вы хотите найти тег HTML с некоторым текстом, но WebdriverIO использует описанный ниже метод.
Синтаксис
HTML
xxxxxxxxxx
1
2
2
$(‘elementTag=certain text’); used for fixed text
3
$(‘elementTag*=partial text’); used for partial text
Этот селектор получает помощь от знака = (равно) и знака * = (начало равно).
Например, чтобы найти Cross Browser Testing Cloud снизу тега H1, с помощью этой команды: $(“h1=Cross Browser Testing Cloud”)
< h1 class="big_title text_shadow_black __web-inspector-hide-shortcut__">
Cross Browser Testing Cloud< /h1>
То же самое будет работать для класса и атрибута ID элементов. Например:
$ (‘# id = определенный текст’); используется для фиксированного текста
$ (‘# id * = определенный текст’); используется для частичного текста
$ (‘. classname = определенный текст’); используется для фиксированного текста
$ (‘. classname * = частичный текст’); используется для частичного текста
Здесь # используется, когда вы хотите найти элементы по ID и. (точка) используется для имени класса.
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
3
describe("Selector Example", function() {
4
it("Open URL", function() {
5
driver.url("https://www.lambdatest.com/");
6
});
7
it("Element with certain text Example", function() {
8
$("h1=Cross Browser Testing Cloud").click();
9
});
10
it("Element with Partial text Example", function() {
11
$("h1*=Cross Browser Testing").click();
12
});
13
});
Когда вы запустите приведенный выше скрипт, вы сможете найти консольный журнал и заметить, что WebdriverIO преобразован в метод findElement с помощью «normalize-space ()» и «contains ()».
Вывод
JavaScript
xxxxxxxxxx
1
[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: COMMAND findElement("xpath", ".//h1[normalize-space() = "Cross Browser Testing Cloud"]")
2
[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element
3
[0-0] 2019-12-24T11:39:33.083Z INFO webdriver: DATA { using: 'xpath',
4
value: './/h1[normalize-space() = "Cross Browser Testing Cloud"]' }
5
[0-0] 2019-12-24T11:39:33.099Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '03328283-f372-423c-8218-48759ac98631' }
6
[0-0] 2019-12-24T11:39:33.104Z INFO webdriver: COMMAND elementClick("03328283-f372-423c-8218-48759ac98631")
7
[0-0] 2019-12-24T11:39:33.105Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element/03328283-f372-423c-8218-48759ac98631/click
8
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: COMMAND findElement("xpath", ".//h1[contains(., "Cross Browser Testing")]")
9
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element
10
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: DATA { using: 'xpath',
11
value: './/h1[contains(., "Cross Browser Testing")]' }
Теперь давайте посмотрим на локатор имен тегов в этом руководстве по WebdriverIO для тестирования автоматизации Selenium.
Название тэга
Мы используем селектор имени тега, чтобы найти элемент, используя любой тег HTML. Это очень редко используемый локатор Selenium. Однако это очень важно, если вы имеете дело с таблицами или элементами календаря. Во время тестирования автоматизации Selenium вы можете передать имя тега как <tag> или <tag />.
Синтаксис
$(‘<tag>’); $(‘<tag />’);
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
describe("Selector Example", function() {
3
it("Open URL", function() {
4
driver.url("https://www.lambdatest.com/");
5
});
6
it("Tag Name Example", function() {
7
$("<h1>").getText();
8
});
9
});
Вот выходные данные, когда вышеуказанный скрипт тестирования автоматизации Selenium выполняется в WebdriverIO.
Вывод
JavaScript
xxxxxxxxxx
1
[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: COMMAND findElement("tag name", "h1")
2
[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: [POST] http://127.0.0.1:4444/session/d67eadf284b85ecd1e641855c194937b/element
3
2019-12-26T10:07:37.804Z INFO webdriver: DATA { using: 'tag name', value: 'h1' }
имя
Этот локатор Selenium похож на локатор ID в Selenium. Иногда веб-разработчик дает имя узлу HTML. Если у узла есть атрибут name, то предпочтительно включить локатор Name в тестирование автоматизации Selenium . Селектор имени должен быть в квадратных скобках с атрибутом имени.
Синтаксис
$(‘[<name attribute>]’)
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
3
describe("Selector Example", function() {
4
it("Open URL", function() {
5
driver.url("https://www.facebook.com/");
6
});
7
it("Name Example", function() {
8
$("[name = 'email']").setValue("123");
9
});
10
11
});
Вывод
JavaScript
xxxxxxxxxx
1
[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: COMMAND findElement("css selector", "[name = 'email']")
2
[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: [POST] http://127.0.0.1:4444/session/aee87e328f63eb11678a49adce17df4b/element
3
[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: DATA { using: 'css selector', value: '[name = \'email\']' }
XPath
Чрезвычайно ключевой локатор Selenium из этого руководства по WebdriverIO. Также в WebDriverIO вы можете написать абсолютный XPath и относительный XPath. Абсолютный XPath начинается с / slash, а относительный начинается с // slash. Это очень сильный и часто используемый селектор / локатор для идентификации элементов с помощью автоматизации тестирования Selenium.
Следующие специальные символы используются при написании XPath.
, — Точка означает, что выбор начинается с текущего узла
* — Звездочка означает выбор любого узла
/ — Одиночная косая черта означает, что начинается с корневого узла и используется для абсолютного XPath
// — Двойная косая черта означает, что для поиска узла используется относительная XPath
[] — используется квадратная скобка для индекса, а также используется для поиска в обход XPath атрибута и его значения
@ — используется для идентификации атрибута HTML в XPath
Синтаксис для абсолютного XPath:
$(‘<starts with /body>’);
Синтаксис для относительного XPath:
$(‘<starts with .//>’);
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
3
describe("Selector Example", function() {
4
it("Open URL", function() {
5
driver.url("https://www.lambdatest.com/");
6
});
7
8
it("Xpath - Absolute Example", function() {
9
$("/html/body/div[2]/section[1]/div/div/h1").getText();
10
});
11
12
it("Xpath - Relative Example", function() {
13
$(".//h1[@class='big_title text_shadow_black']").getText();
14
});
15
});
Когда вы запустите приведенный выше скрипт, вы сможете найти консольный журнал. Обратите внимание, что WebdriverIO преобразован в метод findElement с помощью «XPath».
Вывод
JavaScript
xxxxxxxxxx
1
[0-0] 2019-12-25T17:54:37.674Z INFO webdriver: COMMAND findElement("xpath", "/html/body/div[2]/section[1]/div/div/h1")
2
[0-0] 2019-12-25T17:54:37.675Z INFO webdriver: [POST] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element
3
2019-12-25T17:54:37.675Z INFO webdriver: DATA { using: 'xpath',
4
value: '/html/body/div[2]/section[1]/div/div/h1' }
5
[0-0] 2019-12-25T17:54:37.688Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'bc244c90-ed18-4d94-9b7a-d026ba7d70d4' }
6
[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: COMMAND getElementText("bc244c90-ed18-4d94-9b7a-d026ba7d70d4")
7
[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: [GET] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element/bc244c90-ed18-4d94-9b7a-d026ba7d70d4/text
8
[0-0] 2019-12-25T17:54:37.709Z INFO webdriver: RESULT Cross Browser Testing Cloud
9
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: COMMAND findElement("xpath", ".//h1[@class='big_title text_shadow_black']")
10
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: [POST] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element
11
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: DATA { using: 'xpath',
12
value: './/h1[@class=\'big_title text_shadow_black\']' }
13
Я БЫ
Еще один важный Selenium Locator из этого руководства по WebdriverIO. ID является чрезвычайно мощным селектором для поиска элемента из DOM. Это всегда уникальный элемент в DOM. Еще одна важная вещь заключается в том, что если вы хотите ускорить выполнение вашей автоматизации, то это обязательный локатор для тестирования автоматизации Selenium. Идентификатор напрямую получает запрос из DOM, тогда как XPath сканирует документы на основе относительного или абсолютного пути, что является трудоемким методом.
# знак используется для поиска элементов по идентификатору.
Синтаксис
$(#<idname>);
пример
xxxxxxxxxx
1
const assert = require("assert");
2
3
describe("Selector Example", function() {
4
it("Open URL", function() {
5
driver.url("https://www.facebook.com/");
6
});
7
it("ID Example", function() {
8
$("#email").setValue("123");
9
});
10
});
Теперь здесь вы должны наблюдать этот выходной журнал. Когда вы запустите вышеприведенный скрипт, вы увидите, как селектор идентификатора внутренне преобразуется в селектор CSS и находит элемент.
Вывод
JavaScript
xxxxxxxxxx
1
[0-0] 2019-12-25T18:29:26.359Z INFO webdriver: COMMAND findElement("css selector", "#email")
2
[0-0] 2019-12-25T18:29:26.360Z INFO webdriver: [POST] http://127.0.0.1:4444/session/52e465fa0b2d0dacaf976994dd1edc60/element
3
2019-12-25T18:29:26.360Z INFO webdriver: DATA { using: 'css selector', value: '#email' }
Теперь мы рассмотрели обычные локаторы Selenium в WebdriverIO. Далее мы рассмотрим расширенные локаторы / селекторы Selenium в этом руководстве по WebdriverIO.
Селекторы цепей
Иногда бывает трудно найти элемент, который не имеет идентификатора, имени, строк и ячеек таблицы, в таком случае этот селектор цепей помогает вам получить ваш уникальный элемент. Для этого нет конкретного символа, но вы просто вызываете $ (). $ (), Пока не найдете нужный элемент по знаку точки (.).
Примечание. Селектор / локатор цепочки использует концепцию родитель-потомок. Поэтому элемент Next цепочки должен попадать под селектор родительской цепочки.
Синтаксис
$(selector).$(selector).$(selector)
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
3
describe("Selector Example", function() {
4
5
it("Open URL", function() {
6
driver.url("https://www.facebook.com/");
7
});
8
9
it("Chain - Selector Example", function() {
10
$("#login_form")
11
.$(".//table[@role='presentation']")
12
.$("#email")
13
.setValue("123");
14
});
15
});
Когда скрипт выполняется, каждый элемент начинает находить элементы один за другим, пока не достигнет последнего элемента. Сначала он использует findElement (), а затем вызывает findElementFromElement ().
Вывод
JavaScript
xxxxxxxxxx
1
0-0] 2019-12-26T06:14:22.748Z INFO webdriver: COMMAND findElement("css selector", "#login_form")
2
[0-0] 2019-12-26T06:14:22.748Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element
3
[0-0] 2019-12-26T06:14:22.748Z INFO webdriver: DATA { using: 'css selector', value: '#login_form' }
4
[0-0] 2019-12-26T06:14:22.760Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'f0736c61-735d-4cc8-82e1-1fd1e0f47b39' }
5
[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: COMMAND findElementFromElement("f0736c61-735d-4cc8-82e1-1fd1e0f47b39", "xpath", ".//table[@role='presentation']")
6
[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/f0736c61-735d-4cc8-82e1-1fd1e0f47b39/element
7
[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: DATA { using: 'xpath', value: './/table[@role=\'presentation\']' }
8
[0-0] 2019-12-26T06:14:22.778Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'ab53a7ad-fc8d-4081-810d-745b001fad02' }
9
[0-0] 2019-12-26T06:14:22.779Z INFO webdriver: COMMAND findElementFromElement("ab53a7ad-fc8d-4081-810d-745b001fad02", "css selector", "#email")
10
[0-0] 2019-12-26T06:14:22.780Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/ab53a7ad-fc8d-4081-810d-745b001fad02/element
11
[0-0] 2019-12-26T06:14:22.780Z INFO webdriver: DATA { using: 'css selector', value: '#email' }
12
[0-0] 2019-12-26T06:14:22.789Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '090696e4-585f-442c-a39d-dfe98f4d5d78' }
13
[0-0] 2019-12-26T06:14:22.791Z INFO webdriver: COMMAND elementClear("090696e4-585f-442c-a39d-dfe98f4d5d78")
14
[0-0] 2019-12-26T06:14:22.791Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/090696e4-585f-442c-a39d-dfe98f4d5d78/clear
15
[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: COMMAND elementSendKeys("090696e4-585f-442c-a39d-dfe98f4d5d78", "123")
16
[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/090696e4-585f-442c-a39d-dfe98f4d5d78/value
17
[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: DATA { text: '123' }
Функция JS
WebdriverIO поддерживает JS-селектор / локатор для поиска элементов с использованием JavaScript.
Синтаксис
JavaScript
xxxxxxxxxx
1
$(function() {return <JS script>})
2
$(function() {return <JS script>})
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
3
describe("Selector Example", function() {
4
it("Open URL", function() {
5
driver.url("https://www.lambdatest.com/");
6
});
7
8
it("JS Function Example", function() {
9
const elem = $("//*[@id='navbarSupportedContent']/ul/li[1]");
10
console.log(
11
elem
12
.$(function() {
13
return this.nextSibling.nextSibling;
14
})
15
.getText()
16
);
17
});
18
});
Веб-элементы, хранящиеся в переменной, а затем JS-функции вызывают с помощью if $ (). Он преобразовал внутренне executeScript ().
Вывод
JavaScript
xxxxxxxxxx
1
[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2
[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: [POST] http://127.0.0.1:4444/session/7ad49103a958fbdf72f36aa974c04f39/execute/sync
3
[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: DATA { script: 'return (function (elem) {\n return (function () {\n\t\t\t\t\treturn this.nextSibling.nextSibling;\n\t\t\t\t}).call(elem);\n }).apply(null, arguments)',
4
args:
5
[ { 'element-6066-11e4-a52e-4f735466cecf': 'b6cb6661-b048-418f-b1f8-58ed3f9836fe',
6
ELEMENT: 'b6cb6661-b048-418f-b1f8-58ed3f9836fe' } ] }
React Selector
React - это еще один продвинутый локатор в WebdriverIO, который был создан для создания пользовательских компонентов реакции для мобильных приложений. В WebDriverIO предусмотрена функция, позволяющая напрямую находить элемент с помощью методаact $ ().
Метод реагирования $$ () помогает найти массив элементов WebDriverIO.
Синтаксис
react$(‘ReactComponent’);Давайте разберемся в приведенном ниже примере React Native:
JavaScript
xxxxxxxxxx
1
import React from 'react'
2
import ReactDOM from 'react-dom'
3
4
function RootComponent() {
5
return (
6
<div>
7
RootComponent
8
</div>
9
)
10
}
11
function App() {
12
return (<RootComponent />)
13
}
14
ReactDOM.render(<App />, document.querySelector('#root'))
В приведенном выше примере « RootComponent » является компонентом реакции, и когда он визуализируется в элементе HTML с id = «root».
Этот RootComponent можно найти по реагированию $ (), и ниже приведен пример:
HTML
xxxxxxxxxx
1
const rootComponent = browser.react$(‘RootComponent’);
Пользовательский Селектор
Один из самых удобных локаторов / селекторов Selenium в WebdriverIO, который пригодится при сложных сценариях для тестирования автоматизации Selenium. Пользовательский селектор позволяет вам использовать настраиваемую стратегию, объявленную с помощью browser.addLocatorStrategy.
Пользовательский метод $$ () помогает найти массив элементов WebDriverIO.
Синтаксис
browser.custom$(strategyName, strategyArguments)
browser.custom$(strategyName, strategyArguments)
пример
JavaScript
xxxxxxxxxx
1
const assert = require("assert");
2
describe("Selector Example", function() {
3
4
it("Open URL", function() {
5
driver.url("https://www.facebook.com/");
6
});
7
8
it("Custom Selector Example - ", () => {
9
browser.addLocatorStrategy("emailById", selector => {
10
return document.querySelectorAll(selector);
11
});
12
const emailID = browser.custom$("emailById", "#email");
13
emailID.setValue("abc@test.com");
14
});
15
});
С помощью addLocatorStrategy () мы создали собственный селектор emailById для поля идентификатора электронной почты, и мы можем использовать селектор emailById с помощью специального метода $ (). Внутренне WebDriverIO преобразует пользовательский $ () в executeScript () и находит элемент.
Примечание. В этом уроке по WebdriverIO мы обсудили одиночный $ (), который помогает работать с одним элементом. Все эти селекторы могут использоваться с $$ () для массива WebDriverIO.
Заключение
WebDriverIO - одна из лучших платформ для тестирования JavaScript, и если вы посмотрите на разнообразие предлагаемых вами элементов на веб-странице, вы обязательно отметите это для ваших будущих проектов. У него очень уникальный выбор селекторов, в том числе реагирует $ и пользовательские $ селекторы.
WebDriverIO имеет единственный способ найти элемент, но имеет разные знаки для селектора, например *, * =,. (Точка) и # разные. Я уверен, что это руководство по WebdriverIO поможет вам перейти к следующему шагу.
Дальнейшее чтение
Обзор тестирования JavaScript в 2019 году
Как использовать локатор имен в скрипте автоматизации Selenium