Snimanje zaslona s Selenium WebDriver

1. Pregled

Kada radimo s automatiziranim testovima koji koriste Selenium, često moramo napraviti snimku zaslona web stranice ili dijela web stranice. To može biti korisno, posebno kada su otklanjanje pogrešaka u testnim neuspjesima ili provjera dosljednog ponašanja naše aplikacije u različitim preglednicima.

U ovom brzom vodiču, pogledati ćemo nekoliko načina na koje možemo snimiti snimke zaslona pomoću Selenium WebDriver iz naših JUnit testova. Da biste saznali više o testiranju sa selenom, pogledajte naš sjajni vodič za selenij.

2. Ovisnosti i konfiguracija

Počnimo dodavanjem ovisnosti o selenu u našu pom.xml:

 org.seleniumhq.selenium selen-java 3.141.59 

Kao i uvijek, najnoviju verziju ovog artefakta možete pronaći u Maven Central.

Ajmo sada konfigurirati naš upravljački program da koristi Chrome iz našeg jediničnog testa:

privatni statički upravljački program ChromeDriver; @BeforeClass javna statička void setUp () {System.setProperty ("webdriver.chrome.driver", resolResourcePath ("chromedriver.mac")); Sposobnosti sposobnosti = DesiredCapabilities.chrome (); upravljački program = novi ChromeDriver (mogućnosti); driver.manage () .timeouts () .implicitlyWait (5, TimeUnit.SECONDS); driver.get ("// www.google.com/"); }

Kao što vidimo, ovo je prilično standardna Selenium konfiguracija za ChromeDriver što će nam omogućiti nadzor preglednika Chrome koji radi na našem lokalnom računalu. Također konfiguriramo količinu vremena koje bi vozač trebao čekati kada traži element na stranici na pet sekundi.

Napokon, prije nego što se pokrene bilo koji test, otvorimo omiljenu web stranicu, www.google.com u trenutnom prozoru preglednika.

3. Snimite zaslon vidljivog područja

U ovom prvom primjeru ćemo pogledati TakesScreenShot sučelje, koje Selenium nudi odmah. Kao što i samo ime govori, ovo sučelje možemo koristiti za snimanje zaslona vidljivog područja.

Stvorimo jednostavnu metodu za snimanje zaslona pomoću ovog sučelja:

javna praznina takeScreenshot (ime putanje niza) baca IOException {Datoteka src = ((TakesScreenshot) upravljački program) .getScreenshotAs (OutputType.FILE); FileUtils.copyFile (src, nova datoteka (naziv puta)); } 

Ovom sažetom metodom prvo pretvaramo svoj vozač u Snima snimak zaslona pomoću gipsa. Tada možemo nazvati getScreenshotAs metoda, s navedenom OutputType za stvaranje slikovne datoteke.

Nakon toga možemo kopirati datoteku na bilo koje željeno mjesto pomoću Apache Commons IO copyFile metoda. Baš super! U samo dva retka možemo snimiti snimke zaslona.

Sada da vidimo kako možemo koristiti ovu metodu iz jediničnog testa:

@Test public void whenGoogleIsLoaded_thenCaptureScreenshot () baca IOException {takeScreenshot (resolTestResourcePath ("google-home.png")); assertTrue (nova datoteka (resolTestResourcePath ("google-home.png")). postoji ()); }

U ovom jediničnom testu rezultirajuću datoteku slike spremamo u našu test / resursi mapa koja koristi naziv datoteke google-home.png prije nego što utvrdite postoji li datoteka.

4. Snimanje elementa na stranici

U sljedećem ćemo odjeljku pogledati kako možemo snimiti snimku zaslona pojedinog elementa na stranici. Za to ćemo upotrijebiti knjižnicu nazvanu aShot, pomoćnu biblioteku zaslona koju izvorno podržava Selenium 3 nadalje.

Budući da je aShot dostupan u Maven Central, možemo ga jednostavno uključiti u naš pom.xml:

 ru.yandex.qatools.ashot ashot 1.5.4 

Biblioteka aShot nudi Fluent API za konfiguriranje kako točno želimo snimiti snimke zaslona.

Sada da vidimo kako možemo snimiti logotip s Googleove početne stranice iz jednog od naših jediničnih testova:

@Test public void whenGoogleIsLoaded_thenCaptureLogo () baca IOException {WebElement logo = driver.findElement (By.id ("hplogo")); Snimak zaslona = novi AShot (). ShootingStrategy (ShootingStrategies.viewportPasting (1000)) .coordsProvider (novi WebDriverCoordsProvider ()) .takeScreenshot (upravljački program, logotip); ImageIO.write (screenshot.getImage (), "jpg", nova datoteka (resolTestResourcePath ("google-logo.png"))); assertTrue (nova datoteka (resolTestResourcePath ("google-logo.png")). postoji ()); }

Počinjemo s pronalaženjem a WebElement na stranici pomoću id-a hplogo. Tada stvaramo novi Pucanj instancu i postavite jednu od ugrađenih strategija snimanja - ShootingStrategies.viewportPasting (1000). Ova će se strategija pomicati kroz prikaz dok snimamo snimku zaslona najviše jednu sekundu (1oooms).

Sada imamo pravila kako želimo konfigurirati snimku zaslona.

Kada želimo zabilježiti određeni element na stranici, aShot će interno pronaći veličinu i položaj elementa i obrezati izvornu sliku. Zbog toga nazivamo coordsProvider metoda i položiti a WebDriverCoordsProvider klasa koja će koristiti WebDriver API za pronalaženje bilo kakvih koordinata.

Imajte na umu da aShot prema zadanim postavkama koristi jQuery za razlučivanje koordinata. Ali neki vozači imaju problema s Javascriptom.

Sada možemo nazvati slikaj zaslon metoda prolaska naša vozač i logo element koji će nam zauzvrat dati a Snimka zaslona objekt koji sadrži rezultat našeg snimanja zaslona. Kao i prije, test završavamo pisanjem slikovne datoteke i provjerom njezina postojanja.

5. Zaključak

U ovom smo brzom vodiču vidjeli dva pristupa snimanju snimaka zaslona pomoću programa Selenium WebDriver.

U prvom pristupu vidjeli smo kako snimiti cijeli zaslon izravno koristeći Selenium. Tada smo naučili kako snimiti određeni element na stranici pomoću sjajne uslužne biblioteke nazvane aShot.

Jedna od glavnih prednosti upotrebe aShot-a je ta što se različiti WebDrivers različito ponašaju prilikom snimanja zaslona. Korištenje aShota apstrahira nas od ove složenosti i daje transparentne rezultate bez obzira na pokretački program koji koristimo. Svakako provjerite kompletnu dokumentaciju da biste vidjeli sve podržane značajke koje su dostupne.

Kao i uvijek, puni izvorni kôd članka dostupan je na GitHub-u.