Phenquestions
Různé webové prohlížeče používají k vykreslení webových stránek různé vykreslovací moduly. Stejný kód frontendu se tedy nemusí vykreslit stejným způsobem ve všech webových prohlížečích. Chcete-li tento problém vyřešit, možná budete muset na svůj web přidat některé frontendové kódy specifické pro prohlížeč. To však není jediná těžká část při navrhování webových stránek kompatibilních s různými prohlížeči a zařízeními. Ruční kontrola toho, jak web vypadá v každém z vašich cílených prohlížečů, může být časově náročná. Budete muset otevřít všechny své cílené webové prohlížeče, navštívit webovou stránku, počkat na načtení stránky a porovnat vykreslené stránky navzájem. Chcete-li ušetřit čas, můžete pomocí funkce Selenium screenshot automaticky pořizovat snímky obrazovky vašeho webu v každém z vašich cílených prohlížečů a porovnávat obrázky sami. To je mnohem rychlejší než manuální metoda. Tento článek vám ukáže, jak pořizovat snímky obrazovky oken prohlížeče pomocí selenu.
Předpoklady
Chcete-li vyzkoušet příkazy a příklady popsané v tomto článku, musíte mít:
1) Ve vašem počítači je nainstalována distribuce Linuxu (nejlépe Ubuntu).
2) Python 3 nainstalovaný ve vašem počítači.
3) PIP 3 nainstalovaný ve vašem počítači.
4) Balíček Pythonu virtuální nainstalován ve vašem počítači.
5) Ve vašem počítači jsou nainstalovány webové prohlížeče Mozilla Firefox a Google Chrome.
6) Znalost instalace ovladače Firefox Gecko a webového ovladače Chrome do vašeho systému.
Ke splnění požadavků 4, 5 a 6 si můžete přečíst můj článek Úvod do selenu v Pythonu 3 ve službě Linuxhint.com.
Mnoho dalších článků o požadovaných tématech najdete na LinuxHint.com. Nezapomeňte si tyto články prohlédnout, pokud potřebujete další pomoc.
Nastavení adresáře projektu
Chcete-li mít vše uspořádané, vytvořte nový adresář projektu screenshot selenu /, jak následuje:
$ mkdir -pv selenium-screenshot / obrázky, ovladače
Přejděte na screenshot selenu / adresář projektu takto:
$ cd selen-screenshot /
Vytvořte virtuální prostředí Pythonu v adresáři projektu následujícím způsobem:
$ virtualenv .venv
Aktivujte virtuální prostředí následujícím způsobem:
$ zdroj .venv / bin / aktivovat
Nainstalujte selen pomocí PIP3 následujícím způsobem:
$ pip3 nainstalujte selen
Stáhněte a nainstalujte požadovaný webový ovladač do Řidiči/ adresář projektu. V článku jsem vysvětlil proces stahování a instalace webových ovladačů Úvod do selenu v Pythonu 3. Pokud potřebujete v tomto ohledu pomoc, vyhledejte LinuxTip.com pro tento článek.
Základy pořizování snímků obrazovky se selenem
Tato část vám poskytne velmi jednoduchý příklad pořizování snímků obrazovky prohlížeče se selenem.
Nejprve vytvořte nový skript v Pythonu ex01_google-chrome.py a zadejte následující řádky kódů do skriptu.
z webového ovladače pro import selenuze selenu.webdriver.běžný.klíče importovat klíče
googleChromeOptions = webdriver.chrom.možnosti.Možnosti ()
googleChromeOptions.bezhlavý = pravda
googleChromeOptions.add_argument ('- velikost okna = 1280 720')
googleChrome = webdriver.Chrome (executable_path = "./ ovladače / chromedriver ",
options = googleChromeOptions)
pageUrl = "https: // www.w3schools.com ";
googleChrome.získat (pageUrl)
googleChrome.save_sc Screenshot ('images / w3schools_google-chrome.png ')
googleChrome.zavřít()
Až budete hotovi, uložte ex01_google-chrome.py Skript v Pythonu.
Řádek 4 vytváří Možnosti objekt pro webový prohlížeč Google Chrome.
Řádek 5 umožňuje bezhlavý režim pro Google Chrome.
Řádek 6 nastavuje velikost okna na 1280 × 720 pixelů.
Řádek 8 vytvoří objekt prohlížeče pomocí ovladače Chrome a uloží jej do googleChrome proměnná.
Řádek 10 definuje a pageUrl proměnná. The pageUrl Proměnná obsahuje adresu URL webové stránky, na které bude Selenium snímek obrazovky.
Řádek 11 načte pageUrl v prohlížeči.
Řádek 12 používá save_sc Screenshot () způsob uložení snímku obrazovky okna prohlížeče do souboru w3schools_google-chrome.png v snímky/ adresář projektu.
Nakonec řádek 14 zavře prohlížeč.
Dále spusťte ex01_google-chrome.py Skript v Pythonu:
$ python3 ex01_google-chrome.py
Po úspěšném provedení skriptu se snímek obrazovky uloží do obrazového souboru w3schools_google-chrome.png v snímky/ adresář projektu, jak vidíte na následujícím obrázku.
Chcete-li pořídit snímek obrazovky stejného webu, ale ve webovém prohlížeči Firefox, vytvořte nový skript Pythonu ex01_firefox.py a zadejte následující řádky kódů do skriptu.
z webového ovladače pro import selenuze selenu.webdriver.běžný.klíče importovat klíče
firefoxOptions = webdriver.Firefox.možnosti.Možnosti ()
firefoxMožnosti.bezhlavý = pravda
firefoxMožnosti.add_argument ('- šířka = 1280')
firefoxMožnosti.add_argument ('- height = 720')
firefox = webdriver.Firefox (executable_path = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3schools.com ";
Firefox.získat (pageUrl)
Firefox.save_sc Screenshot ('images / w3schools_firefox.png ')
Firefox.zavřít()
Až budete hotovi, uložte ex01_firefox.py Skript v Pythonu.
Řádek 4 vytváří Možnosti objekt pro webový prohlížeč Firefox.
Řádek 5 umožňuje bezhlavý režim pro Firefox.
Řádek 6 nastaví šířku okna prohlížeče na 1280 pixelů a řádek 7 nastaví výšku okna prohlížeče na 720 pixelů.
Řádek 9 vytvoří objekt prohlížeče pomocí ovladače Firefox Gecko a uloží jej do Firefox proměnná.
Řádek 11 definuje a pageUrl proměnná. The pageUrl Proměnná obsahuje adresu URL webové stránky, na které bude Selenium snímek obrazovky.
Řádek 13 načte pageUrl v prohlížeči.
Řádek 14 používá save_sc Screenshot () způsob uložení snímku obrazovky okna prohlížeče do souboru w3schools_firefox.png v snímky/ adresář projektu.
Nakonec řádek 15 zavře prohlížeč.
Dále spusťte ex01_firefox.py Skript v Pythonu:
$ python3 ex01_firefox.py
Po úspěšném provedení skriptu by se měl snímek obrazovky uložit do obrazového souboru w3schools_firefox.png v snímky/ adresář projektu, jak vidíte na následujícím obrázku.
Pořizování snímků obrazovky z různých rozlišení obrazovky
Tato část vám ukáže, jak pořizovat snímky obrazovky stejné webové stránky v různých rozlišeních obrazovky. V této části budu používat webový prohlížeč Google Chrome, ale pro tuto sekci můžete použít Firefox nebo jakýkoli jiný prohlížeč.
Nejprve vytvořte nový skript v Pythonu ex02.py a do skriptu zadejte následující řádky kódu.
z webového ovladače pro import selenuze selenu.webdriver.běžný.klíče importovat klíče
pageUrl = "https: // www.w3schools.com / ";
rozlišení = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
pro řešení v rozlišeních:
print ("Pořizování snímku obrazovky pro rozlišení% s ..."% (rozlišení.nahradit (',', 'x')))
chromeOptions = webdriver.ChromeOptions ()
chromeOptions.bezhlavý = pravda
chromeOptions.add_argument ('- window-size =' + rozlišení)
chrome = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", options = chromeOptions)
chrom.získat (pageUrl)
outputImage = 'images / homepage_chrome_' + rozlišení.nahradit (',', '_') + '.png '
chrom.save_sc Screenshot (outputImage)
chrom.zavřít()
print ('Uloženo do% s.'% (outputImage))
Až budete hotovi, uložte ex02.py Skript v Pythonu.
Řádek 4 definuje a pageUrl proměnná, která obsahuje adresu URL webové stránky, chtěl bych pořizovat snímky obrazovky v různých rozlišeních obrazovky.
Řádek 5 definuje a rozlišení seznam, který obsahuje seznam rozlišení, ze kterých bych chtěl pořídit snímky obrazovky.
Řádek 7 iteruje každým z řešeníje v rozlišení seznam.
Řádek 8 uvnitř smyčky vytiskne na konzoli smysluplnou zprávu.
Řádky 10-15 vytvoří objekt prohlížeče pomocí řešení aktuální iterace smyčky a uloží ji do chrom proměnná.
Řádek 17 načte pageUrl v prohlížeči.
Řádek 19 vygeneruje cestu k obrázku, kam se uloží snímek obrazovky, a uloží obrázek do souboru outputImage proměnná.
Řádek 20 pořídí snímek obrazovky prohlížeče a uloží jej do cesty outputImage.
Řádek 21 zavře prohlížeč.
Řádek 22 vytiskne na konzoli smysluplnou zprávu a ukončí smyčku.
Poté smyčka začíná znovu s dalším rozlišením obrazovky (tj.E., další položka seznamu).
Dále spusťte ex02.py Skript v Pythonu:
$ python3 ex02.py
Skript v Pythonu ex02.py by měl pořizovat snímky obrazovky dané adresy URL v každém ze zvolených rozlišení obrazovky.
Screenshot z w3schools.com v šířce 320 pixelů.
Screenshot z w3schools.com v šířce 500 pixelů.
Screenshot z w3schools.com v šířce 720 pixelů.
Screenshot z w3schools.com v šířce 1366 pixelů.
Screenshot z w3schools.com v šířce 1920 pixelů.
Pokud porovnáte snímky obrazovky, měli byste vidět, že se uživatelské rozhraní mění s šířkou okna prohlížeče. Pomocí funkce Selenium screenshot můžete rychle a snadno zjistit, jak váš web vypadá v různých rozlišeních obrazovky.
Závěr
Tento článek vám ukázal některé základy pořizování snímků obrazovky pomocí selenu a webových ovladačů Chrome a Firefox. Článek také ukázal, jak pořizovat snímky obrazovky v různých rozlišeních obrazovky. To by vám mělo pomoci začít s funkcí obrazovky selenu.
