Screenshots mit Selenium WebDriver machen

1. Übersicht

Wenn wir mit automatisierten Tests mit Selen arbeiten, müssen wir häufig einen Screenshot einer Webseite oder eines Teils einer Webseite machen. Dies kann insbesondere dann nützlich sein, wenn das Debuggen von Testfehlern oder das Überprüfen des Anwendungsverhaltens in verschiedenen Browsern konsistent ist.

In diesem kurzen Tutorial sehen wir uns einige Möglichkeiten an, wie wir Screenshots mit Selenium WebDriver aus unseren JUnit-Tests aufnehmen können . Weitere Informationen zum Testen mit Selen finden Sie in unserem großartigen Leitfaden zu Selen.

2. Abhängigkeiten und Konfiguration

Beginnen wir mit dem Hinzufügen der Selen-Abhängigkeit zu unserer pom.xml :

 org.seleniumhq.selenium selenium-java 3.141.59 

Wie immer befindet sich die neueste Version dieses Artefakts in Maven Central.

Jetzt konfigurieren wir unseren Treiber für die Verwendung von Chrome aus unserem Komponententest:

private static ChromeDriver driver; @BeforeClass public static void setUp() { System.setProperty("webdriver.chrome.driver", resolveResourcePath("chromedriver.mac")); Capabilities capabilities = DesiredCapabilities.chrome(); driver = new ChromeDriver(capabilities); driver.manage() .timeouts() .implicitlyWait(5, TimeUnit.SECONDS); driver.get("//www.google.com/"); }

Wie wir sehen können, ist dies eine ziemlich standardmäßige Selenium-Konfiguration für einen ChromeDriver, mit der wir den Chrome-Browser steuern können, der auf unserem lokalen Computer ausgeführt wird. Wir konfigurieren auch die Wartezeit des Treibers bei der Suche nach einem Element auf der Seite auf fünf Sekunden.

Bevor einer unserer Tests ausgeführt wird, öffnen wir im aktuellen Browserfenster eine bevorzugte Webseite, www.google.com .

3. Machen Sie einen Screenshot des sichtbaren Bereichs

In diesem ersten Beispiel werfen wir einen Blick auf die TakesScreenShot- Oberfläche, die Selenium standardmäßig bereitstellt. Wie der Name schon sagt, können wir diese Oberfläche verwenden, um Screenshots des sichtbaren Bereichs zu machen.

Erstellen wir eine einfache Methode zum Erstellen von Screenshots über diese Oberfläche:

public void takeScreenshot(String pathname) throws IOException { File src = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(src, new File(pathname)); } 

Bei dieser prägnanten Methode konvertieren wir unseren Treiber zunächst mithilfe einer Besetzung in einen TakesScreenshot . Dann können wir die Methode getScreenshotAs mit dem angegebenen OutputType aufrufen , um eine Bilddatei zu erstellen .

Danach können wir die Datei mit der Apache Commons IO copyFile- Methode an einen beliebigen Speicherort kopieren . Ziemlich cool! In nur zwei Zeilen können wir Screenshots aufnehmen .

Nun wollen wir sehen, wie wir diese Methode aus einem Unit-Test verwenden können:

@Test public void whenGoogleIsLoaded_thenCaptureScreenshot() throws IOException { takeScreenshot(resolveTestResourcePath("google-home.png")); assertTrue(new File(resolveTestResourcePath("google-home.png")).exists()); }

In diesem Komponententest speichern wir die resultierende Bilddatei unter dem Dateinamen google-home.png in unserem Ordner test / resources, bevor wir bestätigen, ob die Datei vorhanden ist.

4. Erfassen eines Elements auf der Seite

In diesem nächsten Abschnitt sehen wir uns an, wie wir einen Screenshot eines einzelnen Elements auf der Seite aufnehmen können. Zu diesem Zweck verwenden wir eine Bibliothek namens aShot, eine Screenshot-Dienstprogrammbibliothek, die ab Selenium 3 nativ unterstützt wird .

Da aShot von Maven Central erhältlich ist, können wir es einfach in unsere pom.xml aufnehmen :

 ru.yandex.qatools.ashot ashot 1.5.4 

Die aShot-Bibliothek bietet eine Fluent-API zum Konfigurieren, wie genau Screenshots erfasst werden sollen.

Lassen Sie uns nun sehen, wie wir das Logo von der Google-Startseite aus einem unserer Unit-Tests erfassen können:

@Test public void whenGoogleIsLoaded_thenCaptureLogo() throws IOException { WebElement logo = driver.findElement(By.id("hplogo")); Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)) .coordsProvider(new WebDriverCoordsProvider()) .takeScreenshot(driver, logo); ImageIO.write(screenshot.getImage(), "jpg", new File(resolveTestResourcePath("google-logo.png"))); assertTrue(new File(resolveTestResourcePath("google-logo.png")).exists()); }

Wir beginnen damit, ein WebElement auf der Seite mit der ID hplogo zu finden. Dann erstellen wir eine neue AShot- Instanz und legen eine der integrierten Aufnahmestrategien fest - ShootingStrategies.viewportPasting (1000) . Diese Strategie scrollt durch das Ansichtsfenster, während wir unseren Screenshot für maximal eine Sekunde (1oooms) aufnehmen .

Jetzt haben wir die Richtlinie festgelegt, wie unser Screenshot konfiguriert werden soll.

Wenn wir ein bestimmtes Element auf der Seite intern erfassen möchten, ermittelt aShot die Größe und Position eines Elements und schneidet das Originalbild zu. Dazu rufen wir die coordsProvider- Methode auf und übergeben eine WebDriverCoordsProvider- Klasse, die die WebDriver-API verwendet, um Koordinaten zu finden.

Beachten Sie, dass aShot standardmäßig jQuery für die Koordinatenauflösung verwendet. Einige Treiber haben jedoch Probleme mit Javascript .

Nun können wir das nennen takeScreenshot Methode übergibt unseren Fahrer und Logo Element , das wird, die wiederum gibt uns ein Screenshot Objekt das Ergebnis unserer Screen - Capture enthalten. Nach wie vor beenden wir unseren Test, indem wir eine Bilddatei schreiben und deren Existenz überprüfen.

5. Schlussfolgerung

In diesem kurzen Tutorial haben wir zwei Ansätze zum Erfassen von Screenshots mit Selenium WebDriver gesehen.

Im ersten Ansatz haben wir gesehen, wie der gesamte Bildschirm mit Selenium direkt erfasst werden kann. Dann haben wir gelernt, wie man ein bestimmtes Element auf der Seite mit einer großartigen Dienstprogrammbibliothek namens aShot erfasst.

Einer der Hauptvorteile der Verwendung von aShot besteht darin, dass sich verschiedene WebDriver beim Aufnehmen von Screenshots unterschiedlich verhalten. Die Verwendung von aShot abstrahiert uns von dieser Komplexität und liefert uns transparente Ergebnisse, unabhängig vom verwendeten Treiber . Lesen Sie unbedingt die vollständige Dokumentation, um alle unterstützten Funktionen zu sehen.

Wie immer ist der vollständige Quellcode des Artikels auf GitHub verfügbar.