Hvordan ta et skjermbilde med Selenium

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

Ulike nettlesere bruker forskjellige gjengivelsesmotorer for å gjengi websider. Så den samme frontendkoden kan ikke gjengi på samme måte i alle nettlesere. For å løse dette problemet, kan det hende du må legge til noen nettleserspesifikke frontend-koder på nettstedet ditt. Det er imidlertid ikke den eneste vanskelige delen når du designer et nettsted som er kompatibelt med forskjellige nettlesere og enheter. Å sjekke hvordan nettstedet ser ut i hver av dine målrettede nettlesere kan være tidkrevende. Du må åpne alle målrettede nettlesere, besøke nettsiden, vente på at siden skal laste og sammenligne de gjengitte sidene med hverandre. For å spare tid, kan du bruke selenskjermbildet Selenium. Det er mye raskere enn den manuelle metoden. Denne artikkelen vil vise deg hvordan du tar skjermbilder av nettleservinduer ved hjelp av Selenium.

Forutsetninger

For å prøve ut kommandoene og eksemplene som er omtalt 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 din.
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 Hos Linuxhint.com.

Du kan finne mange andre artikler om de nødvendige emnene på Linuxhint.com. Sørg for å sjekke ut disse artiklene hvis du trenger ekstra hjelp.

Sette opp en prosjektkatalog

For å holde alt organisert, lag den nye prosjektkatalogen selen-skjermbilde/, følgende:

$ mkdir -pv selen -screenshot/bilder, drivere

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

$ CD Selenium-skjermbilde/

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

$ virtualenv .Venv

Aktiver det virtuelle miljøet, som følger:

$ kilde .Venv/bin/aktiverer

Installer selen ved hjelp av PIP3, som følger:

$ pip3 installer selen

Last ned og installer den nødvendige nettdriveren i drivere/ Katalogen til prosjektet. Jeg forklarte prosessen med å laste ned og installere webdriver i artikkelen Introduksjon til selen med Python 3. Hvis du trenger hjelp til 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 nettleserskjermbilder med Selenium.

Lag først et nytt Python -skript ex01_google-krom.py og skriv inn følgende koder i skriptet.

Fra Selenium Import WebDriver
fra Selenium.Webdriver.felles.nøkler importerer nøkler
googlechromeOptions = webdriver.krom.alternativer.Alternativer ()
GooglechromeOptions.Hodeløs = sant
GooglechromeOptions.add_argument ('-vindusstørrelse = 1280,720')
googlechrome = webdriver.Krom (kjørbar_path = "./drivere/kromdriver ",
Alternativer = googlechromeoptions)
pageurl = "https: // www.W3Schools.com ";
Googlechrome.Get (PageUrl)
Googlechrome.save_screenshot ('bilder/w3schools_google-chrome.png ')
Googlechrome.Lukk()

Når du er ferdig, kan du lagre ex01_google-krom.py Python -manus.

Linje 4 skaper en Alternativer Objekt for Google Chrome nettleser.

Linje 5 Aktiverer hodeløs modus for Google Chrome.

Linje 6 Angir vindusstørrelse 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 holder nettadressen til websiden som selen vil skjermbilde.

Linje 11 laster sideurl i nettleseren.

Linje 12 bruker save_screenshot () Metode for å lagre et skjermbilde av nettleservinduet til filen W3Schools_Google-Chrome.png i Bilder/ Katalogen til prosjektet.

Endelig lukker linje 14 nettleseren.

Neste, løp ex01_google-krom.py Python -manus, som følger:

$ python3 ex01_google-krom.py

Ved vellykket utførelse av skriptet vil skjermbildet bli lagret i bildefilen W3Schools_Google-Chrome.png i Bilder/ Katalogen til prosjektet, som du kan se på skjermdumpen nedenfor.

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

Fra Selenium Import WebDriver
fra Selenium.Webdriver.felles.nøkler importerer nøkler
FirefoxOptions = WebDriver.Firefox.alternativer.Alternativer ()
Firefoxoptions.Hodeløs = sant
Firefoxoptions.add_argument ('-bredde = 1280')
Firefoxoptions.add_argument ('-høyde = 720')
Firefox = Webdriver.Firefox (kjørbar_path = "./Drivere/Geckodriver ", Alternativer = FirefoxOptions)
pageurl = "https: // www.W3Schools.com ";
Firefox.Get (PageUrl)
Firefox.save_screenshot ('bilder/w3schools_firefox.png ')
Firefox.Lukk()

Når du er ferdig, kan du lagre ex01_firefox.py Python -manus.

Linje 4 skaper en Alternativer objekt for Firefox nettleser.

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

Linje 6 Angir nettleservindubredden til 1280 piksler, og linje 7 Angir nettleservinduhøyden til 720 piksler.

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

Linje 11 definerer en sideurl variabel. De sideurl Variabel holder nettadressen til websiden som selen vil skjermbilde.

Linje 13 laster sideurl på nettleseren.

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

Endelig lukker linje 15 nettleseren.

Neste, løp ex01_firefox.py Python -manus, som følger:

$ python3 ex01_firefox.py

Ved vellykket utførelse av skriptet, bør skjermbildet lagres i bildefilen w3schools_firefox.png i Bilder/ Katalogen til prosjektet, som du kan se på skjermdumpen nedenfor.

Tar skjermbilder av forskjellige skjermoppløsninger

Denne delen vil vise 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.

Lag først det nye Python -skriptet EX02.py og skriv inn følgende kodelinjer i skriptet.

Fra Selenium Import WebDriver
fra Selenium.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 resolusjoner:
trykk ("tar skjermbilde for oppløsning % s ..." % (oppløsning.erstatte (',', 'x')))
ChromeOptions = WebDriver.ChromeOptions ()
kromoptions.Hodeløs = sant
kromoptions.add_argument ('-vindusstørrelse =' + oppløsning)
Chrome = webdriver.Krom (kjørbar_path = "./Drivere/Chromedriver ", Options = ChromeOptions)
krom.Get (PageUrl)
outputImage = 'bilder/homepage_chrome_' + oppløsning.erstatte (',', '_') + '.png '
krom.save_screenshot (outputImage)
krom.Lukk()
trykk ('lagret til %s.' % (outputImage)))

Når du er ferdig, kan du lagre EX02.py Python -manus.

Linje 4 definerer en sideurl Variabel som holder nettsiden til websiden jeg vil ta skjermbilder av i forskjellige skjermoppløsninger.

Linje 5 definerer en resolusjoner Liste som har en liste over resolusjonene jeg vil ta skjermbilder av.

Linje 7 itererer gjennom hver av Vedtaks i resolusjoner liste.

Inne i sløyfen skriver linje 8 ut en meningsfull melding på konsollen.

Linjer 10-15 Opprett et nettleserobjekt med Vedtak av den gjeldende sløyfe -iterasjonen og lagrer den i krom variabel.

Linje 17 laster sideurl i nettleseren.

Linje 19 genererer en bildebane, der skjermbildet vil bli lagret, 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 meningsfull melding på konsollen og avslutter loopen.

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

Neste, løp EX02.py Python -manus, som følger:

$ Python3 EX02.py

Python -skriptet EX02.py bør ta skjermbilder av den gitte URL -en i hver av de valgte skjermoppløsningene.

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 hjelp av selenskjermbildet kan du se hvordan nettstedet ditt ser ut på forskjellige skjermoppløsninger raskt og enkelt.

Konklusjon

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