Mengambil Screenshot Dengan Selenium WebDriver

1. Ikhtisar

Saat bekerja dengan pengujian otomatis menggunakan Selenium, kami sering kali perlu mengambil tangkapan layar dari halaman web atau bagian dari halaman web. Ini bisa berguna, terutama saat men-debug kegagalan pengujian atau memverifikasi perilaku aplikasi kita konsisten di berbagai browser.

Dalam tutorial singkat ini, kita akan melihat beberapa cara untuk menangkap screenshot menggunakan Selenium WebDriver dari pengujian JUnit kita . Untuk mempelajari lebih lanjut tentang pengujian dengan Selenium, lihat panduan hebat kami untuk Selenium.

2. Dependensi dan Konfigurasi

Mari kita mulai dengan menambahkan ketergantungan Selenium ke pom.xml kita :

 org.seleniumhq.selenium selenium-java 3.141.59 

Seperti biasa, versi terbaru artefak ini dapat ditemukan di Maven Central.

Sekarang mari konfigurasikan driver kami untuk menggunakan Chrome dari pengujian unit kami:

private static ChromeDriver driver; @BeforeClass public static void setUp() { System.setProperty("webdriver.chrome.driver", resolveResourcePath("chromedriver.mac")); Capabilities capabilities = DesiredCapabilities.chrome(); driver = new ChromeDriver(capabilities); driver.manage() .timeouts() .implicitlyWait(5, TimeUnit.SECONDS); driver.get("//www.google.com/"); }

Seperti yang bisa kita lihat, ini adalah konfigurasi Selenium yang cukup standar untuk ChromeDriver yang memungkinkan kita mengontrol browser Chrome yang berjalan di mesin lokal kita. Kami juga mengonfigurasi jumlah waktu yang harus menunggu pengemudi saat mencari elemen di halaman hingga lima detik.

Terakhir, sebelum pengujian kami berjalan, kami membuka halaman web favorit, www.google.com di jendela browser saat ini.

3. Ambil Screenshot dari Area yang Dapat Dilihat

Dalam contoh pertama ini, kita akan melihat antarmuka TakesScreenShot , yang disediakan Selenium di luar kotak. Seperti namanya, kita bisa menggunakan antarmuka ini untuk mengambil screenshot dari area yang bisa dilihat.

Mari buat metode sederhana untuk mengambil tangkapan layar menggunakan antarmuka ini:

public void takeScreenshot(String pathname) throws IOException { File src = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(src, new File(pathname)); } 

Dalam metode ringkas ini, pertama-tama kami mengubah driver kami menjadi TakesScreenshot menggunakan cast. Kemudian kita dapat memanggil metode getScreenshotAs , dengan OutputType yang ditentukan untuk membuat file gambar .

Setelah itu, kita dapat menyalin file ke lokasi yang diinginkan menggunakan metode copyFile Apache Commons IO . Sangat keren! Hanya dalam dua baris kami dapat menangkap tangkapan layar .

Sekarang mari kita lihat bagaimana kita dapat menggunakan metode ini dari pengujian unit:

@Test public void whenGoogleIsLoaded_thenCaptureScreenshot() throws IOException { takeScreenshot(resolveTestResourcePath("google-home.png")); assertTrue(new File(resolveTestResourcePath("google-home.png")).exists()); }

Dalam pengujian unit ini, kami menyimpan file gambar yang dihasilkan ke folder pengujian / resource kami menggunakan nama file google-home.png sebelum menegaskan untuk melihat apakah file tersebut ada.

4. Menangkap Elemen di Halaman

Di bagian selanjutnya ini, kita akan melihat bagaimana kita dapat menangkap tangkapan layar dari elemen individu di halaman. Untuk ini, kami akan menggunakan pustaka yang disebut aShot, pustaka utilitas tangkapan layar yang secara native didukung oleh Selenium 3 dan seterusnya .

Karena aShot tersedia dari Maven Central, kami dapat memasukkannya ke dalam pom.xml kami :

 ru.yandex.qatools.ashot ashot 1.5.4 

Pustaka aShot menyediakan Fluent API untuk mengonfigurasi bagaimana tepatnya kita ingin menangkap tangkapan layar.

Sekarang mari kita lihat bagaimana kita dapat menangkap logo dari beranda Google dari salah satu pengujian unit kita:

@Test public void whenGoogleIsLoaded_thenCaptureLogo() throws IOException { WebElement logo = driver.findElement(By.id("hplogo")); Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)) .coordsProvider(new WebDriverCoordsProvider()) .takeScreenshot(driver, logo); ImageIO.write(screenshot.getImage(), "jpg", new File(resolveTestResourcePath("google-logo.png"))); assertTrue(new File(resolveTestResourcePath("google-logo.png")).exists()); }

Kami mulai dengan menemukan WebElement di halaman menggunakan id hplogo. Kemudian kami membuat instance AShot baru dan menetapkan salah satu strategi pengambilan gambar bawaan - ShootingStrategies.viewportPasting (1000) . Strategi ini akan menggulir viewport saat kami mengambil tangkapan layar kami untuk maksimal satu detik (1oooms) .

Sekarang kami memiliki kebijakan tentang bagaimana kami ingin mengambil tangkapan layar kami dikonfigurasi.

Saat kita ingin menangkap elemen tertentu pada halaman, secara internal, aShot akan menemukan ukuran dan posisi elemen dan memotong gambar asli. Untuk ini, kami memanggil metode coordsProvider dan meneruskan kelas WebDriverCoordsProvider yang akan menggunakan API WebDriver untuk menemukan koordinat apa pun.

Perhatikan bahwa, secara default, aShot menggunakan jQuery untuk resolusi koordinat. Tetapi beberapa driver mengalami masalah dengan Javascript .

Sekarang kita dapat memanggil metode takeScreenshot dengan meneruskan driver dan elemen logo kita yang pada gilirannya akan memberi kita objek Screenshot yang berisi hasil tangkapan layar kita. Seperti sebelumnya, kami menyelesaikan pengujian kami dengan menulis file gambar dan memverifikasi keberadaannya.

5. Kesimpulan

Dalam tutorial singkat ini, kami telah melihat dua pendekatan untuk mengambil tangkapan layar menggunakan Selenium WebDriver.

Pada pendekatan pertama, kami melihat cara menangkap seluruh layar menggunakan Selenium secara langsung. Kemudian kami belajar cara menangkap elemen tertentu di halaman menggunakan pustaka utilitas hebat yang disebut aShot.

Salah satu manfaat utama menggunakan aShot adalah bahwa WebDriver yang berbeda berperilaku berbeda saat mengambil tangkapan layar. Menggunakan aShot memisahkan kita dari kompleksitas ini dan memberi kita hasil yang transparan terlepas dari driver yang kita gunakan . Pastikan untuk memeriksa dokumentasi lengkap untuk melihat semua fitur pendukung yang tersedia.

Seperti biasa, kode sumber lengkap artikel tersedia di GitHub.