ИЗУЧИТЕ РУКОВОДСТВО ПО СЕЛЕКТОРУ CSS В SELENIUM WEBDRIVER [БЕЗ ИСПОЛЬЗОВАНИЯ КАКИХ-ЛИБО ИНСТРУМЕНТОВ]

Селектор CSS Selenium WebDriver Tutorial

В предыдущем посте мы видели «локаторы в Selenium». В этом посте мы видим селектор CSS Selenium — как найти элемент с помощью селектора CSS в Selenium. Ниже приведены ссылки на раздел Как найти элементы на веб-странице с помощью различных типов локаторов.

Содержание

1. “Как найти элемент по локатору идентификатора”
2. «Как найти элемент по локатору имени»
3. «Как найти элемент по локатору имени класса»
4. “Как найти элемент по локатору имени тега”
5. “Как найти элемент по тексту ссылки/локатору частичного текста ссылки”
6. «Как найти элемент с помощью локатора XPath»

Переходя к фактическому сообщению..

Локатор селекторов CSS:

Ведутся дебаты о производительности локатора CSS и XPath, и дебаты о производительности локатора CSS и XPath выходят за рамки этого поста. Большинство тестировщиков автоматизации считают, что использование селекторов CSS ускоряет выполнение скрипта по сравнению с локатором XPath. Локатор CSS Selector — это всегда лучший способ найти элементы на странице. CSS всегда одинаков, независимо от браузеров. В этом посте я покажу вам, как находить локаторы элементов с помощью CSS без использования таких инструментов, как Firebug или Firepath.

ИЗУЧИТЕ РУКОВОДСТВО ПО SELENIUM WEBDRIVER ПО СЕЛЕКТОРУ CSS [БЕЗ ИСПОЛЬЗОВАНИЯ КАКИХ-ЛИБО ИНСТРУМЕНТОВ]

img:< /strong> Учебное пособие по селектору CSS Selenium WebDriver

Ниже приведены некоторые из наиболее часто используемых форматов селекторов CSS.

Тег и идентификатор
Тег и класс
Тег и атрибут
Тег, класс и атрибут
Соответствие подстроки< ul>
Начинается с (^)
Заканчивается на ($)
Содержит (*)

Дочерние элементы

Direct Child
Sub-child
nth-child

Обратитесь к W3C CSS-Selectors для получения списка общедоступных CSS-селекторов

Tag и ID:

Селектор CSS ID.

Синтаксис: css = тег # id
< tbody>

1
css=tag#id

Откройте Mozilla Firefox и перейдите к Gmail .

Откройте Firebug и проверьте Введите адрес электронной почты в поле ввода. Запишите его тег и идентификатор. Для этого следуйте приведенному ниже снимку экрана.

Скопируйте указанный ниже скрипт и запустите его в своей системе.

<div> <label class=”hidden-label” for=”Электронная почта”> Введите свой адрес электронной почты</label> <input id=”Электронная почта” type=”электронная почта” autofocus=”” placeholder=”Введите адрес электронной почты” name=”Электронная почта” Проверка орфографии=”false” value=””> <input id=”Пароль-скрытый” класс=”скрытый” тип=”пароль” проверка орфографии=”ложь”> </div>

1234
<div><label class=”hidden-label” for=”Email”> Введите свой адрес электронной почты</label><input id=”Email” type=”email” autofocus=”” placeholder=”Enter your email” name=” Электронная почта” Spellcheck=”false” value=””> <input id=”Passwd-hidden” class=”hidden” type=”password” Spellcheck=”false”></div>

Значение, которое необходимо добавить в метод By.cssSelector: css = input # электронная почта
< tbody>

1
css=input#Email

