Автоматизированное тестирование позиционирования CSS-элементов

1.1  CSS-позиционирование

1.1.1 Абсолютное позиционирование по траектории

Цель

Найдите первую метку с текстом «угадай»

выполнить

CSS-выражение

html>body>div>a[.="Угадай"]

выражение Python

driver.find_element_by_css_selector('html>body>div>a[.=”猜猜看”]')

1.1.2 Относительное позиционирование траектории

Цель

Найдите первую метку с текстом «угадай»

выполнить

CSS-выражение

a[.="Угадай"]

Выражение Python

driver.find_element_by_css_selector('a[.=”猜猜看”]')

1.1.3 Расположение названия класса

Цель

Найдите первый элемент div с именем класса «blogpost-body».

выполнить

CSS-выражение

дел. тело поста блога

выражение Python

driver.find_element_by_css_selector("div. blogpost-body")

иллюстрировать

Для составных классов, таких как <input class="btn btn-lg btn-default" type="text">, просто напишите все классы напрямую, то есть: driver.find_element_by_css_selector("input. btn.btn-lg.btn -по умолчанию")

Имя тега не требуется.

1.1.4 Расположение атрибутов
1.1.4.1 Расположение атрибута идентификатора

Цель

Найдите на странице первый элемент div с идентификатором «cnblogs_post_body».

выполнить

CSS-выражение

div# cnblogs_post_body

Выражение Python

driver.find_element_by_css_selector("div# cnblogs_post_body")

1.1.4.2 Расположение других атрибутов

Другие атрибуты относятся ко всем атрибутам, кроме id и class, например атрибутам src и alt img, типу и заполнителю ввода и т. д.

Цель

Найдите на странице элемент img, атрибут alt которого равен «Нажмите, чтобы попробовать».

выполнить

CSS-выражение

img[alt="Нажмите здесь, чтобы попробовать"]

Выражение Python

driver.find_element_by_css_selector('img[alt="Нажмите меня, чтобы попробовать"]')

иллюстрировать

Если элемент не может быть однозначно расположен, полагаясь только на один атрибут, вы можете написать несколько атрибутов следующим образом:

img[alt="Нажмите здесь, чтобы попробовать"][src="/images/bg.jpg"]

driver.find_element_by_css_selector('img[alt="Нажмите здесь, чтобы попробовать"] [src="/images/bg.jpg"]')

1.1.4.3 Нечеткое позиционирование атрибута

Три регулярных выражения ^, $, *, обычно используемые для нечеткого позиционирования атрибутов.

Цель

Найдите тег, адрес ссылки которого — «http://www.baidu.com».

CSS-выражение

