Jak zrobić zrzut ekranu z selenem

Selenium to świetne narzędzie do testowania przeglądarki, automatyzacji sieci i skrobania internetowego. Możesz także użyć selenium do robienia zrzutów ekranu swojej strony internetowej. Jest to bardzo ważne dla testowania interfejsu użytkownika (interfejsu) Twojej witryny w różnych przeglądarkach internetowych.

Różne przeglądarki internetowe używają różnych silników renderowania do renderowania stron internetowych. Tak więc ten sam kod frontu może nie renderować w ten sam sposób we wszystkich przeglądarkach internetowych. Aby rozwiązać ten problem, może być konieczne dodanie niektórych kodów frontendowych specyficznych dla przeglądarki. Jednak nie jest to jedyna trudna część podczas projektowania witryny kompatybilnej z różnymi przeglądarkami i urządzeniami. Ręczne sprawdzenie, jak wygląda strona internetowa w każdej z twoich docelowych przeglądarki, może być czasochłonne. Musiałbyś otworzyć wszystkie ukierunkowane przeglądarki, odwiedzić stronę internetową, poczekać, aż strona się załaduje i porównać renderowane strony ze sobą. Aby zaoszczędzić czas, możesz użyć funkcji zrzutu ekranu selenium, aby automatycznie robić zrzuty ekranu witryny w każdej z twoich docelowych przeglądarki i samodzielnie porównać zdjęcia. To jest znacznie szybsze niż metoda ręczna. W tym artykule pokaże, jak robić zrzuty ekranu okien przeglądarki za pomocą selenu.

Wymagania wstępne

Aby wypróbować polecenia i przykłady omówione w tym artykule, musisz mieć:

1) Dystrybucja Linux (najlepiej Ubuntu) zainstalowana na komputerze.
2) Python 3 zainstalowany na komputerze.
3) PIP 3 zainstalowany na komputerze.
4) Pakiet Python Virtualenv Zainstalowane na komputerze.
5) Przeglądarki internetowe Mozilla Firefox i Google Chrome zainstalowane na komputerze.
6) Wiedza o tym, jak zainstalować sterownik Gecko Firefox i Chrome Web Sterownik w systemie.

Aby spełnić wymagania 4, 5 i 6, możesz przeczytać mój artykuł Wprowadzenie do selenu z Python 3 w Linuxhint.com.

W Linuxhint można znaleźć wiele innych artykułów na wymagane tematy.com. Pamiętaj, aby sprawdzić te artykuły, jeśli potrzebujesz dodatkowej pomocy.

Konfigurowanie katalogu projektów

Aby wszystko się zorganizowano, stwórz nowy katalog projektu selen-screenshot/, następująco:

$ mkdir -pv selenum -screenshot/Images, Drivers

Przejść do selen-screenshot/ Katalog projektu, w następujący sposób:

$ cd selenum-screenshot/

Utwórz wirtualne środowisko Pythona w katalogu projektu, jak następuje:

$ Virtualenv .Venv

Aktywuj środowisko wirtualne, w następujący sposób:

$ źródło .venv/bin/aktywuj

Zainstaluj selen za pomocą PIP3, w następujący sposób:

$ PIP3 instaluj selen

Pobierz i zainstaluj wymagany sterownik internetowy w kierowcy/ Katalog projektu. Wyjaśniłem proces pobierania i instalowania sterowników internetowych w artykule Wprowadzenie do selenu z Python 3. Jeśli potrzebujesz pomocy na ten temat, wyszukaj Linuxhint.com do tego artykułu.

Podstawy robienia zrzutów ekranu z selenem

Ta sekcja poda bardzo prosty przykład przyjmowania zrzutów ekranu przeglądarki z selenem.

Najpierw stwórz nowy skrypt Python ex01_google-chrome.py i wpisz następujące wiersze kodów w skrypcie.