Сценарий:пакет seleniumTutorial; импортировать org.openqa.selenium.By; импортировать org.openqa.selenium.WebDriver; импортировать org.openqa.selenium.firefox.FirefoxDriver; Локаторы открытого класса { public static void main (String [] args) { Драйвер WebDriver = new FirefoxDriver(); driver.get("https://www.gmail.com"); //Здесь Tag = input и Id = Email driver.findElement(By.cssSelector("input#Email")).sendKeys("Материалы по тестированию программного обеспечения"); } }

123456789101112
package seleniumTutorial;импорт org.openqa.selenium.By;импорт org.openqa.selenium.WebDriver;импорт org.openqa.selenium.firefox.FirefoxDriver;public class Locators {       public static void main ( String [] args){       Драйвер WebDriver = new FirefoxDriver(); driver.get(“https://www.gmail.com”); //Здесь Tag = input and Id = Email       driver.findElement(By.cssSelector(“input#Email”)).sendKeys(“Материалы для тестирования программного обеспечения”); }}

Тег и класс:

Если несколько элементов имеют один и тот же HTML-тег и класс, будет распознан первый из них.

Синтаксис:css=tag.class

1
css=tag.class

Откройте Mozilla Firefox и перейдите к приложению Facebook .

Откройте Firebug и проверьте поле ввода Электронная почта. Обратите внимание на его тег и класс. Для этого следуйте приведенному ниже снимку экрана.

Скопируйте указанный ниже скрипт и запустите его в своей системе.

<td> <input id=”email” class=”inputtext” type=”email” tabindex=”1″ value=”” name=”email”> </td>

123
<td><input id=”email” class=”inputtext” type=”email” tabindex=”1″ value=”” name=”email”></td>

Значение для добавить в метод By.cssSelector:css=input.inputtext

1
css=input.inputtext

Скрипт:пакет seleniumTutorial; импортировать org.openqa.selenium.By; импортировать org.openqa.selenium.WebDriver; импортировать org.openqa.selenium.firefox.FirefoxDriver; Локаторы открытого класса { public static void main (String [] args) { Драйвер WebDriver = new FirefoxDriver(); driver.get("https://www.facebook.com/"); //Здесь Tag = input и Class = email driver.findElement(By.cssSelector("input.inputtext")).sendKeys("Материалы по тестированию программного обеспечения"); } }

123456789101112
package seleniumTutorial;импорт org.openqa.selenium.By;импорт org.openqa.selenium.WebDriver;импорт org.openqa.selenium.firefox.FirefoxDriver;public class Locators {       public static void main (String [] args){       Драйвер WebDriver = новый FirefoxDriver(); driver.get(“https://www.facebook.com/”); //Здесь Tag = input и Class = email       driver.findElement(By.cssSelector(“input.inputtext”)).sendKeys(“Материалы для тестирования программного обеспечения”); }}

Тег и атрибут:

Если несколько элементов имеют один и тот же HTML-тег и атрибут, будет распознан первый из них. Он действует так же, как и поиск элементов с помощью селекторов CSS с тем же тегом и классом.

Синтаксис:css=tag[attribute=value]

1
css=tag[attribute=value]

Откройте Mozilla Firefox и перейдите к Gmail .

Откройте Firebug и проверьте поле ввода Введите адрес электронной почты. Запишите его тег и атрибут. Для этого следуйте приведенному ниже снимку экрана.

Скопируйте указанный ниже скрипт и запустите его в своей системе.

<div> <label class=”hidden-label” for=”Электронная почта”> Введите свой адрес электронной почты</label> <input id=”Электронная почта” type=”email” autofocus=”” placeholder=”Введите адрес электронной почты” name=”Электронная почта” Spellcheck=”false” value=””> <input id=”Passwd-hidden“ class=”hidden” type=”password” Проверка орфографии=”false”> </div>

1234
<div><label class=”hidden-label” for=”Email”> Введите свой адрес электронной почты</label><input id=”Электронная почта” type=”email” autofocus=”” placeholder=”Введите адрес электронной почты” name=”Email” Spellcheck=”false” value=””> <input id =”Passwd-hidden” class=”hidden” type=”password” Spellcheck=”false”></div>

Значение, которое будет добавлено в By.cssSelector< /em> метод: css = ввод [имя = электронная почта]

1
css=input[name=Email]

Скрипт:пакет seleniumTutorial; импортировать org.openqa.selenium.By; импортировать org.openqa.selenium.WebDriver; импортировать org.openqa.selenium.firefox.FirefoxDriver; Локаторы открытого класса { public static void main (String [] args) { Драйвер WebDriver = new FirefoxDriver(); driver.get("https://www.gmail.com"); //Здесь Tag = input и Id = Email driver.findElement(By.cssSelector("input[name=Email]")).sendKeys("Материалы по тестированию программного обеспечения"); } }

123456789101112
package seleniumTutorial;импорт org.openqa.selenium.By;импорт org.openqa.selenium.WebDriver;импорт org.openqa.selenium.firefox.FirefoxDriver;public class Locators {      public static void main (String [] args){      WebDriver driver = новый FirefoxDriver(); driver.get(“https://www.gmail.com”); //Здесь Tag = input and Id = Email      driver.findElement(By.cssSelector(“input[name=Email]”)).sendKeys(“Материалы по тестированию ПО”); }}

Тег, класс и атрибут:

Синтаксис:css=tag.class[attribute=value]

1
css=tag.class[attribute=value]

Откройте Mozilla Firefox и перейдите к приложению Facebook .

Откройте Firebug и проверьте поле ввода Электронная почта. Запишите его тег, класс и атрибут. Для этого следуйте приведенному ниже снимку экрана.

Скопируйте указанный ниже скрипт и запустите его в своей системе.

<td> <input id="электронная почта" класс="входной текст" type="электронная почта" tabindex="1" значение="" имя="электронная почта"> </td>

123
<td><input id=”email” class=”inputtext” type=” email” tabindex=”1″ value=”” name=”email”></td>

Значение, добавляемое в метод By.cssSelector: css=input.inputtext[name=email]

1
css=input.inputtext[name=email]

Скрипт:

пакет seleniumTutorial; импортировать org.openqa.selenium.By; импортировать org.openqa.selenium.WebDriver; импортировать org.openqa.selenium.firefox.FirefoxDriver; Локаторы открытого класса { public static void main (String [] args) { Драйвер WebDriver = new FirefoxDriver(); driver.get("https://www.facebook.com/"); //Здесь Tag = input и Class = email driver.findElement(By.cssSelector("input.inputtext[name=email]")).sendKeys("Материалы по тестированию программного обеспечения") ; } }

123456789101112
package seleniumTutorial;импорт org.openqa.selenium.By;импорт org.openqa.selenium.WebDriver;импорт org.openqa.selenium.firefox.FirefoxDriver;public class Locators {      public static void main (String [] args){      WebDriver driver = новый FirefoxDriver(); driver.get(“https://www.facebook.com/”); //Здесь Tag = input и Class = email      driver.findElement(By.cssSelector(“input.inputtext[name=email]”)).sendKeys(“Материалы по тестированию ПО”); }}

СОВПАДЕНИЯ ПОДСТРОЕК:

CSS в Selenium имеет интересную функцию, позволяющую частично совпадать с строками, используя ^, $ и >*.

Посмотрите на упомянутый ниже HTML<input="Employee_ID_001&# 34;>

1
<input=”Employee_ID_001″>

Начинается с (^):

Чтобы выбрать элемент, мы должны использовать ^, что означает “начинается с“

Синтаксис:css=<HTML-тег><[атрибут^=префикс строки]>

1
css=<HTML-тег><[attribute^=префикс строки]>

Значение, которое будет добавлено в Метод By.cssSelector:

css=input[id^='Em']

1
css=input[id^='Em']

Добавьте приведенный ниже шаг в скрипт, чтобы найти элемент и написать текст как «привет»driver.findElement(By.cssSelector("input[id^='Em']")).sendKeys("привет");< table class=crayon-table>
1
driver.findElement(By.cssSelector(“input [id^='Em']”)).sendKeys(“hi”);
Заканчивается на ($):

Кому выберите элемент, мы бы использовали $ что означает “заканчивается на”

Синтаксис:css=<HTML-тег><[attribute$=суффикс строки]>

1
css=<HTML-тег><[attribute$= суффикс строки]>

Значение, добавляемое в метод By.cssSelector:css=input[id$='001']

1
css=input[id$='001']

Добавьте следующий шаг в скрипт, чтобы найти элемент и написать текст как «привет»

driver.findElement (By.cssSelector (" input [id $ = '001']&# 34;)).sendKeys("hi");

1
driver.findElement(By.cssSelector(“input[id$='001']”)).sendKeys(“привет”);

Содержит (*):

Чтобы выбрать элемент, мы использовали * что означает 'подстрока'

Синтаксис:css=<HTML-тег><[attribute*=sub string]>

1
css=<HTML-тег><[attribute*=sub string]>

Значение, добавляемое в метод By.cssSelector:css=input[id*='id']

1
css=input[id*='id']

Добавьте приведенный ниже шаг в скрипт, чтобы найти элемент и написать текст как «привет»

driver.findElement(By .cssSelector("input[id*='id']")).sendKeys("привет");

1
driver.findElement(By.cssSelector(“input[id*='id']”)).sendKeys(“hi”);

Также мы можем использовать 'contains() ':

driver.findElement(By.cssSelector("input:contains(&# 39;id')")).sendKeys("привет");

1
driver.findElement(By.cssSelector(“input:contains('id')”)).sendKeys(“привет”);

Поиск дочерних элементов (прямой дочерний элемент):

<div id="buttonDiv" class="маленький"> <идентификатор кнопки="submitButton" тип="кнопка" class="btn">Отправить</button> </div>

123
<div id=”buttonDiv” class=”small”><button id=”submitButton” type=”button” class=”btn”>Отправить</button></div>

Синтаксис: parentLocator>childLocator

CSS-локатор: div#buttonDiv>button

Объяснение: 'div#buttonDiv >button» сначала перейдет к элементу div с идентификатором «buttonDiv», а затем выберет его дочерний элемент — «button»

Поиск элементов внутри других элементов (дочерних или поддочерних):

Синтаксис: parentLocator>locator1 locator2

CSS-локатор: div#buttonDiv button

Объяснение: 'div#buttonDiv button ' сначала перейдет к элементу div с идентификатором 'buttonDiv', а затем выберет внутри него элемент 'button' (который может быть его дочерним или поддочерним элементом)

Поиск n-го дочернего элемента:

Чтобы найти nth-child css.

<ul id="automation& #34;> <li>Селен</li> <li>QTP</li> <li>Сикули</li> </ul>

12345
<ul id=”automation”>   <li>Selenium</li>   <li>QTP</li>   <li>Sikuli</li></ul>

Чтобы найти элемент с текстом «QTP», мы должны использовать «nth-of-type»css="ul#automation li:nth-of-type(2)"

1
css=”ul#automation li:nth-of-type(2)”

Аналогично, чтобы выбрать последний дочерний элемент, то есть 'Sikuli', мы можем использоватьcss="ul#automation li:last-child&# 34;

1
css=” ul#automation li:last-child”

Если у вас есть какие-либо вопросы по поиску элементов с помощью CSS Selector Selenium, оставьте комментарий ниже в разделе комментариев. Нравится этот пост? Не забудьте поделиться ею!

Вот несколько отобранных статей, которые вы можете прочитать дальше:

Учебное пособие по Selenium
Учебное пособие по TestNG
Selenium Вопросы для собеседования
Вопросы для собеседования с TestNG
Учебное пособие по ручному тестированию
Вопросы для собеседования по ручному тестированию

TAG: qa

Еще об этом:

100 САМЫХ ПОПУЛЯРНЫХ ПРОДВИНУТЫХ ВОПРОСОВ И ОТВЕТОВ НА ИНТЕРВЬЮ ПО SELENIUM КАК ОБРАЩАТЬСЯ С ВЫПАДАЮЩИМ СПИСКОМ И МНОЖЕСТВЕННЫМ ВЫБОРОМ, ИСПОЛЬЗУЯ SELENIUM WEBDRIVER СТРУКТУРА, УПРАВЛЯЕМАЯ ДАННЫМИ, В SELENIUM WEBDRIVER | МАТЕРИАЛ ДЛЯ ТЕСТИРОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ КАК НАПИСАТЬ ДИНАМИЧЕСКИЙ XPATH В SELENIUM WEBDRIVER СЕЛЕНИУМ 4 | КАК СДЕЛАТЬ СКРИНШОТ ПОЛНОЙ СТРАНИЦЫ С ИСПОЛЬЗОВАНИЕМ SELENIUM 4 КАК ВЫПОЛНЯТЬ ТЕСТЫ SELENIUM НА BROWERSTACK [МЕЖБРАУЗЕРНОЕ ТЕСТИРОВАНИЕ С ИСПОЛЬЗОВАНИЕМ SELENIUM] SELENIUM 4.0 — ВВЕДЕНИЕ, НОВЫЕ ФУНКЦИИ, УСТАНОВКА, ЧТО УСТАРЕЛО РУКОВОДСТВО ПО SELENIUM PYTHON ДЛЯ НАЧИНАЮЩИХ ЗАПУСК СКРИПТОВ SELENIUM В ОБЛАКЕ LAMBDATEST | АВТОМАТИЗИРОВАННОЕ КРОСС-БРАУЗЕРНОЕ ТЕСТИРОВАНИЕ JAVASCRIPTEXECUTOR В SELENIUM WEBDRIVER, МЕТОДЫ С ПРИМЕРАМИ

Навигация по записям

КРАУДСОРСИНГ И АУТСОРСИНГ – ЛУЧШИЕ ПРАКТИКИ QA
НАЧАЛО РАБОТЫ С CUCUMBER BDD ДЛЯ АВТОМАТИЗИРОВАННОГО ТЕСТИРОВАНИЯ

ИЗУЧИТЕ РУКОВОДСТВО ПО СЕЛЕКТОРУ CSS В SELENIUM WEBDRIVER [БЕЗ ИСПОЛЬЗОВАНИЯ КАКИХ-ЛИБО ИНСТРУМЕНТОВ]

Селектор CSS Selenium WebDriver Tutorial

Локатор селекторов CSS:

Tag и ID:

Тег и класс:

Тег и атрибут:

Тег, класс и атрибут:

СОВПАДЕНИЯ ПОДСТРОЕК:

Начинается с (^):

Заканчивается на ($):

**Содержит (*):**

Также мы можем использовать 'contains() ':

Поиск дочерних элементов (прямой дочерний элемент):

Поиск элементов внутри других элементов (дочерних или поддочерних):

Поиск n-го дочернего элемента:

От QA genius

Связанная запись

Вы пропустили

УЧЕБНОЕ УПРАВЛЕНИЕ ПО ДЖАНГО

СТАНДАРТНАЯ БИБЛИОТЕКА PYTHON

РУКОВОДСТВО ПО PYQT

РЕСУРСЫ ПИТОНА

ИЗУЧИТЕ РУКОВОДСТВО ПО СЕЛЕКТОРУ CSS В SELENIUM WEBDRIVER [БЕЗ ИСПОЛЬЗОВАНИЯ КАКИХ-ЛИБО ИНСТРУМЕНТОВ]

Селектор CSS Selenium WebDriver Tutorial

Локатор селекторов CSS:

Tag и ID:

Тег и класс:

Тег и атрибут:

Тег, класс и атрибут:

СОВПАДЕНИЯ ПОДСТРОЕК:

Начинается с (^):

Заканчивается на ($):

Содержит (*):

Также мы можем использовать 'contains() ':

Поиск дочерних элементов (прямой дочерний элемент):

Поиск элементов внутри других элементов (дочерних или поддочерних):

Поиск n-го дочернего элемента:

Еще об этом:

От QA genius

Связанная запись

ЛУЧШИЕ ИНСТРУМЕНТЫ ТЕСТИРОВАНИЯ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ В 2024 ГОДУ ДЛЯ ANDROID И IOS

ЧТО ТАКОЕ ТЕСТИРОВАНИЕ ПРАВОЙ СМЕНЫ? | ОПРЕДЕЛЕНИЕ, ПРЕИМУЩЕСТВА, ПРОБЛЕМЫ

ЛУЧШИЕ КОМПАНИИ ПО КИБЕРБЕЗОПАСНОСТИ 2023 ГОДА

Вы пропустили

УЧЕБНОЕ УПРАВЛЕНИЕ ПО ДЖАНГО

СТАНДАРТНАЯ БИБЛИОТЕКА PYTHON

РУКОВОДСТВО ПО PYQT

РЕСУРСЫ ПИТОНА

**Содержит (*):**