Phenquestions
Olika webbläsare använder olika renderingsmotorer för att rendera webbsidor. Så samma frontend-kod återges kanske inte på samma sätt i alla webbläsare. För att lösa problemet kan du behöva lägga till några webbläsarspecifika frontend-koder på din webbplats. Det är dock inte den enda svåra delen när man utformar en webbplats som är kompatibel med olika webbläsare och enheter. Det kan vara tidskrävande att manuellt kontrollera hur webbplatsen ser ut i var och en av dina riktade webbläsare. Du måste öppna alla dina riktade webbläsare, besöka webbsidan, vänta på att sidan laddas och jämföra de renderade sidorna med varandra. För att spara tid kan du använda Selenium-skärmdumpfunktionen för att automatiskt ta skärmdumpar av din webbplats i var och en av dina riktade webbläsare och jämföra bilderna själv. Det är mycket snabbare än den manuella metoden. Den här artikeln visar hur du tar skärmdumpar av webbläsarfönster med Selenium.
Förutsättningar
För att prova de kommandon och exempel som diskuteras i 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-paketet virtualenv installerad på din dator.
5) Mozilla Firefox och Google Chrome webbläsare installerade på din dator.
6) Kunskap om hur du installerar Firefox Gecko Driver och Chrome Web Driver på ditt system.
För att uppfylla kraven 4, 5 och 6 kan du läsa min artikel Introduktion till Selen med Python 3 på Linuxhint.com.
Du kan hitta många andra artiklar om de obligatoriska ämnena på LinuxHint.com. Var noga med att kolla in dessa artiklar om du behöver ytterligare hjälp.
Ställa in en projektkatalog
Skapa den nya projektkatalogen för att hålla allt ordnat selen-skärmdump /, som följer:
$ mkdir -pv selen-skärmdump / bilder, drivrutiner
Navigera till selen-skärmdump / projektkatalog enligt följande:
$ cd selen-skärmdump /
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 Selen med PIP3 enligt följande:
$ pip3 installera selen
Ladda ner och installera den nödvändiga webbdrivrutinen i förare / projektkatalogen. Jag förklarade processen för nedladdning och installation av webbdrivrutiner i artikeln Introduktion till Selen med Python 3. Om du behöver hjälp med detta ämne, sök LinuxHint.com för den här artikeln.
Grunderna för att ta skärmdumpar med selen
Detta avsnitt ger dig ett mycket enkelt exempel på hur du tar skärmdumpar i webbläsaren med Selenium.
Skapa först ett nytt Python-skript ex01_google-krom.py och skriv följande koderader i skriptet.
från selenimportwebdriverfrån selen.webbdrivare.allmänning.nycklar importerar nycklar
googleChromeOptions = webbdrivare.krom.alternativ.Alternativ()
googleChromeOptions.headless = Sant
googleChromeOptions.add_argument ('- window-size = 1280,720')
googleChrome = webdriver.Chrome (executable_path = "./ drivrutiner / kromförare ",
alternativ = googleChromeOptions)
pageUrl = "https: // www.w3schools.com ";
googleChrome.få (pageUrl)
googleChrome.save_screenshot ('images / w3schools_google-chrome.png ')
googleChrome.stänga()
När du är klar sparar du ex01_google-krom.py Python-skript.
Rad 4 skapar en alternativ objekt för webbläsaren Google Chrome.
Linje 5 möjliggör headless-läge för Google Chrome.
Rad 6 ställer in fönsterstorleken till 1280 × 720 pixlar.
Linje 8 skapar ett webbläsarobjekt med hjälp av Chrome-drivrutinen och lagrar det i googleChrome variabel.
Rad 10 definierar a pageUrl variabel. De pageUrl variabel innehåller webbadressen till den webbsida som Selen kommer att skärmdumpa.
Rad 11 laddar pageUrl i webbläsaren.
Linje 12 använder save_screenshot () metod för att spara en skärmdump av webbläsarfönstret i filen w3schools_google-krom.png i bilder/ projektkatalogen.
Slutligen stänger rad 14 webbläsaren.
Kör sedan ex01_google-krom.py Python-skript, enligt följande:
$ python3 ex01_google-krom.py
Vid framgångsrikt körning av skriptet sparas skärmdumpen i bildfilen w3schools_google-krom.png i bilder/ projektkatalogen, som du kan se på skärmdumpen nedan.
Om du vill ta en skärmdump av samma webbplats men i Firefox-webbläsaren skapar du det nya Python-skriptet ex01_firefox.py och skriv följande koderader i skriptet.
från selenimportwebdriverfrån selen.webbdrivare.allmänning.nycklar importerar nycklar
firefoxOptions = webbdrivare.Firefox.alternativ.Alternativ()
firefoxalternativ.headless = Sant
firefoxalternativ.add_argument ('- bredd = 1280')
firefoxalternativ.add_argument ('- höjd = 720')
firefox = webdriver.Firefox (executable_path = "./ drivers / geckodriver ", optioner = firefoxOptions)
pageUrl = "https: // www.w3schools.com ";
Firefox.få (pageUrl)
Firefox.save_screenshot ('images / w3schools_firefox.png ')
Firefox.stänga()
När du är klar sparar du ex01_firefox.py Python-skript.
Rad 4 skapar en alternativ objekt för webbläsaren Firefox.
Linje 5 möjliggör headless-läge för Firefox.
Rad 6 ställer in webbläsarens fönsterbredd till 1280 pixlar och rad 7 ställer in webbläsarens fönsterhöjd till 720 pixlar.
Linje 9 skapar ett webbläsarobjekt med Firefox Gecko-drivrutinen och lagrar det i Firefox variabel.
Rad 11 definierar a pageUrl variabel. De pageUrl variabel innehåller webbadressen till den webbsida som Selen kommer att skärmdumpa.
Linje 13 laddar pageUrl i webbläsaren.
Linje 14 använder save_screenshot () metod för att spara en skärmdump av webbläsarfönstret i filen w3schools_firefox.png i bilder/ projektkatalogen.
Slutligen stänger rad 15 webbläsaren.
Kör sedan ex01_firefox.py Python-skript, enligt följande:
$ python3 ex01_firefox.py
Vid framgångsrikt körning av skriptet ska skärmdumpen sparas i bildfilen w3schools_firefox.png i bilder/ projektkatalogen, som du kan se på skärmdumpen nedan.
Ta skärmdumpar av olika skärmupplösningar
Det här avsnittet visar hur du tar skärmdumpar av samma webbsida i olika skärmupplösningar. I det här avsnittet kommer jag att använda webbläsaren Google Chrome, men du kan använda Firefox eller någon annan webbläsare för detta avsnitt.
Skapa först det nya Python-skriptet ex02.py och skriv följande kodrader i skriptet.
från selenimportwebdriverfrån selen.webbdrivare.allmänning.nycklar importerar nycklar
pageUrl = "https: // www.w3schools.com / ";
upplösningar = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
för resolution i resolutioner:
skriv ut ("Tar skärmdump för upplösning% s ..."% (upplösning.ersätt (',', 'x')))
chromeOptions = webbdrivare.ChromeOptions ()
chromealternativ.headless = Sant
chromealternativ.add_argument ('- window-size =' + upplösning)
krom = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", optioner = chromeOptions)
krom.få (pageUrl)
outputImage = 'images / homepage_chrome_' + upplösning.ersätt (',', '_') + '.png '
krom.save_screenshot (outputImage)
krom.stänga()
skriv ut ('Sparat till% s.'% (outputImage))
När du är klar sparar du ex02.py Python-skript.
Rad 4 definierar a pageUrl variabel som innehåller webbsidans URL Jag vill ta skärmdumpar av i olika skärmupplösningar.
Rad 5 definierar a resolutioner lista som innehåller en lista över de resolutioner som jag vill ta skärmdumpar av.
Linje 7 itererar genom var och en av upplösnings i resolutioner lista.
Inuti slingan skriver Line 8 ut ett meningsfullt meddelande på konsolen.
Rad 10-15 skapar ett webbläsarobjekt med upplösning av den nuvarande loop-iterationen och lagrar den i krom variabel.
Rad 17 laddar pageUrl i webbläsaren.
Rad 19 genererar en bildsökväg där skärmdumpen sparas och lagrar bilden i outputImage variabel.
Linje 20 tar en skärmdump av webbläsarfönstret och lagrar den i sökvägen outputImage.
Rad 21 stänger webbläsaren.
Rad 22 skriver ut ett meningsfullt meddelande på konsolen och avslutar slingan.
Sedan börjar slingan igen med nästa skärmupplösning (i.e., nästa lista).
Kör sedan ex02.py Python-skript, enligt följande:
$ python3 ex02.py
Python-skriptet ex02.py ska ta skärmdumpar av den angivna webbadressen i var och en av de valda skärmupplösningarna.
Skärmdump av w3schools.com i 320 pixlar bredd.
Skärmdump av w3schools.com i 500 pixlar bredd.
Skärmdump av w3schools.com i 720 pixlar bredd.
Skärmdump av w3schools.com i 1366 pixlar bredd.
Skärmdump av w3schools.com i 1920 pixlar bredd.
Om du jämför skärmdumparna bör du se att användargränssnittet ändras med webbläsarfönstrets bredd. Med hjälp av Selenium skärmdumpfunktion kan du se hur din webbplats ser ut på olika skärmupplösningar snabbt och enkelt.
Slutsats
Den här artikeln visade dig några av grunderna för att ta skärmdumpar med Selenium och Chrome och Firefox webbdrivrutiner. Artikeln visade dig också hur du tar skärmdumpar i olika skärmupplösningar. Detta bör hjälpa dig att komma igång med Selenium-skärmdumpfunktionen.
