Hitta element efter CSS-väljare med selen

Att hitta och välja element från webbsidan är nyckeln till webbskrapning med Selen. För att hitta och välja element från webbsidan kan du använda CSS-väljare i Selenium.I den här artikeln ska jag visa dig hur du hittar och väljer element från webbsidor med hjälp av CSS-väljare i Selen med Selenium python-biblioteket. Så, låt oss komma igång.

Förutsättningar:

För att prova kommandon och exempel på den här artikeln måste du ha,

1) En Linux-distribution (helst Ubuntu) installerad på din dator.
2) Python 3 installerad på din dator.
3) PIP 3 installerad på din dator.
4) Python virtualenv paketet installerat på din dator.
5) Mozilla Firefox eller Google Chrome webbläsare installerade på din dator.
6) Måste veta hur man installerar Firefox Gecko Driver eller Chrome Web Driver.

För att uppfylla kraven 4, 5 och 6, läs min artikel Introduktion till Selen med Python 3 på Linuxhint.com.

Du kan hitta många artiklar om de andra ämnena på LinuxHint.com. Var noga med att kolla in dem om du behöver hjälp.

Ställa in en projektkatalog:

Skapa en ny projektkatalog för att hålla allt ordnat selen-css-väljare / som följer:

$ mkdir -pv selen-css-väljare / drivrutiner

Navigera till selen-css-väljare / projektkatalog enligt följande:

$ cd selen-css-väljare /

Skapa en virtuell Python-miljö i projektkatalogen enligt följande:

$ virtualenv .venv

Aktivera den virtuella miljön enligt följande:

$ källa .venv / bin / aktivera

Installera Selenium Python-biblioteket med PIP3 enligt följande:

$ pip3 installera selen

Ladda ner och installera alla nödvändiga webbdrivrutiner i förare / projektkatalogen. Jag har förklarat processen för nedladdning och installation av webbdrivrutiner i min artikel Introduktion till Selen med Python 3. Om du behöver hjälp, sök vidare LinuxHint.com för den artikeln.

Skaffa CSS Selector med Chrome Developer Tool:

I det här avsnittet ska jag visa dig hur du hittar CSS-väljaren för det webbsidaelement du vill välja med Selen med det inbyggda utvecklarverktyget i webbläsaren Google Chrome.

För att få CSS-väljaren med Google Chrome-webbläsaren, öppna Google Chrome och besök webbplatsen som du vill extrahera data från. Tryck sedan på höger musknapp (RMB) på ett tomt område på sidan och klicka på Inspektera för att öppna Chrome Developer Tool.

Du kan också trycka på + Flytta + Jag för att öppna Chrome Developer Tool.

Chrome Developer Tool bör öppnas.

För att hitta HTML-representationen för önskat webbsidealement, klicka på Inspektera() -ikonen som markeras i skärmdumpen nedan.

Håll sedan muspekaren över önskat webbsidelement och tryck på vänster musknapp (LMB) för att välja det.

HTML-representationen för det webbelement du har valt kommer att markeras i Element flik för Chrome Developer Tool som du kan se på skärmdumpen nedan.

För att hämta CSS-väljaren för ditt önskade element, välj elementet från Element flik för Chrome Developer Tool och högerklicka (RMB) på den. Välj sedan Kopiera > Kopiera väljaren som markerat i skärmdumpen nedan.

Jag har klistrat in CSS-väljaren i en textredigerare. CSS-väljaren ser ut som på skärmdumpen nedan.

Skaffa CSS Selector med Firefox Developer Tool:

I det här avsnittet ska jag visa dig hur du hittar CSS-väljaren för det webbsidaelement du vill välja med Selen med det inbyggda utvecklarverktyget i webbläsaren Mozilla Firefox.

För att få CSS-väljaren med Firefox-webbläsaren, öppna Firefox och besök webbplatsen som du vill extrahera data från. Tryck sedan på höger musknapp (RMB) på ett tomt område på sidan och klicka på Inspektera element (Q) för att öppna Firefox Developer Tool.

Firefox Developer Tool bör öppnas.

För att hitta HTML-representationen för önskat webbsidealement, klicka på Inspektera() -ikonen som markeras i skärmdumpen nedan.

Håll sedan muspekaren över önskat webbsidelement och tryck på vänster musknapp (LMB) för att välja det.

HTML-representationen för det webbelement du har valt kommer att markeras i Inspektör flik för Firefox Developer Tool som du kan se på skärmdumpen nedan.

