Mengambil Tangkapan Skrin Dengan Selenium WebDriver

1. Gambaran keseluruhan

Semasa bekerja dengan ujian automatik menggunakan Selenium, kita sering kali perlu mengambil tangkapan skrin halaman web atau sebahagian halaman web. Ini boleh berguna, terutamanya ketika men-debug kegagalan ujian atau mengesahkan tingkah laku aplikasi kita konsisten di pelayar yang berbeza.

Dalam tutorial ringkas ini, kita akan melihat beberapa cara untuk menangkap tangkapan skrin menggunakan Selenium WebDriver dari ujian JUnit kami . Untuk mengetahui lebih lanjut mengenai ujian dengan Selenium, lihat panduan hebat kami untuk Selenium.

2. Kebergantungan dan Konfigurasi

Mari mulakan dengan menambahkan kebergantungan Selenium ke pom.xml kami :

 org.seleniumhq.selenium selenium-java 3.141.59 

Seperti biasa, versi terbaru artifak ini boleh didapati di Maven Central.

Sekarang mari konfigurasikan pemacu kami untuk menggunakan Chrome dari ujian 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 kita lihat, ini adalah konfigurasi Selenium standard yang cukup untuk ChromeDriver yang akan membolehkan kita mengawal penyemak imbas Chrome yang berjalan di mesin tempatan kita. Kami juga mengkonfigurasi jumlah masa yang harus ditunggu pemandu ketika mencari elemen di halaman hingga lima saat.

Akhirnya, sebelum ujian dijalankan, kami membuka laman web kegemaran, www.google.com di tetingkap penyemak imbas semasa.

3. Ambil Tangkapan Skrin Kawasan yang Dapat Dilihat

Dalam contoh pertama ini, kita akan melihat antara muka TakesScreenShot , yang disediakan oleh Selenium di luar kotak. Seperti namanya, kita dapat menggunakan antara muka ini untuk mengambil tangkapan skrin dari kawasan yang dapat dilihat.

Mari buat kaedah mudah untuk mengambil tangkapan skrin menggunakan antara muka ini:

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

Dalam kaedah ringkas ini, pertama-tama kami menukar pemacu kami menjadi TakesScreenshot menggunakan pemeran. Kemudian kita boleh memanggil kaedah getScreenshotAs , dengan OutputType yang ditentukan untuk membuat fail gambar .

Selepas itu, kita dapat menyalin fail ke lokasi yang dikehendaki dengan menggunakan kaedah copyFile Apache Commons IO . Cukup sejuk! Hanya dalam dua baris, kita dapat menangkap tangkapan skrin .

Sekarang mari kita lihat bagaimana kita boleh menggunakan kaedah ini dari ujian unit:

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

Dalam ujian unit ini, kami menyimpan fail gambar yang dihasilkan ke folder ujian / sumber kami menggunakan nama fail google-home.png sebelum menegaskan untuk melihat apakah fail itu ada.

4. Menangkap Elemen di Halaman

Pada bahagian seterusnya, kita akan melihat bagaimana kita dapat menangkap tangkapan skrin elemen individu di halaman. Untuk ini, kami akan menggunakan perpustakaan yang disebut aShot, pustaka utiliti tangkapan skrin yang disokong oleh Selenium 3 dan seterusnya .

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

 ru.yandex.qatools.ashot ashot 1.5.4 

Perpustakaan aShot menyediakan Fluent API untuk mengkonfigurasi bagaimana sebenarnya yang ingin kita tangkap adalah tangkapan skrin.

Sekarang mari kita lihat bagaimana kita dapat menangkap logo dari laman utama Google dari salah satu ujian unit kami:

@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()); }

Kita mulakan dengan mencari WebElement di halaman menggunakan id hplogo. Kemudian kami membuat contoh AShot baru dan menetapkan salah satu strategi menembak bawaan - ShootingStrategies.viewportPasting (1000) . Strategi ini akan menatal viewport semasa kami mengambil tangkapan skrin kami selama maksimum satu saat (1ooom) .

Sekarang kami mempunyai dasar bagaimana kami mahu tangkapan skrin kami dikonfigurasi.

Apabila kita ingin menangkap elemen tertentu di halaman, secara dalaman, aShot akan mencari ukuran dan kedudukan elemen dan memotong gambar asalnya. Untuk ini, kami memanggil kaedah coordsProvider dan lulus kelas WebDriverCoordsProvider yang akan menggunakan API WebDriver untuk mencari sebarang koordinat.

Perhatikan bahawa, secara lalai, aShot menggunakan jQuery untuk penyelesaian koordinat. Tetapi beberapa pemandu mempunyai masalah dengan Javascript .

Sekarang kita dapat memanggil kaedah takeScreenshot melewati elemen pemacu dan logo kita yang pada gilirannya akan memberi kita objek Tangkapan Layar yang berisi hasil tangkapan layar kita. Seperti sebelumnya, kami menyelesaikan ujian kami dengan menulis fail gambar dan mengesahkan keberadaannya.

5. Kesimpulan

Dalam tutorial ringkas ini, kami telah melihat dua pendekatan untuk menangkap tangkapan skrin menggunakan Selenium WebDriver.

Pada pendekatan pertama, kami melihat bagaimana menangkap keseluruhan skrin menggunakan Selenium secara langsung. Kemudian kami belajar bagaimana menangkap elemen tertentu di halaman menggunakan perpustakaan utiliti hebat yang disebut aShot.

Salah satu faedah utama menggunakan aShot adalah bahawa Pemacu Web yang berbeza berkelakuan berbeza ketika mengambil tangkapan skrin. Menggunakan aShot mengasingkan kita dari kerumitan ini dan memberikan hasil yang telus tanpa mengira pemandu yang kita gunakan . Pastikan untuk melihat dokumentasi lengkap untuk melihat semua ciri yang disokong tersedia.

Seperti biasa, kod sumber penuh artikel terdapat di GitHub.