od selenu importu Webdriver
z selenu.Webdriver.wspólny.Klucze importują klucze
GooglechromeOptions = WebDriver.chrom.opcje.Opcje ()
Googlechromeoptions.bezgłowy = prawda
Googlechromeoptions.add_argument ('-okno-size = 1280,720')
Googlechrome = WebDriver.Chrome (Exceutable_path = "./sterowniki/chromedriver ",
opcje = Googlechromeoptions)
pageurl = "https: // www.W3Schools.com ";
Googlechrome.Get (pageURL)
Googlechrome.Save_Screenshot ('Images/W3Schools_google-chrome.png ')
Googlechrome.zamknąć()

Po zakończeniu zapisz ex01_google-chrome.py Skrypt Pythona.

Linia 4 tworzy Opcje Obiekt przeglądarki internetowej Google Chrome.

Linia 5 umożliwia tryb bezgłowy dla Google Chrome.

Linia 6 ustawia rozmiar okna na 1280 × 720 pikseli.

Wiersz 8 tworzy obiekt przeglądarki za pomocą Chrome Driver i przechowuje go w Googlechrome zmienny.

Linia 10 definiuje a Strona URL zmienny. Strona URL Zmienna przechowuje adres URL strony internetowej, że Selenium będzie zrzut ekranu.

Linia 11 ładuje Strona URL W przeglądarce.

Linia 12 używa save_screenshot () metoda zapisania zrzutu ekranu okna przeglądarki na pliku W3schools_google-chrome.png w obrazy/ Katalog projektu.

Wreszcie linia 14 zamyka przeglądarkę.

Następnie uruchom ex01_google-chrome.py Skrypt Pythona, w następujący sposób:

$ Python3 ex01_google-chrome.py

Po pomyślnym wykonaniu skryptu zrzut ekranu zostanie zapisany w pliku obrazu W3schools_google-chrome.png w obrazy/ katalog projektu, jak widać na zrzucie ekranu poniżej.

Aby zrobić zrzut ekranu tej samej witryny, ale w przeglądarce internetowej Firefox, utwórz nowy skrypt Python ex01_firefox.py i wpisz następujące wiersze kodów w skrypcie.

od selenu importu Webdriver
z selenu.Webdriver.wspólny.Klucze importują klucze
FirefoxOptions = WebDriver.Firefox.opcje.Opcje ()
Firefoxoptions.bezgłowy = prawda
Firefoxoptions.add_argument ('-szerokość = 1280')
Firefoxoptions.add_argument ('-high = 720')
Firefox = WebDriver.Firefox (Exceutable_path = "./sterowniki/geckodriver ", opcje = Firefoxoptions)
pageurl = "https: // www.W3Schools.com ";
Firefox.Get (pageURL)
Firefox.Save_Screenshot ('Images/W3Schools_firefox.png ')
Firefox.zamknąć()

Po zakończeniu zapisz ex01_firefox.py Skrypt Pythona.

Linia 4 tworzy Opcje obiekt dla przeglądarki internetowej Firefox.

Linia 5 umożliwia tryb bezgłowy dla Firefox.

Linia 6 ustawia szerokość okna przeglądarki na 1280 pikseli, a linia 7 ustawia wysokość okna przeglądarki na 720 pikseli.

Linia 9 tworzy obiekt przeglądarki za pomocą sterownika Gecko Firefox i przechowuje go w Firefox zmienny.

Linia 11 definiuje a Strona URL zmienny. Strona URL Zmienna przechowuje adres URL strony internetowej, że Selenium będzie zrzut ekranu.

Linia 13 ładuje Strona URL na przeglądarce.

Wiersz 14 używa save_screenshot () metoda zapisania zrzutu ekranu okna przeglądarki na pliku W3Schools_firefox.png w obrazy/ Katalog projektu.

Wreszcie linia 15 zamyka przeglądarkę.

Następnie uruchom ex01_firefox.py Skrypt Pythona, w następujący sposób:

$ Python3 ex01_firefox.py

Po pomyślnym wykonaniu skryptu zrzut ekranu powinien zostać zapisany w pliku obrazu W3Schools_firefox.png w obrazy/ katalog projektu, jak widać na zrzucie ekranu poniżej.

Robienie zrzutów ekranu różnych rozdzielczości ekranu

