Vytváranie snímok obrazovky pomocou selénu WebDriver

1. Prehľad

Pri práci s automatizovanými testami pomocou selénu často musíme urobiť snímku obrazovky webovej stránky alebo jej časti. To môže byť užitočné, najmä keď ladenie zlyhaní testu alebo overovanie konzistentného správania našej aplikácie naprieč rôznymi prehliadačmi.

V tomto rýchlom návode sa pozrieme na niekoľko spôsobov, ako môžeme zachytiť snímky obrazovky pomocou nástroja Selenium WebDriver z našich testov JUnit. Ak sa chcete dozvedieť viac informácií o testovaní na seléne, prečítajte si nášho skvelého sprievodcu selénom.

2. Závislosti a konfigurácia

Začnime pridaním závislosti od selénu k našej pom.xml:

 org.selenhq.selenium selenium-java 3,141,59 

Najnovšiu verziu tohto artefaktu nájdete ako vždy v Maven Central.

Teraz nakonfigurujme náš ovládač tak, aby používal Chrome z nášho testu jednotky:

súkromný statický ovládač ChromeDriver; @BeforeClass public static void setUp () {System.setProperty ("webdriver.chrome.driver", resolveResourcePath ("chromedriver.mac")); Schopnosti schopností = DesiredCapabilities.chrome (); ovládač = nový ChromeDriver (možnosti); driver.manage () .timeouts () .implicitlyWait (5, TimeUnit.SECONDS); driver.get ("// www.google.com/"); }

Ako vidíme, jedná sa o celkom štandardnú konfiguráciu selénu pre a ChromeDriver čo nám umožní ovládať prehliadač Chrome spustený na našom lokálnom počítači. Konfigurujeme tiež čas, ktorý by vodič mal čakať pri hľadaní prvku na stránke, na päť sekúnd.

Nakoniec pred spustením ktoréhokoľvek z našich testov otvoríme obľúbenú webovú stránku, www.google.com v aktuálnom okne prehliadača.

3. Vytvorte snímku obrazovky viditeľnej oblasti

V tomto prvom príklade sa pozrieme na TakeScreenShot rozhranie, ktoré selén poskytuje ihneď po vybalení. Ako naznačuje názov, toto rozhranie môžeme použiť na snímanie snímok obrazovky viditeľnej oblasti.

Vytvorme jednoduchú metódu na snímanie snímok obrazovky pomocou tohto rozhrania:

public void takeSc Screenshot (String pathname) hodí IOException {File src = ((TakesSc Screenshot) driver) .getSc ScreenshotAs (OutputType.FILE); FileUtils.copyFile (src, nový súbor (cesta)); } 

V tejto stručnej metóde najskôr prevedieme náš ovládač na a Robí snímku obrazovky pomocou obsadenia. Potom môžeme zavolať getSc ScreenshotAs metódou, s uvedenou Typ výstupu vytvoriť obrazový súbor.

Potom môžeme súbor skopírovať na ľubovoľné požadované miesto pomocou rozhrania Apache Commons IO copyFile metóda. Celkom v pohode! Len za dva riadky dokážeme zachytiť snímky obrazovky.

Teraz sa pozrime, ako môžeme túto metódu použiť z testu jednotky:

@Test public void whenGoogleIsLoaded_thenCaptureSc Screenshot () vyvolá IOException {takeSc Screenshot (resolveTestResourcePath ("google-home.png")); assertTrue (nový súbor (resolveTestResourcePath ("google-home.png")). existuje ()); }

V tomto teste jednotky uložíme výsledný obrazový súbor do nášho test / zdroje priečinok pomocou názvu súboru google-home.png pred tvrdením, či súbor existuje.

4. Zachytenie prvku na stránke

V tejto ďalšej časti sa pozrieme na to, ako môžeme na stránke zachytiť snímku obrazovky jednotlivého prvku. Na tento účel použijeme knižnicu s názvom aShot, knižnica pomôcok na snímanie obrazoviek, ktorá je natívne podporovaná programom Selenium 3 a novším.

Pretože aShot je dostupný z Maven Central, môžeme ho jednoducho zahrnúť do nášho pom.xml:

 ru.yandex.qatools.ashot ashot 1.5.4 

Knižnica aShot poskytuje rozhranie Fluent API na konfiguráciu toho, ako presne chceme snímky zachytiť.

Teraz sa pozrime, ako môžeme zachytiť logo z domovskej stránky Google z jedného z našich testov jednotiek:

@ Test public void whenGoogleIsLoaded_thenCaptureLogo () vyvolá IOException {WebElement logo = driver.findElement (By.id ("hplogo")); Screenshot obrazovky = nový AShot (). ShootingStrategy (ShootingStrategies.viewportPasting (1000)) .coordsProvider (nový WebDriverCoordsProvider ()) .takeSc Screenshot (ovládač, logo); ImageIO.write (screenshot.getImage (), "jpg", nový súbor (resolveTestResourcePath ("google-logo.png"))); assertTrue (nový súbor (resolveTestResourcePath ("google-logo.png")). existuje ()); }

Začneme nájdením a WebElement na stránke pomocou id hplogo. Potom vytvoríme nový Strela inštanciu a nastavte jednu zo zabudovaných stratégií snímania - ShootingStrategies.viewportPasting (1 000). Táto stratégia posúva výrez, zatiaľ čo snímame snímku obrazovky, maximálne na jednu sekundu (1oooms).

Teraz máme nakonfigurovanú politiku, ako chceme vytvoriť našu snímku obrazovky.

Ak chceme na stránke zachytiť konkrétny prvok, interne program aShot vyhľadá jeho veľkosť a polohu a orezá pôvodný obrázok. Preto voláme coordsProvider metóda a zložiť a WebDriverCoordsProvider triedy, ktorá použije API WebDriver na vyhľadanie akýchkoľvek súradníc.

Upozorňujeme, že aShot štandardne používa na rozlíšenie súradníc jQuery. Niektorí vodiči ale majú problémy s Javascriptom.

Teraz môžeme volať urobiť fotku obrazovky metóda prechádzajúca našou vodič a logo prvok, ktorý nám zase dá a Screenshot objekt obsahujúci výsledok nášho snímania obrazovky. Rovnako ako predtým, aj tento test ukončíme napísaním obrazového súboru a overením jeho existencie.

5. Záver

V tomto rýchlom výučbe sme videli dva prístupy k snímaniu snímok obrazovky pomocou nástroja Selenium WebDriver.

V prvom prístupe sme videli, ako zachytiť celú obrazovku pomocou selénu priamo. Potom sme sa naučili, ako zachytiť konkrétny prvok na stránke pomocou skvelej knižnice nástrojov s názvom aShot.

Jednou z hlavných výhod používania aShotu je, že rôzne WebDrivers sa pri snímaní snímok obrazovky správajú odlišne. Používanie aShot nás abstrahuje od tejto zložitosti a poskytuje nám transparentné výsledky bez ohľadu na ovládač, ktorý používame. Nezabudnite si prečítať kompletnú dokumentáciu a pozrieť si všetky dostupné podporované funkcie.

Celý zdrojový kód článku je ako vždy k dispozícii na GitHub.


$config[zx-auto] not found$config[zx-overlay] not found