Använda XPath och Selenium för att hitta ett element på HTML -sidan

Using Xpath Selenium Find An Element Html Page



XPath, även känt som XML Path Language, är ett språk för att välja element från ett XML -dokument. Eftersom HTML och XML följer samma dokumentstruktur kan XPath också användas för att välja element från en webbsida.

Att hitta och välja element från webbsidan är nyckeln till webbskrapning med Selenium. För att hitta och välja element från webbsidan kan du använda XPath -väljare i Selenium.







I den här artikeln kommer jag att visa dig hur du hittar och väljer element från webbsidor med XPath -väljare i Selenium med Selenium python -biblioteket. Så, låt oss komma igång.



Förkunskaper:

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



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

För att uppfylla kraven 4, 5 och 6, läs min artikel Introduktion till selen i Python 3 . Du kan hitta många artiklar om andra ämnen på LinuxHint.com . Var noga med att kolla in dem om du behöver hjälp.





Konfigurera en projektkatalog:

För att hålla allt organiserat, skapa en ny projektkatalog selen-xpath/ som följer:

$mkdir -pvselen-xpath/förare



Navigera till selen-xpath/ projektkatalog enligt följande:

$CDselen-xpath/

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

$virtualenv .venv

Aktivera den virtuella miljön enligt följande:

$källa.venv/am/Aktivera

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

$ pip3 installera selen

Ladda ner och installera alla nödvändiga webbdrivrutiner i förare/ projektkatalog. Jag har förklarat processen för nedladdning och installation av webbdrivrutiner i min artikel Introduktion till selen i Python 3 .

Skaffa XPath Selector med Chrome Developer Tool:

I det här avsnittet kommer jag att visa dig hur du hittar XPath-väljaren för det webbsida som du vill välja med Selenium med hjälp av det inbyggda utvecklarverktyget i webbläsaren Google Chrome.

För att få XPath -väljaren med webbläsaren Google Chrome öppnar du Google Chrome och besöker webbplatsen från vilken du vill extrahera data. 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 + I för att öppna Chrome Developer Tool .

Chrome Developer Tool bör öppnas.

För att hitta HTML -representationen för ditt önskade webbsidaelement, klicka på Inspektera (

) -ikon, som markeras på skärmdumpen nedan.

Håll sedan muspekaren över önskat webbsidedel 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 fliken på Chrome Developer Tool, som du kan se på skärmdumpen nedan.

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

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

Skaffa XPath Selector med Firefox Developer Tool:

I det här avsnittet kommer jag att visa dig hur du hittar XPath-väljaren för det webbsidedel du vill välja med Selenium med det inbyggda utvecklarverktyget i webbläsaren Mozilla Firefox.

För att få XPath -väljaren med webbläsaren Firefox öppnar du Firefox och besöker webbplatsen från vilken du vill extrahera data. 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 utvecklarverktyg .

Firefox utvecklarverktyg bör öppnas.

För att hitta HTML -representationen för ditt önskade webbsidaelement, klicka på Inspektera (

) -ikon, som markeras på skärmdumpen nedan.

Håll sedan muspekaren över önskat webbsidedel 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 fliken av Firefox utvecklarverktyg, som du kan se på skärmdumpen nedan.

För att få XPath -väljaren för ditt önskade element, välj elementet från Inspektör fliken av Firefox utvecklarverktyg och högerklicka (RMB) på den. Välj sedan Kopiera > XPath som markeras på skärmdumpen nedan.

XPath -väljaren för ditt önskade element ska se ut ungefär så här.

Extrahera data från webbsidor med XPath Selector:

I det här avsnittet kommer jag att visa dig hur du väljer webbsidaelement och extraherar data från dem med XPath -väljare med Selenium Python -biblioteket.

Skapa först ett nytt Python -skript ex01.py och skriv in följande koderader.

frånselenimporterawebbdriver
frånselen.webbdriver.allmänning.nycklar importeraNycklar
frånselen.webbdriver.allmänning.förbi importeraFörbi
alternativ=webbdriver.ChromeOptions()
alternativ.huvudlös = Sann
webbläsare=webbdriver.Krom(körbar_väg='./drivers/chromedriver',
alternativ=alternativ)
webbläsare.skaffa sig('https://www.unixtimestamp.com/')
tidsstämpel=webbläsare.hitta_element_by_xpath('/html/body/div [1]/div [1]
/div [2]/div [1]/div/div/h3 [2] '
)
skriva ut('Aktuell tidsstämpel: %s'%(tidsstämpel.text.dela('')[0]))
webbläsare.stänga()

När du är klar, spara ex01.py Python -skript.

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

Rad 5 skapar ett Chrome Options -objekt och rad 6 möjliggör huvudlöst läge för webbläsaren Chrome.