W tej sekcji pokaże, jak robić zrzuty ekranu tej samej strony w różnych rozdzielczościach ekranu. W tej sekcji będę korzystać z przeglądarki internetowej Google Chrome, ale możesz użyć Firefox lub dowolnej innej przeglądarki do tej sekcji.

Najpierw stwórz nowy skrypt Python Ex02.py i wpisz następujące wiersze kodu w skrypcie.

od selenu importu Webdriver
z selenu.Webdriver.wspólny.Klucze importują klucze
pageurl = "https: // www.W3Schools.com/";
Resolutions = [„320,1080”, „500,1080”, „720,1080”, „1366,1080”, „1920,1080”]]
do rozwiązywania rezolucji:
Drukuj („Robienie zrzutów ekranu w celu rozdzielczości % s…” % (rozdzielczość.zamień (',', 'x')))
ChromeOptions = WebDriver.Chromeoptions ()
Chromeopcje.bezgłowy = prawda
Chromeopcje.add_argument ('-okno-size =' + rozdzielczość)
Chrome = WebDriver.Chrome (Exceutable_path = "./sterowniki/chromedriver ", opcje = Chromeoptions)
chrom.Get (pageURL)
OutputImage = 'Images/HomePage_chrome_' + rozdzielczość.zamień (',', „_”) + '.png '
chrom.SAVE_SCREENSHOT (OutputImage)
chrom.zamknąć()
Drukuj („Zapisane na %s.' % (wyjściowe))

Po zakończeniu zapisz Ex02.py Skrypt Pythona.

Linia 4 definiuje Strona URL zmienna, która przechowuje adres URL strony internetowej, który chciałbym zrobić zrzuty ekranu w różnych rozdzielczościach ekranu.

Linia 5 definiuje postanowienia lista, która zawiera listę rezolucji, które chciałbym zrobić zrzuty ekranu.

Linia 7 itera przez każdy z rezolucjas w postanowienia lista.

Wewnątrz pętli wiersz 8 drukuje znaczącą wiadomość na konsoli.

Linie 10-15 Utwórz obiekt przeglądarki z rezolucja obecnej iteracji pętli i przechowuje ją w chrom zmienny.

Linia 17 ładuje Strona URL W przeglądarce.

Wiersz 19 generuje ścieżkę obrazu, w której zrzut ekranu zostanie zapisany i przechowuje obraz w Wyjście zmienny.

Linia 20 robi zrzut ekranu okna przeglądarki i przechowuje ją na ścieżce Wyjście.

Linia 21 zamyka przeglądarkę.

Wiersz 22 drukuje sensowną wiadomość na konsoli i kończy pętlę.

Następnie pętla zaczyna się od następnej rozdzielczości ekranu (i.mi., Następna lista).

Następnie uruchom Ex02.py Skrypt Pythona, w następujący sposób:

$ Python3 Ex02.py

Skrypt Pythona Ex02.py powinien zrobić zrzuty ekranu podanego adresu URL w każdym z wybranych rozdzielczości ekranu.

Zrzut ekranu W3Schools.com W szerokości 320 pikseli.

Zrzut ekranu W3Schools.com W szerokości 500 pikseli.

Zrzut ekranu W3Schools.com W szerokości 720 pikseli.

Zrzut ekranu W3Schools.com W 1366 pikseli szerokość.

Zrzut ekranu W3Schools.com W 1920 pikseli szerokość.

Jeśli porównasz zrzuty ekranu, powinieneś zobaczyć, że interfejs użytkownika zmienia się wraz z szerokością okna przeglądarki. Korzystając z funkcji zrzutu ekranu selenium, możesz zobaczyć, jak witryna wygląda na różne rozdzielczości ekranu.

Wniosek

W tym artykule pokazano niektóre podstawy robienia zrzutów ekranu za pomocą sterowników internetowych Selenium i Chrome i Firefox. Artykuł pokazał również, jak robić zrzuty ekranu w różnych rozdzielczościach ekranu. To powinno pomóc w rozpoczęciu funkcji z ekranu selenium.