Phenquestions
Rôzne webové prehľadávače používajú na vykreslenie webových stránok rôzne vykresľovacie nástroje. Rovnaký kód rozhrania sa teda nemusí vykresľovať rovnako vo všetkých webových prehľadávačoch. Ak chcete vyriešiť tento problém, možno budete musieť na svoje webové stránky pridať niektoré frontendové kódy špecifické pre jednotlivé prehliadače. To však nie je jediná ťažká časť pri navrhovaní webových stránok kompatibilných s rôznymi prehliadačmi a zariadeniami. Ručná kontrola toho, ako webová stránka vyzerá v každom z vašich zacielených prehľadávačov, môže byť časovo náročná. Museli by ste otvoriť všetky svoje zacielené webové prehľadávače, navštíviť webovú stránku, počkať na načítanie stránky a navzájom porovnať vykreslené stránky. Ak chcete ušetriť čas, môžete použiť funkciu snímania obrazovky Selenium na automatické vytváranie snímok obrazovky vášho webu v každom z vašich zacielených prehliadačov a porovnávať obrázky sami. To je oveľa rýchlejšie ako pri manuálnej metóde. Tento článok vám ukáže, ako snímať snímky obrazoviek okien prehliadača pomocou selénu.
Predpoklady
Ak chcete vyskúšať príkazy a príklady popísané v tomto článku, musíte mať:
1) Vo vašom počítači je nainštalovaná distribúcia Linuxu (najlepšie Ubuntu).
2) Vo vašom počítači je nainštalovaný Python 3.
3) Vo vašom počítači je nainštalovaný program PIP 3.
4) Balík Python virtualenv nainštalovaný vo vašom počítači.
5) Vo vašom počítači sú nainštalované webové prehľadávače Mozilla Firefox a Google Chrome.
6) Znalosti o tom, ako do vášho systému nainštalovať ovládač Firefox Gecko a webový ovládač Chrome.
Aby ste splnili požiadavky 4, 5 a 6, môžete si prečítať môj článok Úvod do selénu v Pythone 3 v Linuxhint.com.
Mnoho ďalších článkov o požadovaných témach nájdete na stránke LinuxHint.com. Ak potrebujete ďalšiu pomoc, nezabudnite si tieto články pozrieť.
Nastavenie adresára projektu
Ak chcete mať všetko usporiadané, vytvorte nový adresár projektu selén - snímka obrazovky /, nasledovne:
$ mkdir -pv selenium-screenshot / obrázky, ovládače
Prejdite na ikonu selén-screenshot / adresár projektu takto:
$ cd selenium-screenshot /
V adresári projektu vytvorte virtuálne prostredie Python:
$ virtualenv .venv
Aktivujte virtuálne prostredie nasledovne:
$ zdroj .venv / bin / aktivovať
Nainštalujte selén pomocou PIP3 nasledovne:
$ pip3 nainštalujte selén
Stiahnite a nainštalujte požadovaný webový ovládač do vodiči / adresár projektu. Proces sťahovania a inštalácie webových ovládačov som vysvetlil v článku Úvod do selénu v Pythone 3. Ak potrebujete v tejto veci pomoc, vyhľadajte LinuxHint.com pre tento článok.
Základy vytvárania snímok obrazovky so selénom
V tejto časti nájdete veľmi jednoduchý príklad vytvárania snímok obrazovky prehliadača so selénom.
Najskôr vytvorte nový skript v jazyku Python ex01_google-chrome.py a do skriptu napíš nasledujúce riadky kódov.
z webového ovládača na selén na importzo selénu.webdriver.bežné.kľúče na import kľúčov
googleChromeOptions = webdriver.chróm.možnosti.Možnosti()
googleChromeOptions.bezhlavý = Pravda
googleChromeOptions.add_argument ('- veľkosť okna = 1280 720')
googleChrome = webdriver.Chrome (executable_path = "./ drivers / chromedriver ",
options = googleChromeOptions)
pageUrl = "https: // www.w3schools.com ";
googleChrome.získať (pageUrl)
googleChrome.save_sc Screenshot ('images / w3schools_google-chrome.png ')
googleChrome.Zavrieť()
Po dokončení uložte súbor ex01_google-chrome.py Skript v jazyku Python.
Riadok 4 vytvára možnosti objekt pre webový prehliadač Google Chrome.
Riadok 5 umožňuje bezhlavý režim pre Google Chrome.
Riadok 6 nastavuje veľkosť okna na 1280 × 720 pixelov.
Riadok 8 vytvorí objekt prehliadača pomocou ovládača Chrome a uloží ho do googleChrome premenná.
Riadok 10 definuje a pageUrl premenná. The pageUrl Premenná obsahuje adresu URL webovej stránky, ktorú bude snímať obrazovka Selenium.
Riadok 11 načíta pageUrl v prehliadači.
Riadok 12 používa save_sc Screenshot () metóda na uloženie snímky obrazovky okna prehliadača do súboru w3schools_google-chrome.png v snímky/ adresár projektu.
Nakoniec riadok 14 zavrie prehliadač.
Ďalej spustite ex01_google-chrome.py Skript v jazyku Python:
$ python3 ex01_google-chrome.py
Po úspešnom vykonaní skriptu sa snímka obrazovky uloží do obrazového súboru w3schools_google-chrome.png v snímky/ adresár projektu, ako vidíte na snímke obrazovky nižšie.
Ak chcete vytvoriť snímku obrazovky toho istého webu, ale vo webovom prehliadači Firefox, vytvorte nový skript v jazyku Python ex01_firefox.py a zadajte nasledujúce riadky kódov do skriptu.
z webového ovládača na selén na importzo selénu.webdriver.bežné.kľúče na import kľúčov
firefoxOptions = webdriver.firefox.možnosti.Možnosti()
firefoxMožnosti.bezhlavý = Pravda
firefoxMožnosti.add_argument ('- šírka = 1280')
firefoxMožnosti.add_argument ('- výška = 720')
firefox = webdriver.Firefox (executable_path = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3schools.com ";
firefox.získať (pageUrl)
firefox.save_sc Screenshot ('images / w3schools_firefox.png ')
firefox.Zavrieť()
Po dokončení uložte súbor ex01_firefox.py Skript v jazyku Python.
Riadok 4 vytvára možnosti objekt pre webový prehliadač Firefox.
Riadok 5 umožňuje bezhlavý režim pre Firefox.
Riadok 6 nastaví šírku okna prehliadača na 1280 pixelov a riadok 7 nastaví výšku okna prehliadača na 720 pixelov.
Riadok 9 vytvorí objekt prehliadača pomocou ovládača Firefox Gecko a uloží ho do firefox premenná.
Riadok 11 definuje a pageUrl premenná. The pageUrl Premenná obsahuje adresu URL webovej stránky, ktorá sa bude snímať pomocou Selenium.
Riadok 13 načíta pageUrl v prehliadači.
Riadok 14 používa save_sc Screenshot () metóda na uloženie snímky obrazovky okna prehliadača do súboru w3schools_firefox.png v snímky/ adresár projektu.
Nakoniec riadok 15 zavrie prehliadač.
Ďalej spustite ex01_firefox.py Skript v jazyku Python:
$ python3 ex01_firefox.py
Po úspešnom vykonaní skriptu by sa mala snímka obrazovky uložiť do obrazového súboru w3schools_firefox.png v snímky/ adresár projektu, ako vidíte na snímke obrazovky nižšie.
Robenie snímok obrazovky s rôznymi rozlíšeniami obrazovky
V tejto časti sa dozviete, ako snímať snímky obrazovky tej istej webovej stránky v rôznych rozlíšeniach obrazovky. V tejto časti budem používať webový prehliadač Google Chrome, ale pre túto sekciu môžete použiť Firefox alebo akýkoľvek iný prehliadač.
Najskôr vytvorte nový skript v jazyku Python ex02.py a zadajte nasledujúce riadky kódu do skriptu.
z webového ovládača na selén na importzo selénu.webdriver.bežné.kľúče na import kľúčov
pageUrl = "https: // www.w3schools.sk / ";
rozlíšenia = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
na riešenie v uzneseniach:
print ("Vytvorenie snímky obrazovky pre rozlíšenie% s ..."% (rozlíšenie.nahradiť (',', 'x')))
chromeOptions = webdriver.ChromeOptions ()
chromeOptions.bezhlavý = Pravda
chromeOptions.add_argument ('- window-size =' + rozlíšenie)
chrome = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", options = chromeOptions)
chróm.získať (pageUrl)
outputImage = 'images / homepage_chrome_' + rozlíšenie.nahradiť (',', '_') + '.png '
chróm.save_sc Screenshot (outputImage)
chróm.Zavrieť()
print ('Uložené do% s.'% (outputImage))
Po dokončení uložte súbor ex02.py Skript v jazyku Python.
Riadok 4 definuje a pageUrl premenná, ktorá obsahuje adresu URL webovej stránky, ktorú by som chcel vytvoriť, v rôznych rozlíšeniach obrazovky.
Riadok 5 definuje a uznesenia zoznam, ktorý obsahuje zoznam uznesení, z ktorých by som chcel vytvoriť snímky obrazovky.
Riadok 7 iteruje cez každú z rozhodnuties v uznesenia zoznam.
Vo vnútri slučky vytlačí Line 8 na konzolu zmysluplnú správu.
Riadky 10-15 vytvárajú objekt prehliadača pomocou rozhodnutie aktuálnej iterácie slučky a uloží ju do chróm premenná.
Riadok 17 načíta pageUrl v prehliadači.
Riadok 19 vygeneruje cestu k obrázku, kam sa uloží snímka obrazovky, a uloží obrázok do súboru outputImage premenná.
Riadok 20 urobí snímku obrazovky okna prehliadača a uloží ju do cesty outputImage.
Riadok 21 zavrie prehliadač.
Riadok 22 vytlačí na konzolu zmysluplnú správu a ukončí slučku.
Potom sa slučka začne znova s ďalším rozlíšením obrazovky (t.j.e., ďalšia položka zoznamu).
Ďalej spustite ex02.py Skript v jazyku Python:
$ python3 ex02.py
Skript v jazyku Python ex02.py by mal robiť snímky obrazovky danej adresy URL v každom z vybratých rozlíšení obrazovky.
Screenshot obrazovky w3schools.com v šírke 320 pixelov.
Screenshot obrazovky w3schools.com v šírke 500 pixelov.
Screenshot z w3schools.com v šírke 720 pixelov.
Screenshot z w3schools.com v šírke 1366 pixelov.
Screenshot obrazovky w3schools.com v šírke 1920 pixelov.
Ak porovnávate snímky obrazovky, mali by ste vidieť, že sa používateľské rozhranie mení so šírkou okna prehliadača. Pomocou funkcie snímok obrazovky Selenium môžete rýchlo a ľahko zistiť, ako vyzerá váš web v rôznych rozlíšeniach obrazovky.
Záver
Tento článok vám priblížil základné informácie o vytváraní snímok obrazovky pomocou selénu a webových ovládačov Chrome a Firefox. V článku sa tiež dozviete, ako snímať snímky obrazovky v rôznych rozlíšeniach obrazovky. To by vám malo pomôcť začať s funkciou snímky obrazovky Selenium.