Rad 8 skapar en Chrome webbläsare objekt med hjälp av kromförare binärt från förare/ projektkatalog.

Rad 10 säger till webbläsaren att ladda webbplatsen unixtimestamp.com.

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

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

Jag har kopierat XPath -väljaren för den markerade h2 element från unixtimestamp.com med hjälp av Chrome Developer Tool.

Rad 14 stänger webbläsaren.

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

$ python3 ex01.py

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

Här har jag använt browser.find_element_by_xpath (väljare) metod. Den enda parametern för denna metod är väljare, som är elementet XPath -väljare.

Istället för browser.find_element_by_xpath () metod kan du också använda browser.find_element (By, selector) metod. Denna metod kräver två parametrar. Den första parametern Förbi kommer vara By.XPATH eftersom vi kommer att använda XPath -väljaren och den andra parametern väljare kommer att vara själva XPath -väljaren. Resultatet blir detsamma.

För att se hur browser.find_element () metod fungerar för XPath -väljaren, skapa ett nytt Python -skript ex02.py , kopiera och klistra in alla rader från ex01.py till ex02.py och ändra rad 12 som markeras på skärmdumpen nedan.

Som du kan se, Python -skriptet ex02.py ger samma resultat som ex01.py .

$ python3 ex02.py

De browser.find_element_by_xpath () och browser.find_element () metoder används för att hitta och välja ett enda element från webbsidor. Om du vill hitta och välja flera element med XPath -väljare måste du använda det browser.find_elements_by_xpath () eller browser.find_elements () metoder.

De browser.find_elements_by_xpath () metoden tar samma argument som browser.find_element_by_xpath () metod.

De browser.find_elements () metoden tar samma argument som browser.find_element () metod.

Låt oss se ett exempel på att extrahera en lista med namn med XPath -väljare från random-name-generator.info med Selenium Python -biblioteket.

Den oordnade listan ( tag) har en 10 vid taggar inuti var och en som innehåller ett slumpmässigt namn. XPath för att välja alla vid taggar inuti tagg i det här fallet är //*[@id = main]/div [3]/div [2]/ol // li

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

Skapa ett nytt Python -skript ex03.py och skriv in följande koderader i den.

frånselenimporterawebbdriver
frånselen.webbdriver.allmänning.nycklar importeraNycklar
frånselen.webbdriver.allmänning.förbi importeraFörbi
alternativ=webbdriver.ChromeOptions()
alternativ.huvudlös = Sann
webbläsare=webbdriver.Krom(körbar_väg='./drivers/chromedriver',
alternativ=alternativ)
webbläsare.skaffa sig('http://random-name-generator.info/')
namn=webbläsare.hitta_element_by_xpath('
//*[@id = 'main']/div [3]/div [2]/ol // li '
)
förnamninamn:
skriva ut(namn.text)
webbläsare.stänga()

När du är klar, spara ex03.py Python -skript.

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

Rad 10 säger till webbläsaren att ladda webbplatsen random-name-generator.info.

Rad 12 väljer namnlistan med browser.find_elements_by_xpath () metod. Denna metod använder XPath -väljaren //*[@id = main]/div [3]/div [2]/ol // li för att hitta namnlistan. Namnlistan lagras sedan i namn variabel.

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

Rad 16 stänger webbläsaren.

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

$ python3 ex03.py

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

Istället för att använda browser.find_elements_by_xpath () metod kan du också använda browser.find_elements () metod som tidigare. Det första argumentet med denna metod är Av.XPATH, och det andra argumentet är XPath -väljaren.

Att experimentera med browser.find_elements () metod, skapa ett nytt Python -skript ex04.py , kopiera alla koder från ex03.py till ex04.py och ändra rad 12 enligt markeringen på skärmdumpen nedan.

Du bör få samma resultat som tidigare.

$ python3 ex04.py

Grunderna i XPath Selector:

Utvecklarverktyget för webbläsaren Firefox eller Google Chrome genererar automatiskt XPath -väljaren. Men dessa XPath -väljare är ibland inte tillräckliga för ditt projekt. I så fall måste du veta vad en viss XPath -väljare gör för att bygga din XPath -väljare. I det här avsnittet kommer jag att visa dig grunderna i XPath -väljare. Då borde du kunna bygga din egen XPath -väljare.

Skapa en ny katalog www/ i din projektkatalog enligt följande:

$mkdir -vwww

Skapa en ny fil web01.html i www/ katalog och skriv in följande rader i den filen.


< html lång='på'>
< huvud >
< meta teckenuppsättning='UTF-8'>
< meta namn='viewport' innehåll='width = device-width, initial-scale = 1.0'>
< titel >Grundläggande HTML -dokument</ titel >
</ huvud >
< kropp >
< h1 >Hej världen</ h1 >
</ kropp >
</ html >

När du är klar, spara web01.html fil.