För att hämta CSS-väljaren för ditt önskade element, välj elementet från Inspektör flik för Firefox Developer Tool och högerklicka (RMB) på den. Välj sedan Kopiera > CSS-väljare som markerat i skärmdumpen nedan.

CSS-väljaren för önskat element ska se ut så här.

Extrahera data med CSS Selector med Selen:

I det här avsnittet ska jag visa dig hur du väljer webbsidelement och extraherar data från dem med CSS-väljare med Selenium Python-bibliotek.

Skapa först ett nytt Python-skript ex00.py och skriv in följande rader med koder.

från selenimportwebdriver
från selen.webbdrivare.allmänning.nycklar importerar nycklar
från selen.webbdrivare.allmänning.genom import av
alternativ = webdriver.ChromeOptions ()
alternativ.headless = Sant
webbläsare = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", optioner = optioner)
webbläsare.få ("https: // www.unixtimestamp.com / ")
tidsstämpel = webbläsare.find_element_by_css_selector ('h3.text-fara: nth-child (3) ')
skriv ut ('Aktuell tidsstämpel:% s'% (tidsstämpel.text.split (") [0]))
webbläsare.stänga()

När du är klar sparar du ex00.py Python-skript.

Linje 1-3 importerar alla nödvändiga Selen-komponenter.

Rad 5 skapar ett Chrome-alternativ-objekt och rad 6 aktiverar headless-läge för Chrome-webbläsaren.

Linje 8 skapar en Chrome webbläsare objekt med hjälp av kromförare binär från förare / projektkatalogen.

Rad 10 ber webbläsaren att ladda webbplatsen unixtimestamp.com.

Rad 12 hittar elementet som har tidsstämpeldata från sidan med hjälp av CSS-väljaren och lagrar den i tidsstämpel variabel.

Rad 13 analyserar tidsstämpeldata från elementet och skriver ut det på konsolen.

Detta är hur HTML-strukturen för UNIX-tidsstämpeldata i unixtimestamp.com ser ut.

Rad 14 stänger webbläsaren.

Kör Python-skriptet ex00.py som följer:

$ python3 ex00.py

Som du kan se, skrivs tidsstämpeldata ut på skärmen.

Här har jag använt webbläsare.hitta_element (av, väljare) metod.

Eftersom vi använder CSS-väljare kommer den första parametern att vara Förbi.CSS_SELECTOR och den andra parametern är själva CSS-väljaren.

Istället för webbläsare.hitta_element () metod kan du också använda webbläsare.find_element_by_css_selector (väljare) metod. Denna metod behöver bara en CSS-väljare för att fungera. Resultatet blir detsamma.

De webbläsare.hitta_element () och webbläsare.find_element_by_css_selector () metoder används för att hitta och välja ett enda element från webbsidan. Om du vill hitta och välja flera element med CSS-väljare måste du använda webbläsare.hitta_element () och webbläsare.find_elements_by_css_selector () metoder.

De webbläsare.hitta_element () metoden tar samma argument som webbläsare.hitta_element () metod.

De webbläsare.find_elements_by_css_selector () metoden tar samma argument som webbläsare.find_element_by_css_selector () metod.

Låt oss se ett exempel på att extrahera en lista med namn med hjälp av CSS-väljare från random-name-generator.info med Selen.

Som du kan se har den oordnade listan klassnamnet namnlista. Så vi kan använda CSS-väljaren .namnLista li för att välja alla namn från webbsidan.

Låt oss gå igenom ett exempel på att välja flera element från webbsidan med CSS-väljare.

Skapa ett nytt Python-skript ex01.py och skriv in följande rader med koder i den.

från selenimportwebdriver
från selen.webbdrivare.allmänning.nycklar importerar nycklar
från selen.webbdrivare.allmänning.genom import av
alternativ = webdriver.ChromeOptions ()
alternativ.headless = Sant
webbläsare = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", optioner = optioner)
webbläsare.get ("http: // random-name-generator.info/")
namn = webbläsare.hitta_element (av.CSS_SELECTOR, '.nameList li ')
för namn i namn:
Skriv namn.text)
webbläsare.stänga()

När du är klar sparar du ex01.py Python-skript.

Rad 1-8 är densamma som i ex00.py Python-skript. Så jag kommer inte att förklara dem här igen.

Rad 10 ber webbläsaren att ladda webbplatsens slumpmässiga namngenerator.info.

Rad 12 väljer namnlistan med webbläsare.hitta_element () metod. Denna metod använder CSS-väljaren .namnLista li för att hitta namnlistan. Sedan sparas namnlistan i namn variabel.

I rad 13 och 14, a för loop används för att iterera genom namn lista och skriva ut namnen på konsolen.

Rad 16 stänger webbläsaren.

Kör Python-skriptet ex01.py som följer:

$ python3 ex01.py

Som du kan se extraheras namnen från webbsidan och skrivs ut på konsolen.

Istället för att använda webbläsare.hitta_element () metod kan du också använda webbläsare.find_elements_by_css_selector () metoden som tidigare. Den här metoden behöver bara en CSS-väljare för att fungera. Resultatet blir detsamma.

Grunderna för CSS-väljare:

Du kan alltid hitta CSS-väljaren för en webbsida med hjälp av utvecklarverktyget i Firefox eller Chrome-webbläsaren. Den här autogenererade CSS-väljaren kanske inte är vad du vill. Ibland kan du behöva skriva din CSS-väljare.

I det här avsnittet ska jag prata om grunderna för CSS-väljare så att du kan förstå vad en viss CSS-väljare väljer från en webbsida och skriva din anpassade CSS-väljare om det behövs.

Om du vill välja ett element från webbsidan med ID meddelande, kommer CSS-väljaren att vara #meddelande.

CSS-väljaren .grön väljer ett element med ett klassnamn grön.

Om du vill välja ett element (klass msg) inuti ett annat element (klass behållare) kommer CSS-väljaren att vara .behållare .msg

CSS-väljaren .msg.Framgång väljer det element som har två CSS-klasser msg och Framgång.

För att välja alla sid taggar kan du använda CSS-väljaren sid.

För att bara välja sid taggar inuti div taggar kan du använda CSS-väljaren div s

För att välja sid taggar som är direkt syskon till div taggar kan du använda CSS-väljaren div> s

För att välja alla spänna och sid taggar kan du använda CSS-väljaren p, span

För att välja sid taggen omedelbart efter div kan du använda CSS-väljaren div + s

För att välja sid taggen efter div kan du använda CSS-väljaren div ~ s

För att välja alla sid taggar som har klassnamnet msg, du kan använda CSS-väljaren sid.msg

För att välja alla spänna taggar som har klassnamnet msg, du kan använda CSS-väljaren spänna.msg

Att välja alla element som har attributet href, du kan använda CSS-väljaren [href]

Att välja det element som har attributet namn och värdet på namn attribut är Användarnamn, du kan använda CSS-väljaren [name = ”användarnamn”]

Att välja alla element som har attributet alt och värdet på alt attribut som innehåller substringen vscode, du kan använda CSS-väljaren [alt ~ = ”vscode”]

För att välja alla element som har href attribut och värdet på href attribut börjar med strängen https, du kan använda CSS-väljaren [href ^ = ”https”]

För att välja alla element som har href attribut och värdet på href attribut som slutar med strängen .com, du kan använda CSS-väljaren [href $ = ”.com ”]

För att välja alla element som har href attribut och värdet på href attribut har substring Google, du kan använda CSS-väljaren [href * = ”google”]

Om du vill välja den första li tagg inuti ul kan du använda CSS-väljaren ul li: första barn

Om du vill välja den första li tagg inuti ul kan du också använda CSS-väljaren ul li: nth-child (1)

Om du vill välja den sista li tagg inuti ul kan du använda CSS-väljaren ul li: sista barn

Om du vill välja den sista li tagg inuti ul kan du också använda CSS-väljaren ul li: n-sista barn (1)

Om du vill välja den andra li tagg inuti ul från början kan du använda CSS-väljaren ul li: nth-child (2)

Om du vill välja det tredje li tagg inuti ul från början kan du använda CSS-väljaren ul li: nth-child (3)

Om du vill välja den andra li tagg inuti ul tag från början, kan du använda CSS-väljaren ul li: nth-last-child (2)

Om du vill välja det tredje li tagg inuti ul tag från början, kan du använda CSS-väljaren ul li: nth-last-child (3)

Dessa är de vanligaste CSS-väljarna. Du kommer att hitta dig själv att använda dessa nästan på alla Selen-projekt. Det finns många fler CSS-väljare. Du hittar en lista över dem alla i w3schools.se CSS Selectors Reference.

Cnclusion:

I den här artikeln har jag visat hur man hittar och väljer webbsidelement med CSS-väljare med Selen. Jag har också diskuterat grunderna för CSS-väljare. Du bör kunna använda CSS-väljare bekvämt för dina Selen-projekt.