streamalism.org

1. Áttekintés

Amikor a Selenium-ot használó automatizált tesztekkel dolgozunk, gyakran kell képernyőképet készítenünk egy weboldalról vagy egy weboldal részéről. Ez hasznos lehet, különösen akkor, ha a teszthibák hibakeresése vagy az alkalmazás viselkedésének következetes ellenőrzése a különböző böngészőkben.

Ebben a gyors bemutatóban megnézünk néhány módot, hogyan készíthetünk képernyőképeket a Selenium WebDriver használatával JUnit tesztjeinkből. Ha többet szeretne megtudni a szelén teszteléséről, olvassa el a szelénről szóló nagyszerű útmutatónkat.

2. Függőségek és konfiguráció

Kezdjük azzal, hogy hozzáadjuk a szelénfüggőséget a sajátunkhoz pom.xml:

 org.seleniumhq.selenium szelén-java 3.141.59 

Mint mindig, ennek a műtárgynak a legújabb verziója megtalálható a Maven Central-ban.

Most állítsuk be illesztőprogramunkat a Chrome használatára az egységtesztünkből:

privát statikus ChromeDriver illesztőprogram; @BeforeClass public static void setUp () {System.setProperty ("webdriver.chrome.driver", resolResourcePath ("chromedriver.mac")); Képességek képességei = DesiredCapability.chrome (); illesztőprogram = új ChromeDriver (képességek); driver.manage () .timeouts () .implicitlyWait (5, TimeUnit.SECONDS); driver.get ("// www.google.com/"); }

Mint láthatjuk, ez egy elég szokásos szelén konfiguráció a ChromeDriver amelynek segítségével irányíthatjuk a helyi gépünkön futó Chrome böngészőt. Beállítjuk azt az időtartamot is, ameddig a járművezetőnek várnia kell, amikor egy elemet keres az oldalon, öt másodpercre.

Végül, mielőtt bármely tesztünk lefutna, megnyitunk egy kedvenc weboldalt, www.google.com az aktuális böngészőablakban.

3. Készítsen egy képernyőképet a látható területről

Ebben az első példában megnézzük a TakesScreenShot interfész, amelyet a Szelén in-the-box nyújt. Ahogy a neve is sugallja, ezt a felületet használhatjuk a látható terület képernyőképeinek elkészítéséhez.

Hozzunk létre egy egyszerű módszert a képernyőképek elkészítésére ezen a felületen:

public void takeScreenshot (karakterlánc útvonala) dobja az IOException {File src = ((TakesScreenshot) illesztőprogramot) .getScreenshotAs (OutputType.FILE); FileUtils.copyFile (src, új Fájl (elérési út)); } 

Ebben a tömör módszerben először átalakítjuk illesztőprogramunkat a-vá Képernyőképet készít gipsz felhasználásával. Akkor felhívhatjuk a getScreenshotAs módszerrel, a megadottal OutputType képfájl létrehozásához.

Ezt követően az Apache Commons IO segítségével másolhatjuk a fájlt tetszőleges helyre fájl másolás, fájl másolása módszer. Elég jó! Csak két sorban készíthetünk képernyőképeket.

Most nézzük meg, hogyan használhatjuk ezt a módszert egy egységtesztből:

@Test public void, amikorGoogleIsLoaded_thenCaptureScreenshot () dobja az IOException {takeScreenshot (resolTestResourcePath ("google-home.png")); assertTrue (új Fájl (resolTestResourcePath ("google-home.png")). létezik ()); }

Ebben az egységtesztben a kapott képfájlt elmentjük a saját fájlunkba teszt / források mappát a fájlnévvel google-home.png mielőtt állítaná, hogy a fájl létezik-e.

4. Elem rögzítése az oldalon

Ebben a következő szakaszban megvizsgáljuk, hogyan készíthetünk képernyőképet az oldal egyes elemeiről. Ehhez egy aShot nevű könyvtárat fogunk használni, egy screenshot segédkönyvtárat, amelyet natívan támogat a Selenium 3.

Mivel az aShot elérhető a Maven Central-tól, egyszerűen felvehetjük a mi pom.xml:

 ru.yandex.qatools.ashot ashot 1.5.4 

Az aShot könyvtár Fluent API-t biztosít a képernyőképek pontos rögzítéséhez.

Most nézzük meg, hogyan ragadhatjuk meg a logót a Google kezdőlapjáról az egyik egységtesztünkből:

@Test public void whenGoogleIsLoaded_thenCaptureLogo () IOException {WebElement logo = driver.findElement (By.id ("hplogo")) dob; Képernyőkép képernyőképe = new AShot (). ShootingStrategy (ShootingStrategies.viewportPasting (1000)) .coordsProvider (new WebDriverCoordsProvider ()) .takeScreenshot (driver, logo); ImageIO.write (screenshot.getImage (), "jpg", új Fájl (resolTestResourcePath ("google-logo.png"))); assertTrue (új Fájl (ResolTestResourcePath ("google-logo.png")). létezik ()); }

Kezdjük azzal, hogy megtaláljuk a WebElement oldalon az azonosító használatával hplogo. Ezután létrehozunk egy újat Egy lövés és állítsa be az egyik beépített forgatási stratégiát - ShootingStrategies.viewportPasting (1000). Ez a stratégia görgetni fogja a nézetablakot, miközben a képernyőképünket legfeljebb egy másodpercig készítjük (1oooms).

Most megvan az irányelvünk, hogy miként szeretnénk konfigurálni a képernyőképünket.

Amikor egy adott elemet akarunk rögzíteni az oldalon, az aShot megkeresi az elem méretét és helyzetét, és levágja az eredeti képet. Ehhez hívjuk a coordsProvider módszer és adja át a WebDriverCoordsProvider osztály, amely a WebDriver API-t használja a koordináták megtalálásához.

Ne feledje, hogy az aShot alapértelmezés szerint a jQuery programot használja a koordináták felbontásához. De néhány illesztőprogramnak problémái vannak a Javascript-lel.

Most felhívhatjuk a takeScreenshot módszer áthalad a mi sofőr és logó elem, amely viszont a Pillanatkép objektum, amely a képernyőfelvétel eredményét tartalmazza. Mint korábban, úgy tesztünket is befejezzük, hogy egy képfájlt írunk és igazoljuk annak létezését.

5. Következtetés

Ebben a gyors bemutatóban kétféle megközelítést láthattunk a képernyőképek készítéséhez a Selenium WebDriver használatával.

Első megközelítésben azt láttuk, hogyan lehet az egész képernyőt közvetlenül a Selenium segítségével rögzíteni. Ezután megtanultuk, hogyan rögzítsünk egy adott elemet az oldalon az aShot nevű nagyszerű könyvtár segítségével.

Az aShot használatának egyik fő előnye, hogy a különböző WebDriverek másképp viselkednek a képernyőképek készítésekor. Az aShot használata elvon minket ettől a bonyolultságtól, és átlátszó eredményeket ad számunkra, függetlenül a használt illesztőprogramtól. A rendelkezésre álló összes támogatott funkció megtekintéséhez feltétlenül nézze meg a teljes dokumentációt.

Mint mindig, a cikk teljes forráskódja elérhető a GitHubon.