Hvordan ta et skjermbilde med selen

Selen er et flott verktøy for nettlesertesting, nettautomatisering og nettskraping. Du kan også bruke Selenium til å ta skjermbilder av websiden din. Dette er veldig viktig for å teste brukergrensesnittet (UI) på nettstedet ditt i forskjellige nettlesere.

Ulike nettlesere bruker forskjellige gjengivelsesmotorer for å gjengi nettsider. Så den samme frontend-koden gjengis kanskje ikke på samme måte i alle nettlesere. For å løse dette problemet, må du kanskje legge til noen nettleserspesifikke frontend-koder på nettstedet ditt. Dette er imidlertid ikke den eneste vanskelige delen når du designer et nettsted som er kompatibelt med forskjellige nettlesere og enheter. Det kan være tidkrevende å sjekke hvordan nettstedet ser ut i hver av dine målrettede nettlesere. Du må åpne alle målrettede nettlesere, gå til nettsiden, vente på at siden skal lastes inn, og sammenligne de gjengitte sidene med hverandre. For å spare tid kan du bruke Selenium-skjermbildefunksjonen til å automatisk ta skjermbilder av nettstedet ditt i hver av dine målrettede nettlesere, og sammenligne bildene selv. Det er mye raskere enn den manuelle metoden. Denne artikkelen viser deg hvordan du tar skjermbilder av nettleservinduer ved hjelp av Selenium.

Forutsetninger

For å prøve kommandoene og eksemplene som er diskutert i denne artikkelen, må du ha:

1) En Linux-distribusjon (helst Ubuntu) installert på datamaskinen din.
2) Python 3 installert på datamaskinen din.
3) PIP 3 installert på datamaskinen din.
4) Python-pakken virtualenv installert på datamaskinen.
5) Mozilla Firefox og Google Chrome nettlesere installert på datamaskinen din.
6) Kunnskap om hvordan du installerer Firefox Gecko Driver og Chrome Web Driver på systemet ditt.

For å oppfylle kravene 4, 5 og 6 kan du lese artikkelen min Introduksjon til selen med Python 3 på Linuxhint.com.

Du kan finne mange andre artikler om de nødvendige emnene på LinuxHint.com. Husk å sjekke ut disse artiklene hvis du trenger ytterligere hjelp.

Sette opp en prosjektkatalog

For å holde alt organisert, opprett den nye prosjektkatalogen selen-skjermdump /, som følger:

$ mkdir -pv selen-screenshot / images, drivers

Naviger til selen-skjermbilde / prosjektkatalog, som følger:

$ cd selen-screenshot /

Opprett et virtuelt Python-miljø i prosjektkatalogen, som følger:

$ virtualenv .venv

Aktiver det virtuelle miljøet som følger:

$ kilde .venv / bin / aktiver

Installer Selen med PIP3, som følger:

$ pip3 installer selen

Last ned og installer den nødvendige nettdriveren i drivere / katalog av prosjektet. Jeg forklarte prosessen med å laste ned og installere nettdrivere i artikkelen Introduksjon til selen med Python 3. Hvis du trenger hjelp med dette emnet, søk LinuxHint.com for denne artikkelen.

Grunnleggende om å ta skjermbilder med selen

Denne delen vil gi deg et veldig enkelt eksempel på å ta skjermbilder i nettleseren med Selenium.

Først oppretter du et nytt Python-skript ex01_google-krom.py og skriv følgende linjer med koder i skriptet.

fra selen import webdriver
fra selen.webdriver.felles.nøkler importerer nøkler
googleChromeOptions = webdriver.krom.alternativer.Alternativer ()
googleChromeOptions.hodeløs = Sant
googleChromeOptions.add_argument ('- vindu-størrelse = 1280720')
googleChrome = webdriver.Chrome (executable_path = "./ drivere / chromedriver ",
alternativer = googleChromeOptions)
pageUrl = "https: // www.w3schools.com ";
googleChrome.få (pageUrl)
googleChrome.save_screenshot ('images / w3schools_google-chrome.png ')
googleChrome.Lukk()

Når du er ferdig, lagrer du ex01_google-krom.py Python-skript.

Linje 4 skaper en Alternativer objekt for Google Chrome-nettleseren.

Linje 5 muliggjør hodeløs modus for Google Chrome.

Linje 6 setter vindusstørrelsen til 1280 × 720 piksler.

Linje 8 oppretter et nettleserobjekt ved hjelp av Chrome-driveren og lagrer det i googleChrome variabel.

Linje 10 definerer a sideUrl variabel. De sideUrl variabel inneholder nettadressen til websiden som Selen vil skjermbilde.

Linje 11 laster inn sideUrl i nettleseren.

Linje 12 bruker save_screenshot () metode for å lagre et skjermbilde av nettleservinduet i filen w3schools_google-chrome.png i Bilder/ katalog av prosjektet.

Endelig stenger linje 14 nettleseren.

Kjør deretter ex01_google-krom.py Python-skript, som følger:

$ python3 ex01_google-chrome.py

Ved vellykket gjennomføring av skriptet lagres skjermbildet i bildefilen w3schools_google-chrome.png i Bilder/ katalog av prosjektet, som du kan se på skjermbildet nedenfor.

For å ta et skjermbilde av det samme nettstedet, men i Firefox-nettleseren, oppretter du det nye Python-skriptet ex01_firefox.py og skriv følgende linjer med koder i skriptet.

