Намиране на елементи от CSS селектори със селен

Намирането и избирането на елементи от уеб страницата е ключът към изстъргването на уеб с Selenium. За намиране и избор на елементи от уеб страницата можете да използвате CSS селектори в Selenium.В тази статия ще ви покажа как да намирате и избирате елементи от уеб страници с помощта на CSS селектори в Selenium с библиотеката на Python на Selenium. И така, нека започнем.

Предпоставки:

За да изпробвате командите и примерите от тази статия, трябва да имате,

1) Линукс дистрибуция (за предпочитане Ubuntu), инсталирана на вашия компютър.
2) Python 3, инсталиран на вашия компютър.
3) PIP 3, инсталиран на вашия компютър.
4) Python virtualenv пакет, инсталиран на вашия компютър.
5) Уеб браузъри Mozilla Firefox или Google Chrome, инсталирани на вашия компютър.
6) Трябва да знаете как да инсталирате Firefox Gecko Driver или Chrome Web Driver.

За изпълнение на изискванията 4, 5 и 6 прочетете статията ми Въведение в селена с Python 3 в Linuxhint.com.

Можете да намерите много статии по другите теми на LinuxHint.com. Не забравяйте да ги проверите, ако имате нужда от помощ.

Създаване на директория на проекти:

За да поддържате всичко организирано, създайте нова директория на проекта селен-css-селектор / както следва:

$ mkdir -pv селен-css-селектор / драйвери

Придвижете се до селен-css-селектор / директория на проекта, както следва:

$ cd селен-css-селектор /

Създайте виртуална среда на Python в директорията на проекта, както следва:

$ virtualenv .venv

Активирайте виртуалната среда, както следва:

$ източник .venv / bin / активиране

Инсталирайте библиотеката на Selenium Python, използвайки PIP3, както следва:

$ pip3 инсталиране на селен

Изтеглете и инсталирайте всички необходими уеб драйвери в шофьори / директория на проекта. Обясних процеса на изтегляне и инсталиране на уеб драйвери в моята статия Въведение в селена с Python 3. Ако имате нужда от помощ, потърсете LinuxHint.com за тази статия.

Вземете CSS Selector с помощта на Chrome Developer Tool:

В този раздел ще ви покажа как да намерите CSS селектора на елемента на уеб страницата, който искате да изберете с Selenium, като използвате вградения инструмент за разработчици на уеб браузъра Google Chrome.

За да получите CSS селектора с помощта на уеб браузъра Google Chrome, отворете Google Chrome и посетете уеб сайта, от който искате да извлечете данни. След това натиснете десния бутон на мишката (RMB) върху празно място на страницата и кликнете върху Огледайте за да отворите Инструмент за разработчици на Chrome.

Можете също да натиснете + Shift + Аз за да отворите Инструмент за разработчици на Chrome.

Инструмент за разработчици на Chrome трябва да се отвори.

За да намерите HTML представяне на желания от вас елемент на уеб страница, щракнете върху Огледайте() иконата, както е отбелязана на екрана по-долу.

След това задръжте курсора на мишката върху желания от вас елемент на уеб страница и натиснете левия бутон на мишката (LMB), за да го изберете.

HTML представянето на избрания от вас уеб елемент ще бъде подчертано в Елементи раздел на Инструмент за разработчици на Chrome както можете да видите на екранната снимка по-долу.

За да получите CSS селектора на желания от вас елемент, изберете елемента от Елементи раздел на Инструмент за разработчици на Chrome и щракнете с десния бутон върху него (RMB). След това изберете копие > Селектор за копиране както е отбелязано на екранната снимка по-долу.

Поставих CSS селектора в текстов редактор. CSS селекторът изглежда както е показано на екранната снимка по-долу.

Вземете CSS Selector с помощта на Firefox Developer Tool:

За да получите CSS селектора с помощта на уеб браузъра Firefox, отворете Firefox и посетете уеб сайта, от който искате да извлечете данни. След това натиснете десния бутон на мишката (RMB) върху празно място на страницата и кликнете върху Проверете елемента (Q) за да отворите Инструмент за разработчици на Firefox.

Инструмент за разработчици на Firefox трябва да се отвори.

HTML представянето на избрания от вас уеб елемент ще бъде подчертано в Инспектор раздел на Инструмент за разработчици на Firefox както можете да видите на екранната снимка по-долу.

За да получите CSS селектора на желания от вас елемент, изберете елемента от Инспектор раздел на Инструмент за разработчици на Firefox и щракнете с десния бутон върху него (RMB). След това изберете копие > CSS селектор както е отбелязано на екранната снимка по-долу.

