Wie man einen Screenshot mit Selen macht

Selenium ist ein großartiges Tool für Browser -Tests, Webautomation und Web -Scraping. Sie können Selen auch verwenden, um Screenshots Ihrer Webseite zu machen. Dies ist sehr wichtig, um die Benutzeroberfläche (Benutzeroberfläche) Ihrer Website auf verschiedenen Webbrowsern zu testen.

Verschiedene Webbrowser verwenden unterschiedliche Rendering -Motoren, um Webseiten zu rendern. Daher kann der gleiche Frontend -Code in allen Webbrowsern nicht genauso gerendert werden. Um dieses Problem zu beheben, müssen Sie möglicherweise einige Browser-spezifische Frontend-Codes auf Ihrer Website hinzufügen. Dies ist jedoch nicht der einzige schwierige Teil beim Entwerfen einer Website, die mit verschiedenen Browsern und Geräten kompatibel ist. Überprüfen Sie manuell, wie die Website in jedem Ihrer gezielten Browser aussieht, zeitaufwändig. Sie müssten alle Ihre gezielten Webbrowser öffnen, die Webseite besuchen, auf die Seite warten und die gerenderten Seiten miteinander vergleichen. Um Zeit zu sparen, können Sie die Selenium -Screenshot -Funktion verwenden, um automatisch Screenshots Ihrer Website in jedem Ihrer Zielbrowser aufzunehmen und die Bilder selbst zu vergleichen. Das ist viel schneller als die manuelle Methode. In diesem Artikel wird angezeigt, wie Sie mit Selenium Screenshots aus Browserfenstern aufnehmen können.

Voraussetzungen

Um die in diesem Artikel besprochenen Befehle und Beispiele auszuprobieren, müssen Sie:

1) Eine Linux -Verteilung (vorzugsweise Ubuntu), die auf Ihrem Computer installiert ist.
2) Python 3 auf Ihrem Computer installiert.
3) PIP 3 auf Ihrem Computer installiert.
4) Das Python -Paket virtualenv auf Ihrem Computer installiert.
5) Mozilla Firefox und Google Chrome -Webbrowser auf Ihrem Computer installiert.
6) Kenntnis der Installation des Firefox Gecko -Treibers und des Chrome -Web -Treibers auf Ihrem System.

Um die Anforderungen 4, 5 und 6 zu erfüllen, können Sie meinen Artikel lesen Einführung in Selen mit Python 3 bei LinuxHint.com.

Sie können viele andere Artikel zu den erforderlichen Themen unter LinuxHint finden.com. Überprüfen Sie diese Artikel unbedingt, wenn Sie zusätzliche Unterstützung benötigen.

Einrichten eines Projektverzeichnisses

Um alles organisiert zu halten, erstellen Sie das neue Projektverzeichnis seleniumscreenshot/, folgendermaßen:

$ mkdir -pv selenium -screenshot/Bilder, Treiber

Navigieren zum seleniumscreenshot/ Projektverzeichnis wie folgt:

$ CD Selen-Screenshot/

Erstellen Sie eine virtuelle Python -Umgebung im Projektverzeichnis wie folgt:

$ virtualenv .Venv

Aktivieren Sie die virtuelle Umgebung wie folgt:

$ Quelle .Venv/bin/aktivieren

Installieren Sie Selen mit PIP3 wie folgt:

$ pip3 Selen installieren

Laden Sie den erforderlichen Web -Treiber in der Treiber/ Projektverzeichnis. Ich habe den Prozess des Herunterladens und Installierens von Web -Treibern im Artikel erläutert Einführung in Selen mit Python 3. Wenn Sie Unterstützung zu diesem Thema benötigen, suchen Sie LinuxHint.com Für diesen Artikel.

Grundlagen der Einnahme von Screenshots mit Selen

In diesem Abschnitt werden Sie ein sehr einfaches Beispiel für die Aufnahme von Browser -Screenshots mit Selen erhalten.

Erstellen Sie zunächst ein neues Python -Skript ex01_google-chrome.py und geben Sie die folgenden Codes -Zeilen in das Skript ein.

