Individuazione degli elementi da parte dei selettori CSS con selenio
Prerequisiti:
Per provare i comandi e gli esempi di questo articolo, devi avere,
1) Una distribuzione Linux (preferibilmente Ubuntu) installata sul tuo computer.
2) Python 3 installato sul tuo computer.
3) PIP 3 installato sul tuo computer.
4) Python Virtualenv pacchetto installato sul tuo computer.
5) Mozilla Firefox o browser Web di Google Chrome installati sul tuo computer.
6) Deve sapere come installare il driver GECKO Firefox o il driver Web Chrome.
Per soddisfare i requisiti 4, 5 e 6, leggi il mio articolo Introduzione al selenio con Python 3 a Linuxhint.com.
Puoi trovare molti articoli sugli altri argomenti su Linuxhint.com. Assicurati di verificarli se hai bisogno di assistenza.
Impostazione di una directory del progetto:
Per mantenere tutto organizzato, crea una nuova directory di progetto Selenium-CSS-SELECTOR/ come segue:
$ MKDIR -PV Selenium-CSS-SELECTOR/DRIVERSNavigare verso il Selenium-CSS-SELECTOR/ Directory del progetto come segue:
$ cd selenio-css-selector/Crea un ambiente virtuale Python nella directory del progetto come segue:
$ virtualenv .VenvAttiva l'ambiente virtuale come segue:
$ fonte .venv/bin/attivaInstalla la libreria di Selenio Python utilizzando PIP3 come segue:
$ PIP3 Installa selenioScarica e installa tutto il driver Web richiesto in autisti/ directory del progetto. Ho spiegato il processo di download e installazione di Web driver nel mio articolo Introduzione al selenio con Python 3. Se hai bisogno di assistenza, cerca Linuxhint.com per quell'articolo.
Ottieni il selettore CSS utilizzando lo strumento di sviluppatore Chrome:
In questa sezione, ti mostrerò come trovare il selettore CSS dell'elemento pagina web che si desidera selezionare con selenio utilizzando lo strumento sviluppatore integrato del browser Web di Google Chrome.
Per ottenere il selettore CSS utilizzando il browser Web di Google Chrome, apri Google Chrome e visita il sito Web da cui si desidera estrarre dati. Quindi, premere il pulsante destro del mouse (RMB) su un'area vuota della pagina e fare clic su Ispezionare per aprire il Strumento per sviluppatori Chrome.
Puoi anche premere + Spostare + IO per aprire il Strumento per sviluppatori Chrome.
Strumento per sviluppatori Chrome dovrebbe essere aperto.
Per trovare la rappresentazione HTML dell'elemento pagina Web desiderato, fare clic su Ispezionare() icona come contrassegnato nello screenshot seguente.
Quindi, passaggi sull'elemento pagina Web desiderato e premi il pulsante sinistro del mouse (LMB) per selezionarlo.
La rappresentazione HTML dell'elemento Web selezionato verrà evidenziata nel Elementi scheda di Strumento per sviluppatori Chrome Come puoi vedere nello screenshot qui sotto.
Per ottenere il selettore CSS dell'elemento desiderato, selezionare l'elemento dal Elementi scheda di Strumento per sviluppatori Chrome e fare clic con il pulsante destro del mouse (RMB) su di esso. Quindi, seleziona copia > Copia selettore come contrassegnato nello screenshot seguente.
Ho incollato il selettore CSS in un editor di testo. Il selettore CSS sembra mostrato nello screenshot seguente.
Ottieni il selettore CSS utilizzando lo strumento Firefox Developer:
In questa sezione, ti mostrerò come trovare il selettore CSS dell'elemento pagina web che si desidera selezionare con selenio utilizzando lo strumento sviluppatore integrato del browser Web Mozilla Firefox.
Per ottenere il selettore CSS utilizzando il browser Web Firefox, aprire Firefox e visitare il sito Web da cui si desidera estrarre dati. Quindi, premere il pulsante destro del mouse (RMB) su un'area vuota della pagina e fare clic su Ispeziona Elemento (Q) per aprire il Strumento per sviluppatori Firefox.
Strumento per sviluppatori Firefox dovrebbe essere aperto.
Per trovare la rappresentazione HTML dell'elemento pagina Web desiderato, fare clic su Ispezionare() icona come contrassegnato nello screenshot seguente.
Quindi, passaggi sull'elemento pagina Web desiderato e premi il pulsante sinistro del mouse (LMB) per selezionarlo.
La rappresentazione HTML dell'elemento Web selezionato verrà evidenziata nel Ispettore scheda di Strumento per sviluppatori Firefox Come puoi vedere nello screenshot qui sotto.
Per ottenere il selettore CSS dell'elemento desiderato, selezionare l'elemento dal Ispettore scheda di Strumento per sviluppatori Firefox e fare clic con il pulsante destro del mouse (RMB) su di esso. Quindi, seleziona copia > Selettore CSS come contrassegnato nello screenshot seguente.
Il selettore CSS dell'elemento desiderato dovrebbe assomigliare a questo.
Estrazione di dati utilizzando il selettore CSS con selenio:
In questa sezione, ti mostrerò come selezionare gli elementi della pagina Web ed estrarre dati da loro utilizzando selettori CSS con la libreria di selenio Python.
Innanzitutto, crea un nuovo script Python Ex00.Py e digitare le seguenti righe di codici.
dal webdriver di import selenioda selenio.Webdriver.comune.tasti di importazione delle chiavi
da selenio.Webdriver.comune.per importazione da
Opzioni = WebDriver.Chromeoptions ()
opzioni.senza testa = vero
browser = webdriver.Chrome (Executable_Path = "./driver/chromedriver ", options = options)
browser.get ("https: // www.UnixTimestamp.com/")
timestamp = browser.find_element_by_css_selector ('H3.Testo-canale: nth-child (3) ')
Stampa ('Timestamp corrente: % s' % (timestamp.testo.split (") [0]))
browser.vicino()
Una volta che hai finito, salva il Ex00.Py Script di Python.
La linea 1-3 importa tutti i componenti di selenio richiesti.
La riga 5 crea un oggetto Opzioni Chrome e la riga 6 abilita la modalità senza testa per il browser Web Chrome.
La riga 8 crea un cromo browser oggetto usando il Chromedriver binario dal autisti/ directory del progetto.
La riga 10 dice al browser di caricare il sito Web unixtimestamp.com.
La riga 12 trova l'elemento che ha i dati Timestamp dalla pagina utilizzando CSS Selector e lo memorizza nel timestamp variabile.
La riga 13 analizza i dati del timestamp dall'elemento e li stampa sulla console.
Questo è il modo in cui la struttura HTML dei dati del timestamp unix in unixtimestamp.com sembra.
La riga 14 chiude il browser.
Esegui lo script Python Ex00.Py come segue:
$ python3 ex00.PyCome puoi vedere, i dati Timestamp vengono stampati sullo schermo.
Qui, ho usato il browser.find_element (by, selettore) metodo.
Dato che stiamo usando i selettori CSS, il primo parametro sarà Di.Css_selector e il secondo parametro sarà il selettore CSS stesso.
Invece di browser.find_element () Metodo, puoi anche usare browser.find_element_by_css_selector (selettore) metodo. Questo metodo richiede solo un selettore CSS per funzionare. Il risultato sarà lo stesso.
IL browser.find_element () E browser.find_element_by_css_selector () I metodi vengono utilizzati per trovare e selezionare un singolo elemento dalla pagina web. Se si desidera trovare e selezionare più elementi utilizzando i selettori CSS, è necessario utilizzare browser.find_elements () E browser.find_elements_by_css_selector () metodi.
IL browser.find_elements () Il metodo prende gli stessi argomenti del browser.find_element () metodo.
IL browser.find_elements_by_css_selector () Il metodo prende lo stesso argomento del browser.find_element_by_css_selector () metodo.
Vediamo un esempio di estrazione di un elenco di nomi utilizzando i selettori CSS dal generatore di nome casuale.Informazioni con selenio.
Come puoi vedere, l'elenco non ordinato ha il nome di classe Lista di nomi. Quindi, possiamo usare il selettore CSS .Namelist Li Per selezionare tutti i nomi dalla pagina Web.
Passiamo attraverso un esempio di selezione di più elementi dalla pagina Web utilizzando i selettori CSS.
Crea un nuovo script Python ex01.Py e digitare le seguenti righe di codici in esso.
dal webdriver di import selenioda selenio.Webdriver.comune.tasti di importazione delle chiavi
da selenio.Webdriver.comune.per importazione da
Opzioni = WebDriver.Chromeoptions ()
opzioni.senza testa = vero
browser = webdriver.Chrome (Executable_Path = "./driver/chromedriver ", options = options)
browser.get ("http: // casual-name-generator.informazioni/")
nomi = browser.find_elements (by.Css_selector, '.Namelist Li ')
per il nome nei nomi:
Stampa (nome.testo)
browser.vicino()
Una volta che hai finito, salva il ex01.Py Script di Python.
La riga 1-8 è la stessa di in Ex00.Py Script di Python. Quindi, non li spiegherò di nuovo qui.
La riga 10 indica al browser di caricare il sito-generico casuale del sito Web.informazioni.
La riga 12 seleziona l'elenco dei nomi usando il browser.find_elements () metodo. Questo metodo utilizza il selettore CSS .Namelist Li Per trovare l'elenco dei nomi. Quindi, l'elenco dei nomi è archiviato in nomi variabile.
Nelle righe 13 e 14, a per Loop è usato per iterare attraverso il nomi Elenca e stampa i nomi sulla console.
La riga 16 chiude il browser.
Esegui lo script Python ex01.Py come segue:
$ Python3 Ex01.PyCome puoi vedere, i nomi vengono estratti dalla pagina web e stampati sulla console.
Invece di usare il browser.find_elements () metodo, puoi anche usare il browser.find_elements_by_css_selector () il metodo come prima. Questo metodo richiede solo un selettore CSS per funzionare. Il risultato sarà lo stesso.
Nozioni di base dei selettori CSS:
Puoi sempre trovare il selettore CSS di un elemento della pagina Web utilizzando lo strumento sviluppatore di Firefox o Chrome Web Browser. Questo selettore CSS generato automaticamente potrebbe non essere quello che vuoi. A volte potresti dover scrivere il tuo selettore CSS.
In questa sezione, parlerò delle basi dei selettori CSS in modo da poter capire cosa sta selezionando un determinato selettore CSS da una pagina Web e scrivere il selettore CSS personalizzato se necessario.
Se si desidera selezionare un elemento dalla pagina Web utilizzando l'ID Messaggio, Il selettore CSS sarà #Messaggio.
Il selettore CSS .verde Selezionerà un elemento utilizzando un nome di classe verde.
Se si desidera selezionare un elemento (classe MSG) all'interno di un altro elemento (classe contenitore), il selettore CSS sarà .contenitore .MSG
Il selettore CSS .MSG.successo Selezionerà l'elemento che ha due classi CSS MSG E successo.
Per selezionare tutto il P Tag, è possibile utilizzare il selettore CSS P.
Per selezionare solo il P Tag all'interno del div Tag, è possibile utilizzare il selettore CSS Div p
Per selezionare il P tag che sono i fratelli diretti del div Tag, è possibile utilizzare il selettore CSS Div> p
Per selezionare tutto il arco E P Tag, è possibile utilizzare il selettore CSS p, span
Per selezionare il P tag immediatamente dopo il div tag, puoi usare il selettore CSS div + p
Per selezionare il P tag dopo il div tag, puoi usare il selettore CSS div ~ p
Per selezionare tutto il P Tag che hanno il nome di classe MSG, È possibile utilizzare il selettore CSS P.MSG
Per selezionare tutto il arco Tag che hanno il nome di classe MSG, È possibile utilizzare il selettore CSS arco.MSG
Per selezionare tutti gli elementi che hanno l'attributo Href, È possibile utilizzare il selettore CSS [Href]
Per selezionare l'elemento che ha l'attributo nome e il valore del nome L'attributo è nome utente, È possibile utilizzare il selettore CSS [name = "nome utente"]
Per selezionare tutti gli elementi che hanno l'attributo Al e il valore del Al attributo contenente la sottostringa VScode, È possibile utilizzare il selettore CSS [alt ~ = "VScode"]
Per selezionare tutti gli elementi che hanno il Href attributo e valore del Href L'attributo inizia con la stringa https, È possibile utilizzare il selettore CSS [href^= "https"]
Per selezionare tutti gli elementi che hanno il Href attributo e valore del Href attributo che termina con la stringa .com, È possibile utilizzare il selettore CSS [Href $ = ".com "]
Per selezionare tutti gli elementi che hanno il Href attributo e valore del Href L'attributo ha la sottostringa Google, È possibile utilizzare il selettore CSS [href*= "Google"]
Se vuoi selezionare il primo li tag all'interno del ul tag, puoi usare il selettore CSS Ul Li: First-Child
Se vuoi selezionare il primo li tag all'interno del ul tag, puoi anche usare il selettore CSS Ul Li: Nth-Child (1)
Se vuoi selezionare l'ultimo li tag all'interno del ul tag, puoi usare il selettore CSS Ul Li: Last-Child
Se vuoi selezionare l'ultimo li tag all'interno del ul tag, puoi anche usare il selettore CSS Ul Li: nth-ult-child (1)
Se si desidera selezionare il secondo li tag all'interno del ul Tag a partire dall'inizio, è possibile utilizzare il selettore CSS Ul Li: Nth-Child (2)
Se si desidera selezionare il terzo li tag all'interno del ul Tag a partire dall'inizio, è possibile utilizzare il selettore CSS Ul Li: Nth-Child (3)
Se si desidera selezionare il secondo li tag all'interno del ul Tag a partire dalla fine, è possibile utilizzare il selettore CSS Ul Li: nth-ult-child (2)
Se si desidera selezionare il terzo li tag all'interno del ul Tag a partire dalla fine, è possibile utilizzare il selettore CSS Ul Li: nth-ult-child (3)
Questi sono i selettori CSS più comuni. Ti ritroverai a usare questi quasi su tutti i progetti di selenio. Ci sono molti altri selettori CSS. Puoi trovare un elenco di tutti loro nelle W3Schools.riferimento dei selettori CSS.
Cnclusione:
In questo articolo, ho mostrato come individuare e selezionare gli elementi della pagina Web utilizzando i selettori CSS con selenio. Ho anche discusso delle basi dei selettori CSS. Dovresti essere in grado di utilizzare i selettori CSS comodamente per i tuoi progetti di selenio.