CSS селекторът на желания от вас елемент трябва да изглежда така.

Извличане на данни с помощта на CSS Selector със селен:

В този раздел ще ви покажа как да избирате елементи на уеб страницата и да извличате данни от тях с помощта на CSS селектори с библиотека Selenium Python.

Първо, създайте нов Python скрипт ex00.py и въведете следните редове кодове.

от webdriver за импортиране на селен
от селен.уеб драйвер.често срещани.ключове за импортиране
от селен.уеб драйвер.често срещани.чрез импортиране от
options = webdriver.ChromeOptions ()
настроики.без глава = Вярно
браузър = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", опции = опции)
браузър.get ("https: // www.unixtimestamp.com / ")
timestamp = браузър.find_element_by_css_selector ('h3.текст-опасност: n-то дете (3) ')
print ('Текущ клеймо:% s'% (клеймо.текст.split (") [0]))
браузър.близо()

След като приключите, запазете ex00.py Python скрипт.

Линия 1-3 импортира всички необходими компоненти на селен.

Ред 5 създава обект с опции на Chrome, а ред 6 позволява безглавен режим за уеб браузъра Chrome.

Ред 8 създава Chrome браузър обект с помощта на хромедривър двоично от шофьори / директория на проекта.

Ред 10 казва на браузъра да зареди уебсайта unixtimestamp.com.

Ред 12 намира елемента, който има данни за времевия печат от страницата, използвайки CSS селектор и ги съхранява в клеймо за време променлива.

Ред 13 анализира данните за времевия печат от елемента и ги отпечатва на конзолата.

Ето как HTML структурата на данните за UNIX timestamp в unixtimestamp.com изглежда така.

Ред 14 затваря браузъра.

Стартирайте скрипта на Python ex00.py както следва:

$ python3 ex00.py

Както можете да видите, данните за времевия печат се отпечатват на екрана.

Тук използвах браузър.find_element (от, селектор) метод.

Тъй като използваме CSS селектори, първият параметър ще бъде От.CSS_SELECTOR а вторият параметър ще бъде самият CSS селектор.

Вместо браузър.find_element () метод, можете също да използвате браузър.find_element_by_css_selector (селектор) метод. Този метод се нуждае само от CSS селектор, за да работи. Резултатът ще бъде същият.

The браузър.find_element () и браузър.find_element_by_css_selector () методи се използват за намиране и избор на отделен елемент от уеб страницата. Ако искате да намерите и изберете множество елементи с помощта на CSS селектори, тогава трябва да използвате браузър.find_elements () и браузър.find_elements_by_css_selector () методи.

The браузър.find_elements () метод приема същите аргументи като браузър.find_element () метод.

The браузър.find_elements_by_css_selector () метод приема същия аргумент като браузър.find_element_by_css_selector () метод.

Нека видим пример за извличане на списък с имена с помощта на CSS селектори от генератор на произволни имена.информация със Селен.

Както можете да видите, неподреденият списък има името на класа списък с имена. Така че, можем да използваме CSS селектора .nameList li за да изберете всички имена от уеб страницата.

Нека да разгледаме пример за избор на множество елементи от уеб страницата с помощта на CSS селектори.

Създайте нов скрипт на Python ex01.py и въведете в него следните редове кодове.

от webdriver за импортиране на селен
от селен.уеб драйвер.често срещани.ключове за импортиране
от селен.уеб драйвер.често срещани.чрез импортиране от
options = webdriver.ChromeOptions ()
настроики.без глава = Вярно
браузър = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", опции = опции)
браузър.get ("http: // random-name-generator.информация / ")
имена = браузър.find_elements (От.CSS_SELECTOR, '.nameList li ')
за име в имена:
печат (име.текст)
браузър.близо()

След като приключите, запазете ex01.py Python скрипт.

Ред 1-8 е същият като в ex00.py Python скрипт. Така че, няма да ги обяснявам отново тук.

Ред 10 казва на браузъра да зареди уебсайта генератор на произволни имена.информация.

Ред 12 избира списъка с имена с помощта на браузър.find_elements () метод. Този метод използва CSS селектора .nameList li за да намерите списъка с имена. След това списъкът с имена се съхранява в имена променлива.

В редове 13 и 14, а за цикъл се използва за итерация през имена списък и отпечатайте имената на конзолата.

Ред 16 затваря браузъра.

Стартирайте скрипта на Python ex01.py както следва:

$ python3 ex01.py

Както можете да видите, имената се извличат от уеб страницата и се отпечатват на конзолата.

Вместо да използвате браузър.find_elements () метод, можете също да използвате браузър.find_elements_by_css_selector () метода както преди. Този метод се нуждае само от CSS селектор, за да работи. Резултатът ще бъде същият.

Основи на CSS селектори:

Винаги можете да намерите CSS селектора на елемент на уеб страница, като използвате инструмента за разработчици на Firefox или уеб браузъра Chrome. Този автоматично генериран CSS селектор може да не е това, което искате. Понякога може да се наложи да напишете вашия CSS селектор.

В този раздел ще говоря за основите на CSS селектори, за да можете да разберете какво избира определен CSS селектор от уеб страница и да напишете вашия персонализиран CSS селектор, ако е необходимо.

Ако искате да изберете елемент от уеб страницата с помощта на идентификатора съобщение, CSS селекторът ще бъде # съобщение.

Селекторът на CSS .зелено ще избере елемент, като използва име на клас зелено.

Ако искате да изберете елемент (class съобщ) вътре в друг елемент (class контейнер), CSS селекторът ще бъде .контейнер .съобщ

Селекторът на CSS .съобщ.успех ще избере елемента, който има два CSS класа съобщ и успех.

За да изберете всички стр тагове, можете да използвате CSS селектора стр.

За да изберете само стр етикети вътре в div тагове, можете да използвате CSS селектора div стр

За да изберете стр тагове, които са преките братя и сестри на div тагове, можете да използвате CSS селектора div> стр

За да изберете всички обхват и стр тагове, можете да използвате CSS селектора p, обхват

За да изберете стр етикет веднага след div таг, можете да използвате CSS селектора div + p

За да изберете стр етикет след div таг, можете да използвате CSS селектора div ~ стр

За да изберете всички стр тагове, които имат името на класа съобщ, можете да използвате CSS селектора стр.съобщ

За да изберете всички обхват тагове, които имат името на класа съобщ, можете да използвате CSS селектора обхват.съобщ

За да изберете всички елементи, които имат атрибут href, можете да използвате CSS селектора [href]

За да изберете елемента, който има атрибут име и стойността на име атрибутът е потребителско име, можете да използвате CSS селектора [име = ”потребителско име”]

За да изберете всички елементи, които имат атрибут височина и стойността на височина атрибут, съдържащ подниза vscode, можете да използвате CSS селектора [alt ~ = ”vscode”]

За да изберете всички елементи, които имат href атрибут и стойността на href атрибут започва с низа https, можете да използвате CSS селектора [href ^ = ”https”]

За да изберете всички елементи, които имат href атрибут и стойността на href атрибут, завършващ със низа .com, можете да използвате CSS селектора [href $ = ”.com ”]

За да изберете всички елементи, които имат href атрибут и стойността на href атрибутът има подниза google, можете да използвате CSS селектора [href * = ”google”]

Ако искате да изберете първия ли етикет вътре в ул таг, можете да използвате CSS селектора ul li: първо дете

Ако искате да изберете първия ли етикет вътре в ул таг, можете да използвате и CSS селектора ul li: n-то дете (1)

Ако искате да изберете последния ли етикет вътре в ул таг, можете да използвате CSS селектора ul li: последно дете

Ако искате да изберете последния ли етикет вътре в ул таг, можете да използвате и CSS селектора ul li: nth-last-child (1)

Ако искате да изберете втория ли етикет вътре в ул етикет, започвайки от самото начало, можете да използвате CSS селектора ul li: n-то дете (2)

Ако искате да изберете третия ли етикет вътре в ул етикет, започвайки от самото начало, можете да използвате CSS селектора ul li: n-то дете (3)

Ако искате да изберете втория ли етикет вътре в ул етикет, започвайки от края, можете да използвате CSS селектора ul li: nth-last-child (2)

Ако искате да изберете третия ли етикет вътре в ул етикет, започвайки от края, можете да използвате CSS селектора ul li: nth-last-child (3)

Това са най-често срещаните CSS селектори. Ще откриете, че ги използвате почти във всички проекти на Selenium. Има много повече селектори на CSS. Можете да намерите списък на всички тях в w3schools.com Препратка към CSS селектори.

Заключение:

В тази статия показах как да намирате и избирате елементи на уеб страница, използвайки CSS селектори със Selenium. Обсъждал съм и основите на CSS селекторите. Би трябвало да можете да използвате CSS селектори удобно за вашите проекти на Selenium.