fra selen import webdriver
fra selen.webdriver.felles.nøkler importerer nøkler
firefoxOptions = webdriver.Firefox.alternativer.Alternativer ()
firefoxAlternativer.hodeløs = Sant
firefoxAlternativer.add_argument ('- bredde = 1280')
firefoxAlternativer.add_argument ('- høyde = 720')
firefox = nettdriver.Firefox (executable_path = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3schools.com ";
Firefox.få (pageUrl)
Firefox.save_screenshot ('bilder / w3schools_firefox.png ')
Firefox.Lukk()

Når du er ferdig, lagrer du ex01_firefox.py Python-skript.

Linje 4 skaper en Alternativer objekt for Firefox-nettleseren.

Linje 5 muliggjør hodeløs modus for Firefox.

Linje 6 setter nettleservinduets bredde til 1280 piksler, og linje 7 setter nettleservinduets høyde til 720 piksler.

Linje 9 oppretter et nettleserobjekt ved hjelp av Firefox Gecko-driveren og lagrer det i Firefox variabel.

Linje 11 definerer a sideUrl variabel. De sideUrl variabel inneholder nettadressen til websiden som Selen vil skjermbilde.

Linje 13 laster inn sideUrl i nettleseren.

Linje 14 bruker save_screenshot () metode for å lagre et skjermbilde av nettleservinduet i filen w3schools_firefox.png i Bilder/ katalog av prosjektet.

Endelig stenger linje 15 nettleseren.

Kjør deretter ex01_firefox.py Python-skript, som følger:

$ python3 ex01_firefox.py

Ved vellykket gjennomføring av skriptet, bør skjermbildet lagres i bildefilen w3schools_firefox.png i Bilder/ katalog av prosjektet, som du kan se på skjermbildet nedenfor.

Ta skjermbilder av forskjellige skjermoppløsninger

Denne delen viser deg hvordan du tar skjermbilder av samme webside i forskjellige skjermoppløsninger. I denne delen vil jeg bruke Google Chrome-nettleseren, men du kan bruke Firefox eller en hvilken som helst annen nettleser for denne delen.

Først oppretter du det nye Python-skriptet ex02.py og skriv følgende kodelinjer i skriptet.

fra selen import webdriver
fra selen.webdriver.felles.nøkler importerer nøkler
pageUrl = "https: // www.w3schools.com / ";
oppløsninger = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
for oppløsning i oppløsninger:
print ("Ta skjermbilde for oppløsning% s ..."% (oppløsning.erstatt (',', 'x')))
chromeOptions = webdriver.ChromeOptions ()
kromalternativer.hodeløs = Sant
kromalternativer.add_argument ('- window-size =' + oppløsning)
krom = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", options = chromeOptions)
krom.få (pageUrl)
outputImage = 'images / homepage_chrome_' + oppløsning.erstatt (',', '_') + '.png '
krom.save_screenshot (outputImage)
krom.Lukk()
skriv ut ('Lagret til% s.'% (outputImage))

Når du er ferdig, lagrer du ex02.py Python-skript.

Linje 4 definerer a sideUrl variabel som inneholder nettsidens URL Jeg vil ta skjermbilder av i forskjellige skjermoppløsninger.

Linje 5 definerer a oppløsninger liste som inneholder en liste over oppløsningene jeg vil ta skjermbilder av.

Linje 7 går gjennom hver av Vedtaks i oppløsninger liste.

Inne i løkken skriver Line 8 ut en meningsfull melding på konsollen.

Linje 10-15 oppretter et nettleserobjekt med Vedtak av gjeldende loop-iterasjon og lagrer den i krom variabel.

Linje 17 laster inn sideUrl i nettleseren.

Linje 19 genererer en bildebane der skjermbildet lagres og lagrer bildet i outputImage variabel.

Linje 20 tar et skjermbilde av nettleservinduet og lagrer det i banen outputImage.

Linje 21 lukker nettleseren.

Linje 22 skriver ut en meningsfylt melding på konsollen og avslutter løkken.

Deretter starter sløyfen igjen med neste skjermoppløsning (i.e., neste listeelement).

Kjør deretter ex02.py Python-skript, som følger:

$ python3 ex02.py

Python-skriptet ex02.py bør ta skjermbilder av den angitte URL-en i hver av de valgte skjermoppløsninger.

Skjermbilde av w3schools.com i 320 piksler bredde.

Skjermbilde av w3schools.com i 500 piksler bredde.

Skjermbilde av w3schools.com i 720 piksler bredde.

Skjermbilde av w3schools.com i 1366 piksler bredde.

Skjermbilde av w3schools.com i 1920 piksler bredde.

Hvis du sammenligner skjermbildene, bør du se at brukergrensesnittet endres med bredden på nettleservinduet. Ved å bruke skjermbildefunksjonen på Selen kan du raskt og enkelt se hvordan nettstedet ditt ser ut på forskjellige skjermoppløsninger.

Konklusjon

Denne artikkelen viste deg noen av det grunnleggende om å ta skjermbilder ved hjelp av Selenium og Chrome og Firefox nettdrivere. Artikkelen viste deg også hvordan du tar skjermbilder i forskjellige skjermoppløsninger. Dette skal hjelpe deg med å komme i gang med Selenium-skjermbildefunksjonen.