streamalism.org

1. Overzicht

Wanneer we werken met geautomatiseerde tests met Selenium, moeten we vaak een screenshot maken van een webpagina of een deel van een webpagina. Dit kan handig zijn, vooral bij het debuggen van testfouten of het verifiëren van ons applicatiegedrag consistent is in verschillende browsers.

In deze korte tutorial, we zullen een aantal manieren bekijken waarop we schermafbeeldingen kunnen maken met Selenium WebDriver uit onze JUnit-tests. Bekijk onze geweldige gids voor selenium voor meer informatie over testen met selenium.

2. Afhankelijkheden en configuratie

Laten we beginnen met het toevoegen van de Selenium-afhankelijkheid aan onze pom.xml:

 org.seleniumhq.selenium selenium-java 3.141.59 

Zoals altijd is de nieuwste versie van dit artefact te vinden in Maven Central.

Laten we nu onze driver configureren om Chrome te gebruiken vanuit onze unit-test:

privé statisch ChromeDriver-stuurprogramma; @BeforeClass openbare statische leegte setUp () {System.setProperty ("webdriver.chrome.driver", resolResourcePath ("chromedriver.mac")); Mogelijkheden mogelijkheden = DesiredCapabilities.chrome (); driver = nieuwe ChromeDriver (mogelijkheden); driver.manage () .timeouts () .implicitlyWait (5, TimeUnit.SECONDS); driver.get ("// www.google.com/"); }

Zoals we kunnen zien, is dit een vrij standaard Selenium-configuratie voor een ChromeDriver waarmee we de Chrome-browser kunnen besturen die op onze lokale computer wordt uitgevoerd. We configureren ook de hoeveelheid tijd die de bestuurder moet wachten bij het zoeken naar een element op de pagina tot vijf seconden.

Ten slotte openen we voordat een van onze tests wordt uitgevoerd, een favoriete webpagina, www.google.com in het huidige browservenster.

3. Maak een screenshot van het zichtbare gebied

In dit eerste voorbeeld kijken we naar de TakesScreenShot interface, die Selenium out-of-the-box biedt. Zoals de naam al doet vermoeden, kunnen we deze interface gebruiken om schermafbeeldingen te maken van het zichtbare gebied.

Laten we een eenvoudige methode maken om schermafbeeldingen te maken met behulp van deze interface:

public void takeScreenshot (String pathname) gooit IOException {File src = ((TakesScreenshot) driver) .getScreenshotAs (OutputType.FILE); FileUtils.copyFile (src, nieuw bestand (padnaam)); } 

In deze beknopte methode zetten we onze chauffeur eerst om in een TakesScreenshot met behulp van een cast. Dan kunnen we de getScreenshotAs methode, met de opgegeven Uitgangstype om een ​​afbeeldingsbestand te maken.

Daarna kunnen we het bestand naar elke gewenste locatie kopiëren met behulp van de Apache Commons IO Kopieer bestand methode. Best wel gaaf! In slechts twee regels kunnen we schermafbeeldingen maken.

Laten we nu eens kijken hoe we deze methode van een unit-test kunnen gebruiken:

@Test openbare leegte whenGoogleIsLoaded_thenCaptureScreenshot () gooit IOException {takeScreenshot (resolTestResourcePath ("google-home.png")); assertTrue (nieuw bestand (resolTestResourcePath ("google-home.png")). bestaat ()); }

In deze unit-test slaan we het resulterende afbeeldingsbestand op in onze test / bronnen map met de bestandsnaam google-home.png alvorens te beweren om te zien of het bestand bestaat.

4. Een element op de pagina vastleggen

In dit volgende gedeelte zullen we bekijken hoe we een screenshot van een individueel element op de pagina kunnen maken. Hiervoor gebruiken we een bibliotheek met de naam aShot, een bibliotheek met hulpprogramma's voor screenshot die native wordt ondersteund door Selenium 3 en later.

Aangezien aShot beschikbaar is via Maven Central, kunnen we deze gewoon opnemen in onze pom.xml:

 ru.yandex.qatools.ashot ashot 1.5.4 

De aShot-bibliotheek biedt een vloeiende API om te configureren hoe we precies schermafbeeldingen willen vastleggen.

Laten we nu eens kijken hoe we het logo van de Google-startpagina kunnen vastleggen tijdens een van onze unit-tests:

@Test public void whenGoogleIsLoaded_thenCaptureLogo () gooit IOException {WebElement logo = driver.findElement (By.id ("hplogo")); Screenshot screenshot = new AShot (). ShootingStrategy (ShootingStrategies.viewportPasting (1000)) .coordsProvider (nieuwe WebDriverCoordsProvider ()) .takeScreenshot (bestuurder, logo); ImageIO.write (screenshot.getImage (), "jpg", nieuw bestand (resolTestResourcePath ("google-logo.png"))); assertTrue (nieuw bestand (resolTestResourcePath ("google-logo.png")). bestaat ()); }

We beginnen met het vinden van een WebElement op de pagina met behulp van de id hplogo. Vervolgens maken we een nieuw Een schot instantie en stel een van de ingebouwde opnamestrategieën in - ShootingStrategies.viewportPasting (1000). Deze strategie scrolt door de viewport terwijl we onze screenshot maken gedurende maximaal één seconde (1oooms).

Nu hebben we het beleid voor hoe we onze screenshot willen configureren.

Als we een specifiek element op de pagina willen vastleggen, zal aShot intern de grootte en positie van een element zoeken en de originele afbeelding bijsnijden. Hiervoor noemen we de coordinatenProvider methode en geef een WebDriverCoordsProvider class die de WebDriver API zal gebruiken om coördinaten te vinden.

Merk op dat aShot standaard jQuery gebruikt voor het oplossen van coördinaten. Maar sommige stuurprogramma's hebben problemen met Javascript.

Nu kunnen we de screenshot maken methode die onze bestuurder en logo element dat ons op zijn beurt een Screenshot object met het resultaat van onze schermopname. Net als voorheen maken we onze test af door een afbeeldingsbestand te schrijven en het bestaan ​​ervan te verifiëren.

5. Conclusie

In deze korte tutorial hebben we twee benaderingen gezien voor het maken van schermafbeeldingen met Selenium WebDriver.

Bij de eerste benadering zagen we hoe we het hele scherm rechtstreeks met Selenium konden vastleggen. Vervolgens leerden we hoe we een specifiek element op de pagina konden vastleggen met behulp van een geweldige hulpprogramma-bibliotheek genaamd aShot.

Een van de belangrijkste voordelen van het gebruik van aShot is dat verschillende WebDrivers zich anders gedragen bij het maken van schermafbeeldingen. Het gebruik van aShot abstraheert ons van deze complexiteit en geeft ons transparante resultaten, ongeacht de driver die we gebruiken. Bekijk de volledige documentatie om alle ondersteunde functies te zien die beschikbaar zijn.

Zoals altijd is de volledige broncode van het artikel beschikbaar op GitHub.