vom Selenium importieren Webdriver
Aus Selen.Webdriver.gemeinsam.Schlüssel importieren Schlüsseln
googleChromeOptions = webdriver.Chrom.Optionen.Optionen()
googlechromeoptions.Kopflos = wahr
googlechromeoptions.Add_argument ('-Fenstergröße = 1280,720')
googlechrome = webdriver.Chrome (ausführbarer_path = "./Treiber/Chromedriver ",
Optionen = googleChromeOptions)
pageurl = "https: // www.W3schools.com ";
Google Chrome.get (pageurl)
Google Chrome.SAVE_SCREENSHOT ('Images/W3schools_Google-Chrome.png ')
Google Chrome.schließen()

Sobald Sie fertig sind, speichern Sie die ex01_google-chrome.py Python -Skript.

Zeile 4 erstellt eine Optionen Objekt für den Google Chrome -Webbrowser.

Zeile 5 ermöglicht den Kopflosenmodus für Google Chrome.

Zeile 6 setzt die Fenstergröße auf 1280 × 720 Pixel.

Zeile 8 erstellt ein Browserobjekt mit dem Chrome -Treiber und speichern es in der Google Chrome Variable.

Zeile 10 definiert a Seiten-URL Variable. Der Seiten-URL Die Variable hält die URL der Webseite, die Selen überprüft.

Zeile 11 lädt die Seiten-URL im Browser.

Zeile 12 verwendet die save_screenshot () Methode zum Speichern eines Screenshot des Browserfensters in der Datei w3schools_google-chrome.png im Bilder/ Projektverzeichnis.

Schließlich schließt Zeile 14 den Browser.

Als nächstes führen Sie die aus ex01_google-chrome.py Python -Skript wie folgt:

$ python3 ex01_google-chrome.py

Bei der erfolgreichen Ausführung des Skripts wird der Screenshot in der Bilddatei gespeichert w3schools_google-chrome.png im Bilder/ Verzeichnis des Projekts, wie Sie im Screenshot unten sehen können.

Erstellen Sie das neue Python -Skript, um einen Screenshot derselben Website zu erhalten, aber im Firefox -Webbrowser, das neue Python -Skript ex01_firefox.py und geben Sie die folgenden Codes -Zeilen in das Skript ein.

vom Selenium importieren Webdriver
Aus Selen.Webdriver.gemeinsam.Schlüssel importieren Schlüsseln
FirefoxOptions = WebDriver.Feuerfuchs.Optionen.Optionen()
Firefoxoptionen.Kopflos = wahr
Firefoxoptionen.add_argument ('-width = 1280')
Firefoxoptionen.add_argument ('-height = 720')
Firefox = WebDriver.Firefox (ausführbarer_Path = "./Treiber/Geckodriver ", Optionen = Firefoxoptions)
pageurl = "https: // www.W3schools.com ";
Feuerfuchs.get (pageurl)
Feuerfuchs.SAVE_SCREENSHOT ('Images/W3schools_Firefox.png ')
Feuerfuchs.schließen()

Sobald Sie fertig sind, speichern Sie die ex01_firefox.py Python -Skript.

Zeile 4 erstellt eine Optionen Objekt für den Firefox -Webbrowser.

Zeile 5 ermöglicht den Kopflosenmodus für Firefox.

Zeile 6 setzt die Browser -Fensterbreite auf 1280 Pixel und Zeile 7 setzt die Browserfensterhöhe auf 720 Pixel.

Zeile 9 erstellt ein Browserobjekt mit dem Firefox Gecko -Treiber und speichert es in der Feuerfuchs Variable.

Zeile 11 definiert a Seiten-URL Variable. Der Seiten-URL Die Variable hält die URL der Webseite, die Selen überprüft.

Zeile 13 lädt die Seiten-URL Auf dem Browser.

Zeile 14 verwendet die save_screenshot () Methode zum Speichern eines Screenshot des Browserfensters in der Datei w3schools_firefox.png im Bilder/ Projektverzeichnis.

Schließlich schließt Zeile 15 den Browser.

Als nächstes führen Sie die aus ex01_firefox.py Python -Skript wie folgt:

$ python3 ex01_firefox.py

Bei der erfolgreichen Ausführung des Skripts sollte der Screenshot in der Bilddatei gespeichert werden w3schools_firefox.png im Bilder/ Verzeichnis des Projekts, wie Sie im Screenshot unten sehen können.