а[href^=»http://www.baidu»]

а[href$="baidu.com"]

а[href*="байду"]

выражение Python

find_element_by_css_selector('a[href^=”http://www.baidu”]')

find_element_by_css_selector('a[href^=» a[href$=»baidu.com»]')

find_element_by_css_selector('a[href*=»baidu»]')

1.1.5 Поиск элементов подстраницы

Цель

Найдите элемент div с классом маркера-румян под элементом с идентификатором дома.

CSS-выражение

div#home>div.highlighter-rouge

выражение Python

driver.find_element_by_css_selector("div#home>div.highlighter-rouge")

1.1.6 Позиционирование псевдокласса

Цель

Найдите первый дочерний элемент в разделе div#home.

CSS-выражение

div#home :первый ребенок

выражение Python

dirver..find_element_by_css_selector("div#home:first-child")

приложение:

Псевдокласс CSS

1.1 Псевдоклассы CSS

Селектор

Пример

Пример описания

:проверено

ввод: проверено

Выделить все выбранные элементы формы

:неполноценный

ввод: отключен

Выбрать все отключенные элементы формы

:пустой

п:пустой

Выберите все элементы p, у которых нет дочерних элементов.

:включено

вход: включен

Выбрать все включенные элементы формы

:первый в своем роде

р: первый в своем роде

Выбирает первый дочерний элемент p каждого родительского элемента, который является элементом p.

:в диапазоне

вход: в пределах диапазона

Выбирает значения в пределах указанного диапазона элементов

:неверный

ввод: неверный

Выбрать все недопустимые элементы

:последний ребенок

п: последний ребенок

Выбирает последний дочерний элемент из всех элементов p.

: последний тип

p: последний тип

Выбирает последний элемент p каждого элемента p, который является его родительским элементом.

:нет (селектор)

:нет(п)

Выберите все элементы, кроме p

:nth-ребенок(n)

p:n-детский(2)

Выбирает второй дочерний элемент родительского элемента из всех элементов p.

:nth-последний-ребёнок(n)

p:nth-последний-ребенок(2)

Выберите предпоследний дочерний элемент из всех элементов p.

:n-последний-типа(n)

p:n-последний-типа(2)

Выберите предпоследний дочерний элемент из всех элементов p, который равен p.

:n-го типа(n)

p:n-го типа(2)

Выберите все элементы p, вторым дочерним элементом которых является p.

:только тип

p:только тип

Выберите все элементы, у которых есть только один дочерний элемент p

:единственный ребенок

п: единственный ребенок

Выберите все элементы p, у которых есть только один дочерний элемент.

:необязательный

ввод: необязательно

Выберите элементы без атрибута «обязательный»

:вне диапазона

ввод: вне диапазона

Выбрать атрибуты элемента со значениями вне указанного диапазона

:только для чтения

ввод: только для чтения

Выберите свойства элемента для атрибутов, доступных только для чтения.

:читай пиши

ввод: чтение-запись

Выберите свойства элемента без атрибутов, доступных только для чтения.

:необходимый

ввод: обязателен

Выбирает атрибуты элемента, указанные в «обязательном» атрибуте.

:корень

корень

Выберите корневой элемент документа

:цель

#новости:цель

Выберите активный в данный момент элемент #news (URL клика содержит имя привязки)

:действительный

ввод: действительный

Выберите атрибуты со всеми допустимыми значениями.

:связь

ссылка

Выбрать все непосещенные ссылки

:посетил

а: посетил

Выбрать все посещенные ссылки

:активный

а: активный

Выберите активную ссылку

:наведите курсор

а: наведите курсор

Состояние наведения мыши на ссылку

:фокус

ввод: фокус

Выбранный элемент имеет фокус после ввода

:первое письмо

р: первая буква

Выбирает первую букву каждого элемента <p>

:первая линия

р: первая линия

Выбирает первую строку каждого элемента <p>

:Первый ребенок

п:первый ребенок

Селектор соответствует элементам <p>, которые являются первым дочерним элементом любого элемента.

:до

п:до

Вставляйте содержимое перед каждым элементом <p>

:после

п: после

Вставляйте содержимое после каждого элемента <p>

:lang(язык)

п: язык (оно)

Выберите начальное значение атрибута lang элемента <p>.

импортировать ОС, время
из веб-драйвера импорта селена

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.maximize_window()
time.sleep(2)

#1、绝对路径
driver.find_element_by_css_selector('html body div div div+div+div a+a+a').click()

# 2. Относительный путь
driver.find_element_by_css_selector('div div div+div+div a+a+a').click()

#3. Используйте класс для позиционирования атрибутов элемента. Используйте id для #
driver.find_element_by_css_selector('input#kw').send_keys('ball')
driver.find_element_by_css_selector('input.s_ipt').send_keys('ball')

#Метод записи одного атрибута
driver.find_element_by_css_selector('input[maxlength="255"]').send_keys('ball') #
Метод записи нескольких атрибутов (отличается от xpath, отсутствует или не используется)
driver.find_element_by_css_selector('input[ maxlength="255 "][name="wd"]').send_keys('ball')

#Использовать совпадение значений частичного атрибута #
Начать с тем^=
driver.find_element_by_css_selector('a[href^="http://news"]').click() #Закончить
с тем, что$=
driver.find_element_by_css_selector('a[href $="hao123.com"]').click()
#Значение атрибута содержит *=
driver.find_element_by_css_selector('a[href*="tieba"]').click()

#Запрос дочерних элементов> имеет тот же эффект, что и пробелы
#Первый дочерний элемент
driver.find_element_by_css_selector('div.s-top-left a').click()
driver.find_element_by_css_selector('div.s-top-left a:first - child').click()
#Последний элемент
driver.find_element_by_css_selector('div.s-bottom-layer-content p:last-child').click() #
N-й дочерний элемент
driver.find_element_by_css_selector('div.s - вверху слева a:nth-child(3)').click()

#Запрос одноуровневых элементов
#p~p: означает начало от второго элемента p до конца
p_lable = driver.find_elements_by_css_selector('div.s-bottom-layer-content p~p')
print(len(p_lable))
for i in p_lable:
print(i.text) #Вывод текста каждого тега p

#От первого до конца сначала найдите первый тег p, а затем получите значение каждого тега p [отчет об ошибке]
p_lable = driver.find_element_by_css_selector('div.s-bottom-layer-content').find_elements_by_tag_name( ' p')
print(len(p_lable))
for i в p_lable:
print(i.text) #Выводим текст каждого тега p

#Новый синтаксис позиционирования
из selenium.webdriver.common.by import By
driver.find_element(By.NAME,'wd').send_keys('ball')
time.sleep(3)
driver.quit()

==========

Найдите последний элемент в группе: div.result-item.ng-star-inserted:last-child
или: div.result-item.ng-star-inserted:nth-last-of-type(1) div:nth -child(2)
Третий снизу:div.result-item.ng-star-inserted:nth-last-of-type(3) div:nth-child(2)

===========

В заключение хотелось бы поблагодарить всех, кто внимательно читает мою статью.Взаимность всегда необходима.Хоть это и не очень ценная вещь, но если вы умеете ею пользоваться, то можете взять напрямую:

Вставьте сюда описание изображения

Эта информация должна стать наиболее полным и полным складом подготовки для друзей [тестирования программного обеспечения].Этот склад также сопровождал десятки тысяч инженеров-тестировщиков в самом трудном путешествии.Надеюсь, он также сможет помочь вам!   

Supongo que te gusta

Origin blog.csdn.net/nhb687096/article/details/133273042
Recomendado
Clasificación