Kör en enkel HTTP -server på port 8080 med följande kommando:

$ python3 -m http.server--katalog www/8080

HTTP -servern ska starta.

Du bör kunna komma åt web01.html fil med URL: en http: // localhost: 8080/web01.html , som du kan se på skärmdumpen nedan.

Medan Firefox eller Chrome Developer Tool öppnas trycker du på + F för att öppna sökrutan. Du kan skriva in din XPath -väljare här och se vad den väljer mycket enkelt. Jag kommer att använda det här verktyget under hela det här avsnittet.

En XPath -väljare börjar med en snedstreck (/) för det mesta. Det är som ett Linux -katalogträd. De / är roten till alla element på webbsidan.

Det första elementet är html . Så XPath -väljaren /html väljer hela html märka.

Inuti html tag, vi har en kropp märka. De kropp taggen kan väljas med XPath -väljaren /html/body

De h1 rubriken är inuti kropp märka. De h1 rubrik kan väljas med XPath -väljaren /html/body/h1

Denna typ av XPath -väljare kallas en absolut vägväljare. I absolut sökväg måste du gå igenom webbsidan från roten (/) på sidan. Nackdelen med en absolut sökväg är att även en liten ändring av webbsidans struktur kan göra din XPath -väljare ogiltig. Lösningen på detta problem är en relativ eller delvis XPath -väljare.

För att se hur relativ sökväg eller delvis sökväg fungerar, skapa en ny fil web02.html i www/ katalog och skriv in följande koderader i den.


< html lång='på'>
< huvud >
< meta teckenuppsättning='UTF-8'>
< meta namn='viewport' innehåll='width = device-width, initial-scale = 1.0'>
< titel >Grundläggande HTML -dokument</ titel >
</ huvud >
< kropp >
< h1 >Hej världen</ h1 >

< div >
< sid >detta är budskap</ sid >
</ div >

< div >
< spänna >Hej världen</ spänna >
</ div >
</ kropp >
</ html >

När du är klar, spara web02.html filen och ladda den i din webbläsare.

Som du kan se, XPath -väljaren // div/s väljer sid tagg inuti div märka. Detta är ett exempel på en relativ XPath -väljare.

Relativ XPath -väljare börjar med // . Sedan anger du strukturen för det element du vill välja. I detta fall, div/s .

Så, // div/s betyder välj sid element inuti a div element, spelar ingen roll vad som kommer före det.

Du kan också välja element med olika attribut som id , klass , typ, etc. med XPath -väljaren. Låt oss se hur man gör det.

Skapa en ny fil web03.html i www/ katalog och skriv in följande koderader i den.


< html lång='på'>
< huvud >
< meta teckenuppsättning='UTF-8'>
< meta namn='viewport' innehåll='width = device-width, initial-scale = 1.0'>
< titel > Grundläggande HTML -dokument</ titel >
</ huvud >
< kropp >
< h1 > Hej världen</ h1 >
< div klass='container1'>
< sid > detta är ett meddelande</ sid >
< spänna > detta är ett annat meddelande</ spänna >
</ div >
< div klass='container1'>
< h2 > rubrik2</ h2 >
< sid > Vissa människor
klokt att välja smärtor, besvär, de som inte faller för den utvalda
inte enkla flyg och andra bra tjänster? Varifrån eller var är han född?</ sid >
</ div >

< spänna id='footer-msg'> det här är en sidfot</ spänna >
</sidfot>
</ kropp >
</ html >

När du är klar, spara web03.html filen och ladda den i din webbläsare.

Låt oss säga att du vill välja alla div element som har klass namn behållare1 . För att göra det kan du använda XPath -väljaren // div [@class = ’container1 ′]

Som du kan se har jag två element som matchar XPath -väljaren // div [@class = ’container1 ′]

För att välja den första div element med klass namn behållare1 , Lägg till [1] i slutet av XPath välj, som visas på skärmdumpen nedan.

På samma sätt kan du välja det andra div element med klass namn behållare1 med XPath -väljaren // div [@class = ’container1 ′] [2]

Du kan välja element med id också.

Till exempel för att välja elementet som har id av footer-msg , kan du använda XPath -väljaren //*[@id = ’footer-msg’]

Här, * innan [@id = ’footer-msg’] används för att välja vilket element som helst oavsett deras tagg.

Det är grunderna i XPath -väljaren. Nu ska du kunna skapa din egen XPath -väljare för dina selenprojekt.

Slutsats:

I den här artikeln har jag visat dig hur du hittar och väljer element från webbsidor med hjälp av XPath -väljaren med Selenium Python -biblioteket. Jag har också diskuterat de vanligaste XPath -väljarna. Efter att ha läst den här artikeln bör du känna dig ganska säker på att välja element från webbsidor med hjälp av XPath -väljaren med Selenium Python -biblioteket.