Einnahme von Screenshots verschiedener Bildschirmauflösungen

In diesem Abschnitt werden Sie angezeigt, wie Sie Screenshots derselben Webseite in verschiedenen Bildschirmauflösungen aufnehmen können. In diesem Abschnitt werde ich den Google Chrome -Webbrowser verwenden, aber Sie können Firefox oder einen anderen Browser für diesen Abschnitt verwenden.

Erstellen Sie zunächst das neue Python -Skript Ex02.py und geben Sie die folgenden Codezeilen in das Skript ein.

vom Selenium importieren Webdriver
Aus Selen.Webdriver.gemeinsam.Schlüssel importieren Schlüsseln
pageurl = "https: // www.W3schools.com/";
Auflösungen = ['320.1080', '500.1080', '720.1080', '1366.1080', '1920.1080']
Für Lösung in Auflösungen:
Druck ("Screenshot für Auflösung % s ..." % (Auflösung.ersetzen (',', 'x'))))
ChromeOptions = WebDriver.ChromeOptions ()
Chromoptionen.Kopflos = wahr
Chromoptionen.add_argument ('-window-size =' + Auflösung)
Chrome = Webdriver.Chrome (ausführbarer_path = "./Treiber/Chromedriver ", Optionen = Chromeoptionen)
Chrom.get (pageurl)
outputImage = 'bilder/homepage_chrome_' + Auflösung.ersetzen (',', '_') + '.png '
Chrom.save_screenshot (outputImage)
Chrom.schließen()
drucken ('gerettet auf %s.' % (outputImage))

Sobald Sie fertig sind, speichern Sie die Ex02.py Python -Skript.

Zeile 4 definiert a Seiten-URL Variable, die die Webseiten -URL hält Ich möchte Screenshots in verschiedenen Bildschirmauflösungen machen.

Zeile 5 definiert a Auflösungen Liste, die eine Liste der Auflösungen enthält, die ich gerne Screenshots machen möchte.

Zeile 7 iteriert durch jedes der der Auflösungs in der Auflösungen Liste.

In der Schleife wird Zeile 8 eine aussagekräftige Nachricht auf der Konsole druckt.

Zeilen 10-15 Erstellen Sie ein Browserobjekt mit dem Auflösung der aktuellen Schleife Iteration und speichert sie in der Chrom Variable.

Zeile 17 lädt die Seiten-URL im Browser.

Zeile 19 erzeugt einen Bildpfad, in dem der Screenshot gespeichert wird, und speichert das Bild in der Ausgabe Variable.

Zeile 20 enthält einen Screenshot des Browserfensters und speichert es im Pfad Ausgabe.

Zeile 21 schließt den Browser.

Zeile 22 druckt eine aussagekräftige Nachricht auf der Konsole und beendet die Schleife.

Dann beginnt die Schleife erneut mit der nächsten Bildschirmauflösung (ich.e., das nächste Listenelement).

Als nächstes führen Sie die aus Ex02.py Python -Skript wie folgt:

$ python3 ex02.py

Das Python -Skript Ex02.py Sollte Screenshots der angegebenen URL in jedem der ausgewählten Bildschirmauflösungen aufnehmen.

Screenshot von W3schools.com in 320 Pixel Breite.

Screenshot von W3schools.com in 500 Pixel Breite.

Screenshot von W3schools.com in 720 Pixel Breite.

Screenshot von W3schools.com in 1366 Pixel Breite.

Screenshot von W3schools.com 1920 Pixel Breite.

Wenn Sie die Screenshots vergleichen, sollten Sie sehen, dass sich die Benutzeroberfläche mit der Breite des Browserfensters ändert. Mit der Selenium Screenshot -Funktion können Sie schnell und einfach sehen, wie Ihre Website auf verschiedenen Bildschirmauflösungen aussieht.

Abschluss

Dieser Artikel hat Ihnen einige der Grundlagen für die Einnahme von Screenshots mit Selen und den Chrome- und Firefox -Web -Treibern gezeigt. Der Artikel hat Ihnen auch gezeigt, wie Sie Screenshots in verschiedenen Bildschirmauflösungen machen können. Dies sollte Ihnen helfen, mit der Selenium -Screenshot -Funktion zu beginnen.