Рубрики
Без рубрики

BDD Web Automation 10: Используйте Chrome devtools, чтобы найти элементы часть 2

В этой статье мы обсудим, как 1. Найти элемент CSS 2. Найти элемент by linktext 3. Найти элемент partialLinktext 4. Найти элемент по тачкам

Автор оригинала: CukeTest.

Это 10-й пост в серии, Тест на автоматизацию BDD для веб-пользовательского интерфейса Отказ В основном он говорит о том, как написать сценарий тестирования веб-автоматизации с помощью CuCumber.js, BDD-тестовой структуры. Вы будете использовать Node.js в качестве языка программирования.

Содержание

  • Найти элемент by CSS.
  • Найти элемент by linktext.
  • Найти элемент by PartialLinkText.
  • Найти элемент by название тэга

Найти элемент CSS

Мы знаем CSS (каскадные листы стилей) используется для определения стилей для элементов HTML. Также в веб-разработке jQuery очень популярен, и он использует селектор CSS для поиска элементов. В веб-автоматизации мы также можем использовать селектор CSS для определения поиска веб-элементов. Для учебников на селектора CSS вы можете обратиться к Ссылка селектора CSS Отказ Вот способ быстро получить селектор CSS для элемента:

Откройте инструменты разработчика Chrome и перейдите к коробку ввода Bing. Щелкните правой кнопкой мыши на элементе – Copy – Selector Copy Selector, как показано ниже:

1.png.

Код:

require('chromedriver');
const { Builder } = require('selenium-webdriver');
let driver = new Builder().forBrowser('chrome').build();
driver.get('http://www.bing.com');

// use css path to select element 
driver.findElement({css:'#sb_form_q'}).sendKeys('CukeTest')

Найти элемент by linktext

Selenium-Webdriver может найти элемент, соответствующую тексту гиперссылки. Например, страница поиска Google имеет ссылку на Gmail. Мы можем найти этот веб-элемент по текстовому значению по ссылке.

Предположим, мы хотим нажать на «Gmail», чтобы перейти на страницу почты Google. Код:

require('chromedriver');
const { Builder } = require('selenium-webdriver');
let driver = new Builder().forBrowser('chrome').build();
driver.get('http://www.google.com');

// use linkText to locate element
driver.findElement({linkText:'Gmail'}).click();

Найти элемент partialLinkText

С linktext Мы можем найти элементы гиперссылки, PartialLinkText делает то же самое, но использует частичное совпадение. Мы используем тот же пример, что и выше, нажав на ссылку «Gmail» на странице поиска Google. Когда находятся linktext Вы должны точно соответствовать тексту ссылки (и должны быть чувствительными к регистру). При использовании PartialLinkText Метод, вам нужно только сделать частичное совпадение, если текст, который вы ищете, представляет собой подстроку текста ссылки, элемент будет считаться совпадением. Обратите внимание, что он все равно должен быть чувствительным к регистру матче. Уведомление ниже Я использую «почту», чтобы поиск поиска и его частичных совпадений «Gmail»:

require('chromedriver');
const { Builder } = require('selenium-webdriver');
let driver = new Builder().forBrowser('chrome').build();
driver.get('http://www.google.com');

// Use partialLinkText to locate
driver.findElement({partialLinkText :'mail'}).click();

Найти элемент по тачкам

Поскольку имя Tagname – это имя тега каждого элемента в HTML, например Вход , А , Кнопка , IMG и т.п.

//... the same as above sample ...

driver.findElement({tagName :'input'}).click();

Это вряд ли используется в автоматизации, поскольку на веб-странице может появиться несколько элементов с одинаковым типом тегов. Документ API селен-Webdriver Не рекомендуется использовать этот метод для определения местоположения элементов.

Резюме

Вышеуказанные четыре метода для определения местоположения элементов в селен-Webdriver, включая CSS , linktext , PartialLinkText , Tagname Отказ Среди них CSS используется более чем другие 3. Эти 4 менее часто используются сравнить другие 4 метода, которые мы обсуждали в Предыдущая статья :

Также см.: Предыдущий пост : 09. Используйте Chrome devtools, чтобы найти элементы Следующий пост : 11. Найти элементы с лежащими достопримечательностями Первый пост : 01. Создать и запустить первый образец