Come fare uno screenshot con selenio
Diversi browser Web utilizzano motori di rendering diversi per rendere le pagine Web. Quindi, lo stesso codice frontend potrebbe non renderlo allo stesso modo in tutti i browser Web. Per risolvere questo problema, potrebbe essere necessario aggiungere alcuni codici frontend specifici del browser sul tuo sito Web. Tuttavia, questa non è l'unica parte difficile quando si progetta un sito Web compatibile con browser e dispositivi diversi. Controllare manualmente come appare il sito Web in ciascuno dei browser mirati. Dovresti aprire tutti i browser Web mirati, visitare la pagina Web, attendere il caricamento della pagina e confrontare le pagine rese tra loro. Per risparmiare tempo, è possibile utilizzare la funzionalità di screenshot Selenium per prendere automaticamente screenshot del tuo sito Web in ciascuno dei browser mirati e confrontare le immagini da solo. Questo è molto più veloce del metodo manuale. Questo articolo ti mostrerà come fare screenshot delle finestre del browser usando il selenio.
Prerequisiti
Per provare i comandi e gli esempi discussi in 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) Il pacchetto Python Virtualenv installato sul tuo computer.
5) Mozilla Firefox e browser Web di Google Chrome installati sul tuo computer.
6) Conoscenza di come installare il driver GECKO Firefox e il driver Web Chrome sul tuo sistema.
Per soddisfare i requisiti 4, 5 e 6, puoi leggere il mio articolo Introduzione al selenio con Python 3 a Linuxhint.com.
Puoi trovare molti altri articoli sugli argomenti richiesti su LinuxHint.com. Assicurati di controllare questi articoli se hai bisogno di ulteriore assistenza.
Impostazione di una directory di progetto
Per mantenere tutto organizzato, crea la nuova directory del progetto selenio-screenshot/, come segue:
$ mkdir -pv selenium -screenshot/immagini, driver
Navigare verso il selenio-screenshot/ Directory del progetto, come segue:
$ cd selenio-screenshot/
Crea un ambiente virtuale Python nella directory del progetto, come segue:
$ virtualenv .Venv
Attiva l'ambiente virtuale, come segue:
$ fonte .venv/bin/attiva
Installa il selenio usando PIP3, come segue:
$ PIP3 Installa selenioScarica e installa il driver Web richiesto in autisti/ directory del progetto. Ho spiegato il processo di download e installazione di Web driver nell'articolo Introduzione al selenio con Python 3. Se hai bisogno di assistenza su questo argomento, cerca Linuxhint.com per questo articolo.
Nozioni di base per l'assunzione di screenshot con selenio
Questa sezione ti darà un esempio molto semplice di prendere screenshot del browser con selenio.
Innanzitutto, crea un nuovo script Python Ex01_Google-Chrome.Py e digitare le seguenti righe di codici nello script.
dal webdriver di import selenioda selenio.Webdriver.comune.tasti di importazione delle chiavi
googlechromeoptions = webdriver.cromo.opzioni.Opzioni()
Googlechromeoptions.senza testa = vero
Googlechromeoptions.add_argument ('-finestra-size = 1280.720')
googlechrome = webdriver.Chrome (Executable_Path = "./driver/cromedriver ",
opzioni = googlechromeoptions)
PageURL = "https: // www.W3Schools.com ";
Google Chrome.get (Pageurl)
Google Chrome.Save_screenshot ('Images/W3Schools_Google-Chrome.png ')
Google Chrome.vicino()
Una volta terminato, salva il Ex01_Google-Chrome.Py Script di Python.
La riga 4 crea un Opzioni oggetto per il browser Web di Google Chrome.
La riga 5 abilita la modalità senza testa per Google Chrome.
La riga 6 imposta la dimensione della finestra su 1280 × 720 pixel.
La riga 8 crea un oggetto browser usando il driver Chrome e lo memorizza in Google Chrome variabile.
La riga 10 definisce a Pageurl variabile. IL Pageurl La variabile contiene l'URL della pagina web che il selenio sarà screenshot.
La riga 11 carica il Pageurl nel browser.
La riga 12 utilizza il salva_screenshot () Metodo per salvare uno screenshot della finestra del browser nel file w3schools_google-chrome.png nel immagini/ directory del progetto.
Infine, la linea 14 chiude il browser.
Quindi, esegui il Ex01_Google-Chrome.Py Python Script, come segue:
$ python3 ex01_google-chrome.PyDurante l'esecuzione riuscita dello script, lo screenshot verrà salvato nel file di immagine w3schools_google-chrome.png nel immagini/ Directory del progetto, come puoi vedere nello screenshot seguente.
Per fare uno screenshot dello stesso sito Web ma nel browser Web Firefox, crea il nuovo script Python ex01_firefox.Py e digitare le seguenti righe di codici nello script.
dal webdriver di import selenioda selenio.Webdriver.comune.tasti di importazione delle chiavi
FireFoxoptions = WebDriver.Firefox.opzioni.Opzioni()
Firefoxoptions.senza testa = vero
Firefoxoptions.add_argument ('-larghezza = 1280')
Firefoxoptions.add_argument ('-altezza = 720')
Firefox = WebDriver.Firefox (Executable_Path = "./driver/geckodriver ", options = Firefoxoptions)
PageURL = "https: // www.W3Schools.com ";
Firefox.get (Pageurl)
Firefox.Save_screenshot ('Images/W3Schools_Firefox.png ')
Firefox.vicino()
Una volta terminato, salva il ex01_firefox.Py Script di Python.
La riga 4 crea un Opzioni oggetto per il browser Web Firefox.
La riga 5 consente la modalità senza testa per Firefox.
La riga 6 imposta la larghezza della finestra del browser su 1280 pixel e la linea 7 imposta l'altezza della finestra del browser su 720 pixel.
La riga 9 crea un oggetto browser usando il driver di geco Firefox e lo memorizza nel Firefox variabile.
La riga 11 definisce a Pageurl variabile. IL Pageurl La variabile contiene l'URL della pagina web che il selenio sarà screenshot.
La riga 13 carica il Pageurl Sul browser.
La riga 14 utilizza il salva_screenshot () Metodo per salvare uno screenshot della finestra del browser nel file w3schools_firefox.png nel immagini/ directory del progetto.
Infine, la linea 15 chiude il browser.
Quindi, esegui il ex01_firefox.Py Python Script, come segue:
$ python3 ex01_firefox.PyDurante l'esecuzione riuscita dello script, lo screenshot dovrebbe essere salvato nel file di immagine w3schools_firefox.png nel immagini/ Directory del progetto, come puoi vedere nello screenshot seguente.
Prendendo screenshot di diverse risoluzioni dello schermo
Questa sezione ti mostrerà come fare screenshot della stessa pagina web in diverse risoluzioni dello schermo. In questa sezione, utilizzerò il browser Web di Google Chrome, ma puoi utilizzare Firefox o qualsiasi altro browser per questa sezione.
Innanzitutto, crea il nuovo script Python ex02.Py e digitare le seguenti righe di codice nello script.
dal webdriver di import selenioda selenio.Webdriver.comune.tasti di importazione delle chiavi
PageURL = "https: // www.W3Schools.com/";
Resolutions = ['320.1080', '500.1080', '720.1080', '1366.1080', '1920.1080']
per la risoluzione nelle risoluzioni:
Stampa ("Prendi screenshot per la risoluzione % s ..." % (risoluzione.sostituire (',', 'x')))
Chromeoptions = WebDriver.Chromeoptions ()
Cromeopzioni.senza testa = vero
Cromeopzioni.add_argument ('-finestra-size =' + risoluzione)
Chrome = WebDriver.Chrome (Executable_Path = "./driver/Chromedriver ", options = Chromeoptions)
cromo.get (Pageurl)
outputimage = 'immagini/homepage_chrome_' + risoluzione.Sostituisci (',', '_') + '.png '
cromo.Save_screenshot (outputImage)
cromo.vicino()
Stampa ('salvato a %s.' % (outputImage))
Una volta terminato, salva il ex02.Py Script di Python.
La riga 4 definisce a Pageurl variabile che contiene l'URL della pagina web, vorrei prendere screenshot in diverse risoluzioni dello schermo.
La riga 5 definisce a risoluzioni Elenco che detiene un elenco delle risoluzioni che vorrei prendere screenshot di.
La riga 7 itera attraverso ciascuno dei risoluziones nel risoluzioni elenco.
All'interno del ciclo, la riga 8 stampa un messaggio significativo sulla console.
Righe 10-15 Creare un oggetto browser con il risoluzione dell'attuale iterazione del ciclo e la memorizza nel cromo variabile.
La riga 17 carica il Pageurl nel browser.
La riga 19 genera un percorso dell'immagine, in cui lo screenshot verrà salvato e memorizza l'immagine nel outputimage variabile.
La riga 20 prende uno screenshot della finestra del browser e la memorizza nel percorso outputimage.
La riga 21 chiude il browser.
La riga 22 stampa un messaggio significativo sulla console e termina il loop.
Quindi, il ciclo ricomincia con la risoluzione della schermata successiva (i.e., L'elemento dell'elenco successivo).
Quindi, esegui il ex02.Py Python Script, come segue:
$ Python3 Ex02.PyLa sceneggiatura di Python ex02.Py dovrebbe prendere screenshot dell'URL dato in ciascuna delle risoluzioni dello schermo scelte.
Screenshot di W3Schools.com in larghezza di 320 pixel.
Screenshot di W3Schools.com in larghezza di 500 pixel.
Screenshot di W3Schools.com in 720 pixel di larghezza.
Screenshot di W3Schools.com in 1366 pixel di larghezza.
Screenshot di W3Schools.com nel 1920 pixel larghezza.
Se si confrontano gli screenshot, dovresti vedere che l'interfaccia utente cambia con la larghezza della finestra del browser. Utilizzando la funzionalità di screenshot Selenium, puoi vedere come il tuo sito Web appare su risoluzioni di schermo diverse in modo rapido e semplice.
Conclusione
Questo articolo ti ha mostrato alcune delle basi dell'assunzione di screenshot usando i driver Web Selenium e Chrome e Firefox. L'articolo ti ha anche mostrato come prendere screenshot in diverse risoluzioni dello schermo. Questo dovrebbe aiutarti a iniziare con la funzione di screenshot Selenium.