Phenquestions
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) Pitone virtualenv pacchetto installato sul tuo computer.
5) Browser web Mozilla Firefox o Google Chrome installati sul tuo computer.
6) Deve sapere come installare Firefox Gecko Driver o Chrome Web Driver.
Per soddisfare i requisiti 4, 5 e 6, leggi il mio articolo Introduzione al selenio con Python 3 su Linuxhint.come.
Puoi trovare molti articoli sugli altri argomenti su LinuxHint.come. Assicurati di controllarli se hai bisogno di assistenza.
Configurazione di una directory di progetto:
Per mantenere tutto organizzato, crea una nuova directory di progetto selenio-css-selettore/ come segue:
$ mkdir -pv selenium-css-selector/drivers
Vai a selenio-css-selettore/ directory del progetto come segue:
$ cd selenio-css-selettore/
Crea un ambiente virtuale Python nella directory del progetto come segue:
$ virtualenv .venv
Attiva l'ambiente virtuale come segue:
$ fonte .venv/bin/activate
Installa la libreria Selenium Python usando PIP3 come segue:
$ pip3 installa selenio
Scarica e installa tutti i driver web necessari nel autisti/ directory del progetto. Ho spiegato il processo di download e installazione dei driver web nel mio articolo Introduzione al selenio con Python 3. Se hai bisogno di assistenza, cerca su LinuxSuggerimento.come per quell'articolo.
Ottieni il selettore CSS utilizzando lo strumento per sviluppatori di Chrome:
In questa sezione, ti mostrerò come trovare il selettore CSS dell'elemento della pagina web che desideri selezionare con Selenium utilizzando lo strumento per sviluppatori integrato nel browser web Google Chrome.
Per ottenere il selettore CSS utilizzando il browser web Google Chrome, apri Google Chrome e visita il sito web da cui vuoi estrarre i dati. Quindi, premere il tasto 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
Strumento per sviluppatori Chrome dovrebbe essere aperto.
Per trovare la rappresentazione HTML dell'elemento della pagina Web desiderato, fare clic su Ispezionare() icona come indicato nello screenshot qui sotto.
Quindi, passa il mouse sull'elemento della pagina Web desiderato e premi il pulsante sinistro del mouse (LMB) per selezionarlo.
La rappresentazione HTML dell'elemento web che hai selezionato sarà evidenziata nel Elementi scheda di Strumento per sviluppatori Chrome come puoi vedere nello screenshot qui sotto.
Per ottenere il selettore CSS dell'elemento desiderato, seleziona l'elemento dal Elementi scheda di Strumento per sviluppatori Chrome e fai clic con il pulsante destro del mouse (RMB) su di esso. Quindi, seleziona copia > Selettore copia Copy come indicato nello screenshot qui sotto.
Ho incollato il selettore CSS in un editor di testo. Il selettore CSS appare come mostrato nello screenshot qui sotto.
Ottieni il selettore CSS utilizzando Firefox Developer Tool:
In questa sezione, ti mostrerò come trovare il selettore CSS dell'elemento della pagina Web che desideri selezionare con Selenium utilizzando lo strumento di sviluppo integrato nel 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 i dati. Quindi, premere il tasto 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 della pagina Web desiderato, fare clic su Ispezionare() icona come indicato nello screenshot qui sotto.
Quindi, passa il mouse sull'elemento della pagina Web desiderato e premi il pulsante sinistro del mouse (LMB) per selezionarlo.
La rappresentazione HTML dell'elemento web che hai selezionato sarà evidenziata nel Ispettore scheda di Strumento per sviluppatori Firefox come puoi vedere nello screenshot qui sotto.
Per ottenere il selettore CSS dell'elemento desiderato, seleziona l'elemento dal Ispettore scheda di Strumento per sviluppatori Firefox e fai clic con il pulsante destro del mouse (RMB) su di esso. Quindi, seleziona copia > Selettore CSS come indicato nello screenshot qui sotto.
Il selettore CSS dell'elemento desiderato dovrebbe essere simile a questo.
Estrazione dei dati utilizzando il selettore CSS con selenio:
In questa sezione, ti mostrerò come selezionare gli elementi della pagina Web ed estrarre i dati da essi utilizzando i selettori CSS con la libreria Selenium Python.
Per prima cosa, crea un nuovo script Python ex00.pi e digita le seguenti righe di codici.
dal webdriver di importazione del seleniodal selenio.webdriver.Comune.chiavi di importazione chiavi
dal selenio.webdriver.Comune.per importazione da
opzioni = driver web.Opzioni Chrome()
opzioni.senza testa = Vero
browser = driver web.Chrome(executable_path="./drivers/chromeddriver", opzioni=opzioni)
browser.get("https://www.unixtimestamp.com/")
timestamp = browser.find_element_by_css_selector('h3.text-danger:nth-child(3)')
print('Timestamp attuale: %s' % (timestamp.testo.dividere(")[0]))
browser.vicino()
Una volta che hai finito, salva il ex00.pi Script Python.
La riga 1-3 importa tutti i componenti di selenio richiesti.
La riga 5 crea un oggetto Opzioni di Chrome e la riga 6 abilita la modalità headless per il browser web Chrome.
La riga 8 crea un Chrome browser oggetto usando il chromedriver binario da autisti/ directory del progetto.
La riga 10 indica al browser di caricare il sito Web unixtimestamp.come.
La riga 12 trova l'elemento che ha i dati del timestamp dalla pagina utilizzando il selettore CSS e lo memorizza nel marca temporale variabile.
La riga 13 analizza i dati del timestamp dall'elemento e li stampa sulla console.
Ecco come la struttura HTML dei dati di timestamp UNIX in unixtimestamp.com sembra.
La riga 14 chiude il browser.
Esegui lo script Python ex00.pi come segue:
$ python3 ex00.pi
Come puoi vedere, i dati del timestamp sono stampati sullo schermo.
Ecco, ho usato il browser.find_element(Da, selettore) metodo.
Poiché stiamo usando i selettori CSS, il primo parametro sarà Di.CSS_SELECTOR e il secondo parametro sarà il selettore CSS stesso.
Invece di browser.trova_elemento() metodo, puoi anche usare browser.find_element_by_css_selector(selettore) metodo. Questo metodo necessita solo di un selettore CSS per funzionare. Il risultato sarà lo stesso.
Il browser.trova_elemento() e browser.find_element_by_css_selector() i metodi sono usati per trovare e selezionare un singolo elemento dalla pagina web. Se vuoi trovare e selezionare più elementi usando i selettori CSS, allora devi usare browser.trova_elementi() e browser.find_elements_by_css_selector() metodi.
Il browser.trova_elementi() il metodo accetta gli stessi argomenti di browser.trova_elemento() metodo.
Il browser.find_elements_by_css_selector() il metodo accetta lo stesso argomento di browser.find_element_by_css_selector() metodo.
Vediamo un esempio di estrazione di un elenco di nomi utilizzando i selettori CSS dal generatore di nomi casuali.informazioni con selenio.
Come puoi vedere, l'elenco non ordinato ha il nome della classe Lista di nomi. Quindi, possiamo usare il selettore CSS .nameList li per selezionare tutti i nomi dalla pagina web.
Esaminiamo un esempio di selezione di più elementi dalla pagina Web utilizzando i selettori CSS.
Crea un nuovo script Python ex01.pi e digita le seguenti righe di codici al suo interno.
dal webdriver di importazione del seleniodal selenio.webdriver.Comune.chiavi di importazione chiavi
dal selenio.webdriver.Comune.per importazione da
opzioni = driver web.Opzioni Chrome()
opzioni.senza testa = Vero
browser = driver web.Chrome(executable_path="./drivers/chromeddriver", opzioni=opzioni)
browser.get("http://generatore-nome-casuale.Informazioni/")
nomi = browser.find_elements(Per.CSS_SELECTOR, '.nameList li')
per nome nei nomi:
print(nome.testo)
browser.vicino()
Una volta che hai finito, salva il ex01.pi Script Python.
La riga 1-8 è la stessa di in ex00.pi Script Python. Quindi, non li spiegherò di nuovo qui.
La riga 10 indica al browser di caricare il generatore di nomi casuali del sito Web.Informazioni.
La riga 12 seleziona l'elenco dei nomi utilizzando il browser.trova_elementi() metodo. Questo metodo utilizza il selettore CSS .nameList li per trovare l'elenco dei nomi. Quindi, l'elenco dei nomi viene memorizzato nel nomi variabile.
Nelle righe 13 e 14, a per loop viene utilizzato per scorrere il nomi elenca e stampa i nomi sulla console.
La riga 16 chiude il browser.
Esegui lo script Python ex01.pi come segue:
$ python3 ex01.pi
Come puoi vedere, i nomi vengono estratti dalla pagina web e stampati sulla console.
Invece di usare il browser.trova_elementi() 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 sui selettori CSS:
Puoi sempre trovare il selettore CSS di un elemento della pagina web utilizzando lo strumento per sviluppatori del browser web Firefox o Chrome. Questo selettore CSS generato automaticamente potrebbe non essere quello che desideri. A volte potresti dover scrivere il tuo selettore CSS.
In questa sezione, parlerò delle basi dei selettori CSS in modo che tu possa capire cosa sta selezionando un determinato selettore CSS da una pagina web e scrivere il tuo selettore CSS personalizzato, se necessario.
Se vuoi selezionare un elemento dalla pagina web usando l'ID Messaggio, il selettore CSS sarà #Messaggio.
Il selettore CSS .verde selezionerà un elemento usando un nome di classe verde.
Se vuoi selezionare un elemento (class msg) all'interno di un altro elemento (class 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 tutti i p tag, puoi usare il selettore CSS p.
Per selezionare solo il p tag all'interno del div tag, puoi usare il selettore CSS div p
Per selezionare il p tag che sono i fratelli diretti del div tag, puoi usare il selettore CSS div > p
Per selezionare tutti i span e p tag, puoi usare il selettore CSS p, span
Per selezionare il p tagga subito 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 tutti i p tag che hanno il nome della classe msg, puoi usare il selettore CSS p.msg
Per selezionare tutti i span tag che hanno il nome della classe msg, puoi usare il selettore CSS span.msg
Per selezionare tutti gli elementi che hanno l'attributo href, puoi usare il selettore CSS [riferimento]
Per selezionare l'elemento che ha l'attributo nome e il valore di nome l'attributo è nome utente, puoi usare il selettore CSS [nome=”nome utente”]
Per selezionare tutti gli elementi che hanno l'attributo alt e il valore di alt attributo contenente la sottostringa vscodice, puoi usare il selettore CSS [alt~=”vscode”]
Per selezionare tutti gli elementi che hanno il href attributo e il valore di href l'attributo inizia con la stringa https, puoi usare il selettore CSS [href^=”https”]
Per selezionare tutti gli elementi che hanno il href attributo e il valore di href attributo che termina con la stringa .come, puoi usare il selettore CSS [href$=”.com”]
Per selezionare tutti gli elementi che hanno il href attributo e il valore di href l'attributo ha la sottostringa Google, puoi usare il selettore CSS [href*="google"]
Se vuoi selezionare il primo li tag all'interno del ul tag, puoi usare il selettore CSS ul li: primo figlio
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: ultimo figlio
Se vuoi selezionare l'ultimo li tag all'interno del ul tag, puoi anche usare il selettore CSS ul li:nth-ultimo-figlio(1)
Se vuoi selezionare il secondo li tag all'interno del ul tag partendo dall'inizio, puoi usare il selettore CSS ul li:nth-bambino(2)
Se vuoi selezionare il terzo li tag all'interno del ul tag partendo dall'inizio, puoi usare il selettore CSS ul li:nth-child(3)
Se vuoi selezionare il secondo li tag all'interno del ul tag partendo dalla fine, puoi usare il selettore CSS ul li:nth-ultimo-figlio(2)
Se vuoi selezionare il terzo li tag all'interno del ul tag partendo dalla fine, puoi usare il selettore CSS ul li:nth-ultimo-figlio(3)
Questi sono i selettori CSS più comuni. Ti ritroverai a usarli quasi su tutti i progetti Selenium. Ci sono molti altri selettori CSS. Puoi trovare un elenco di tutti loro nelle w3schools.com Selettori CSS di riferimento.
Conclusione:
In questo articolo, ho mostrato come individuare e selezionare gli elementi della pagina Web utilizzando i selettori CSS con Selenium. Ho anche discusso le basi dei selettori CSS. Dovresti essere in grado di utilizzare i selettori CSS comodamente per i tuoi progetti Selenium.
