streamalism.org

1. Oversigt

Når vi arbejder med automatiserede tests ved hjælp af Selen, er vi ofte nødt til at tage et screenshot af en webside eller en del af en webside. Dette kan være nyttigt, især når fejlretning af testfejl eller kontrol af vores applikationsadfærd er konsistent på tværs af forskellige browsere.

I denne hurtige vejledning vi ser på et par måder, hvorpå vi kan fange skærmbilleder ved hjælp af Selenium WebDriver fra vores JUnit-tests. For at lære mere om test med selen, se vores fantastiske guide til selen.

2. Afhængigheder og konfiguration

Lad os starte med at tilføje Selen-afhængighed til vores pom.xml:

 org.seleniumhq.selenium selen-java 3.141.59 

Som altid kan den nyeste version af denne artefakt findes i Maven Central.

Lad os nu konfigurere vores driver til at bruge Chrome fra vores enhedstest:

privat statisk ChromeDriver-driver; @BeforeClass offentlig statisk ugyldig setUp () {System.setProperty ("webdriver.chrome.driver", resolResourcePath ("chromedriver.mac")); Kapacitetsfunktioner = DesiredCapabilities.chrome (); driver = ny ChromeDriver (kapaciteter); driver.manage () .timeouts () .implicitlyWait (5, TimeUnit.SECONDS); driver.get ("// www.google.com/"); }

Som vi kan se, er dette en ret standard Selen-konfiguration til en ChromeDriver som lader os kontrollere Chrome-browseren, der kører på vores lokale maskine. Vi konfigurerer også, hvor lang tid føreren skal vente, når han søger efter et element på siden til fem sekunder.

Endelig, inden nogen af ​​vores tests kører, åbner vi en yndlingswebside, www.google.com i det aktuelle browservindue.

3. Tag et skærmbillede af det synlige område

I dette første eksempel ser vi på TakesScreenShot interface, som Selen leverer out-of-the-box. Som navnet antyder, kan vi bruge denne grænseflade til at tage skærmbilleder af det synlige område.

Lad os oprette en enkel metode til at tage skærmbilleder ved hjælp af denne grænseflade:

offentlig ugyldighed takeScreenshot (Stienavn) kaster IOException {File src = ((TakesScreenshot) driver) .getScreenshotAs (OutputType.FILE); FileUtils.copyFile (src, ny fil (stienavn)); } 

I denne koncise metode konverterer vi først vores driver til en TakesScreenshot ved hjælp af en rollebesætning. Så kan vi kalde getScreenshotAs metode med den specificerede OutputType for at oprette en billedfil.

Derefter kan vi kopiere filen til ethvert ønsket sted ved hjælp af Apache Commons IO copyFile metode. Temmelig sejt! På kun to linjer er vi i stand til at fange skærmbilleder.

Lad os nu se, hvordan vi kan bruge denne metode fra en enhedstest:

@Test offentlig ugyldig, nårGoogleIsLoaded_thenCaptureScreenshot () kaster IOException {takeScreenshot (resolTestResourcePath ("google-home.png")); assertTrue (ny fil (resolutionTestResourcePath ("google-home.png")). eksisterer ()); }

I denne enhedstest gemmer vi den resulterende billedfil til vores test / ressourcer mappe ved hjælp af filnavnet google-home.png inden du hævder for at se, om filen findes.

4. Optagelse af et element på siden

I dette næste afsnit vil vi se på, hvordan vi kan fange et screenshot af et individuelt element på siden. Til dette bruger vi et bibliotek kaldet aShot, et skærmbilledværktøjsbibliotek, der oprindeligt understøttes af Selenium 3 og fremefter.

Da aShot er tilgængelig fra Maven Central, kan vi bare inkludere det i vores pom.xml:

 ru.yandex.qatools.ashot ashot 1.5.4 

AShot-biblioteket giver et flydende API til konfiguration af, hvor præcist vi vil fange skærmbilleder.

Lad os nu se, hvordan vi kan fange logoet fra Googles startside fra en af ​​vores enhedstest:

@Test offentligt ugyldigt nårGoogleIsLoaded_thenCaptureLogo () kaster IOException {WebElement logo = driver.findElement (By.id ("hplogo")); Skærmbillede screenshot = nyt AShot (). ShootingStrategy (ShootingStrategies.viewportPasting (1000)) .coordsProvider (nyt WebDriverCoordsProvider ()). TakeScreenshot (driver, logo); ImageIO.write (screenshot.getImage (), "jpg", ny fil (resolutionTestResourcePath ("google-logo.png"))); assertTrue (ny fil (resolTestResourcePath ("google-logo.png")). eksisterer ()); }

Vi starter med at finde en WebElement på siden ved hjælp af id'et hplogo. Så skaber vi et nyt Et skud eksempel og sæt en af ​​de indbyggede skydestrategier - ShootingStrategies.viewportPasting (1000). Denne strategi vil rulle visningen, mens vi tager vores skærmbillede i maksimalt et sekund (1oooms).

Nu har vi politikken for, hvordan vi vil tage vores skærmbillede konfigureret.

Når vi ønsker at fange et bestemt element på siden internt, finder aShot et elements størrelse og placering og beskærer det originale billede. Til dette kalder vi coordsProvider metode og bestå en WebDriverCoordsProvider klasse, der bruger WebDriver API til at finde eventuelle koordinater.

Bemærk, at aShot som standard bruger jQuery til koordinatopløsning. Men nogle chauffører har problemer med Javascript.

Nu kan vi kalde takeScreenshot metode, der passerer vores chauffør og logo element, som igen vil give os et Skærmbillede objekt, der indeholder resultatet af vores skærmoptagelse. Som før afslutter vi vores test med at skrive en billedfil og kontrollere dens eksistens.

5. Konklusion

I denne hurtige vejledning har vi set to tilgange til optagelse af skærmbilleder ved hjælp af Selenium WebDriver.

I den første tilgang så vi, hvordan man fanger hele skærmen ved hjælp af Selen direkte. Derefter lærte vi, hvordan man fanger et bestemt element på siden ved hjælp af et fantastisk hjælpebibliotek kaldet aShot.

En af de største fordele ved at bruge aShot er, at forskellige WebDrivers opfører sig forskelligt, når de tager skærmbilleder. Brug af aShot trækker os væk fra denne kompleksitet og giver os gennemsigtige resultater, uanset hvilken driver vi bruger. Sørg for at tjekke den komplette dokumentation for at se alle tilgængelige understøttede funktioner.

Som altid er artiklens fulde kildekode tilgængelig på GitHub.