Phenquestions
Forskellige webbrowsere bruger forskellige gengivelsesmotorer til at gengive websider. Så den samme frontend-kode gengives muligvis ikke på samme måde i alle webbrowsere. For at løse dette problem skal du muligvis tilføje nogle browserspecifikke frontend-koder på dit websted. Det er dog ikke den eneste hårde del, når du designer et websted, der er kompatibelt med forskellige browsere og enheder. Manuel kontrol af, hvordan hjemmesiden ser ud i hver af dine målrettede browsere, kan være tidskrævende. Du bliver nødt til at åbne alle dine målrettede webbrowsere, besøge websiden, vente på at siden indlæses og sammenligne de gengivne sider med hinanden. For at spare tid kan du bruge Selenium-skærmbilledfunktionen til automatisk at tage skærmbilleder af dit websted i hver af dine målrettede browsere og sammenligne billederne selv. Det er meget hurtigere end den manuelle metode. Denne artikel viser dig, hvordan du tager skærmbilleder af browservinduer ved hjælp af Selenium.
Forudsætninger
For at prøve de kommandoer og eksempler, der er diskuteret i denne artikel, skal du have:
1) En Linux-distribution (helst Ubuntu) installeret på din computer.
2) Python 3 installeret på din computer.
3) PIP 3 installeret på din computer.
4) Python-pakken virtualenv installeret på din computer.
5) Mozilla Firefox og Google Chrome webbrowsere installeret på din computer.
6) Viden om, hvordan du installerer Firefox Gecko Driver og Chrome Web Driver på dit system.
For at opfylde kravene 4, 5 og 6 kan du læse min artikel Introduktion til selen med Python 3 på Linuxhint.com.
Du kan finde mange andre artikler om de krævede emner på LinuxHint.com. Sørg for at tjekke disse artikler, hvis du har brug for yderligere hjælp.
Opsætning af et projektmappe
For at holde alt organiseret skal du oprette den nye projektmappe selen-skærmbillede /, som følger:
$ mkdir -pv selenium-screenshot / billeder, drivere
Naviger til selen-skærmbillede / projektmappe som følger:
$ cd selen-screenshot /
Opret et virtuelt Python-miljø i projektmappen som følger:
$ virtualenv .venv
Aktiver det virtuelle miljø som følger:
$ kilde .venv / bin / aktiver
Installer Selen ved hjælp af PIP3 som følger:
$ pip3 installer selen
Download og installer den krævede webdriver i drivere / projektmappe. Jeg forklarede processen med at downloade og installere webdrivere i artiklen Introduktion til selen med Python 3. Hvis du har brug for hjælp til dette emne, skal du søge LinuxHint.com til denne artikel.
Grundlæggende om at tage skærmbilleder med selen
Dette afsnit giver dig et meget simpelt eksempel på at tage browserskærmbilleder med Selenium.
Opret først et nyt Python-script ex01_google-krom.py og skriv følgende linjer med koder i scriptet.
fra selen import webdriverfra selen.webdriver.almindelige.nøgler importerer nøgler
googleChromeOptions = webdriver.krom.muligheder.Muligheder()
googleChromeOptions.headless = Sandt
googleChromeOptions.add_argument ('- vinduesstørrelse = 1280,720')
googleChrome = webdriver.Chrome (eksekverbar_sti = "./ drivere / chromedriver ",
optioner = googleChromeOptions)
pageUrl = "https: // www.w3skoler.com ";
googleChrome.få (pageUrl)
googleChrome.save_screenshot ('images / w3schools_google-chrome.png ')
googleChrome.tæt()
Når du er færdig, skal du gemme ex01_google-krom.py Python-script.
Linje 4 opretter en Muligheder objekt til Google Chrome-webbrowseren.
Linje 5 muliggør hovedløs tilstand til Google Chrome.
Linje 6 indstiller vinduesstørrelsen til 1280 × 720 pixels.
Linje 8 opretter et browserobjekt ved hjælp af Chrome-driveren og gemmer det i googleChrome variabel.
Linje 10 definerer a sideUrl variabel. Det sideUrl variabel indeholder URL'en til den webside, som Selen vil screenshot.
Linje 11 indlæser sideUrl i browseren.
Linie 12 bruger save_screenshot () metode til at gemme et skærmbillede af browservinduet i filen w3schools_google-krom.png i billeder / projektmappe.
Endelig lukker linje 14 browseren.
Kør derefter ex01_google-krom.py Python-script som følger:
$ python3 ex01_google-krom.py
Efter vellykket udførelse af scriptet gemmes skærmbilledet i billedfilen w3schools_google-krom.png i billeder / projektmappe, som du kan se i skærmbilledet nedenfor.
For at tage et screenshot af det samme websted, men i Firefox-webbrowseren, skal du oprette det nye Python-script ex01_firefox.py og skriv følgende linjer med koder i scriptet.
fra selen import webdriverfra selen.webdriver.almindelige.nøgler importerer nøgler
firefoxOptions = webdriver.Firefox.muligheder.Muligheder()
firefoxMuligheder.headless = Sandt
firefoxMuligheder.add_argument ('- bredde = 1280')
firefoxMuligheder.add_argument ('- højde = 720')
firefox = webdriver.Firefox (eksekverbar_sti = "./ drivers / geckodriver ", optioner = firefoxOptions)
pageUrl = "https: // www.w3skoler.com ";
Firefox.få (pageUrl)
Firefox.save_screenshot ('images / w3schools_firefox.png ')
Firefox.tæt()
Når du er færdig, skal du gemme ex01_firefox.py Python-script.
Linie 4 opretter en Muligheder objekt til Firefox-webbrowseren.
Linje 5 muliggør hovedløs tilstand til Firefox.
Linje 6 indstiller browservinduets bredde til 1280 pixels, og linje 7 indstiller browservinduets højde til 720 pixels.
Linje 9 opretter et browserobjekt ved hjælp af Firefox Gecko-driveren og gemmer det i Firefox variabel.
Linie 11 definerer a sideUrl variabel. Det sideUrl variabel indeholder URL'en til den webside, som Selen vil screenshot.
Linie 13 indlæser sideUrl i browseren.
Linje 14 bruger save_screenshot () metode til at gemme et skærmbillede af browservinduet i filen w3schools_firefox.png i billeder / projektmappe.
Endelig lukker linje 15 browseren.
Kør derefter ex01_firefox.py Python-script som følger:
$ python3 ex01_firefox.py
Efter vellykket udførelse af scriptet skal skærmbilledet gemmes i billedfilen w3schools_firefox.png i billeder / projektmappe, som du kan se i skærmbilledet nedenfor.
Tager skærmbilleder af forskellige skærmopløsninger
Dette afsnit viser dig, hvordan du tager skærmbilleder af den samme webside i forskellige skærmopløsninger. I dette afsnit bruger jeg Google Chrome-webbrowseren, men du kan bruge Firefox eller en hvilken som helst anden browser til dette afsnit.
Opret først det nye Python-script ex02.py og skriv følgende kodelinjer i scriptet.
fra selen import webdriverfra selen.webdriver.almindelige.nøgler importerer nøgler
pageUrl = "https: // www.w3skoler.com / ";
opløsninger = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
til opløsning i resolutioner:
udskrive ("Tager skærmbillede til opløsning% s ..."% (opløsning.udskift (',', 'x')))
chromeOptions = webdriver.Chrome-valg ()
chromeValg.headless = Sandt
chromeValg.add_argument ('- window-size =' + opløsning)
krom = webdriver.Chrome (eksekverbar_sti = "./ drivers / chromedriver ", optioner = chromeOptions)
krom.få (pageUrl)
outputImage = 'images / homepage_chrome_' + opløsning.udskift (',', '_') + '.png '
krom.save_screenshot (outputImage)
krom.tæt()
udskriv ('Gemt til% s.'% (outputImage))
Når du er færdig, skal du gemme ex02.py Python-script.
Linie 4 definerer a sideUrl variabel, der indeholder websides URL, jeg vil gerne tage skærmbilleder af i forskellige skærmopløsninger.
Linje 5 definerer a beslutninger liste, der indeholder en liste over de opløsninger, jeg gerne vil tage skærmbilleder af.
Linje 7 gentager sig gennem hver af løsninger i beslutninger liste.
Inde i sløjfen udskriver linje 8 en meningsfuld besked på konsollen.
Linjer 10-15 opretter et browserobjekt med løsning af den nuværende loop-iteration og gemmer den i krom variabel.
Linje 17 indlæser sideUrl i browseren.
Linje 19 genererer en billedsti, hvor skærmbilledet gemmes og gemmer billedet i outputImage variabel.
Linje 20 tager et screenshot af browservinduet og gemmer det i stien outputImage.
Linie 21 lukker browseren.
Linie 22 udskriver en meningsfuld besked på konsollen og afslutter sløjfen.
Derefter starter sløjfen igen med den næste skærmopløsning (i.e., det næste listeelement).
Kør derefter ex02.py Python-script som følger:
$ python3 ex02.py
Python-scriptet ex02.py skal tage skærmbilleder af den givne URL i hver af de valgte skærmopløsninger.
Skærmbillede af w3skoler.com i 320 pixels bredde.
Skærmbillede af w3skoler.com i 500 pixels bredde.
Skærmbillede af w3skoler.com i 720 pixel bredde.
Skærmbillede af w3skoler.com i 1366 pixels bredde.
Skærmbillede af w3skoler.com i 1920 pixels bredde.
Hvis du sammenligner skærmbillederne, skal du se, at brugergrænsefladen ændres med bredden på browservinduet. Ved hjælp af Selenium screenshot-funktionen kan du hurtigt og nemt se, hvordan dit websted ser ud på forskellige skærmopløsninger.
Konklusion
Denne artikel viste dig nogle af de grundlæggende i at tage skærmbilleder ved hjælp af Selenium og Chrome og Firefox webdrivere. Artiklen viste dig også, hvordan du tager skærmbilleder i forskellige skærmopløsninger. Dette skal hjælpe dig med at komme i gang med Selenium-skærmbilledfunktionen.
