Acquisizione di schermate con Selenium WebDriver

1. Panoramica

Quando si lavora con test automatici utilizzando Selenium, spesso è necessario acquisire uno screenshot di una pagina Web o di una parte di una pagina Web. Questo può essere utile, in particolare quando si esegue il debug di errori di test o si verifica che il comportamento della nostra applicazione sia coerente su browser diversi.

In questo breve tutorial, daremo un'occhiata a un paio di modi in cui possiamo catturare screenshot usando Selenium WebDriver dai nostri test JUnit . Per saperne di più sui test con il selenio, consulta la nostra fantastica guida al selenio.

2. Dipendenze e configurazione

Cominciamo aggiungendo la dipendenza Selenio al nostro pom.xml :

 org.seleniumhq.selenium selenium-java 3.141.59 

Come sempre, l'ultima versione di questo artefatto può essere trovata in Maven Central.

Ora configuriamo il nostro driver per utilizzare Chrome dal nostro unit test:

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/"); }

Come possiamo vedere, questa è una configurazione Selenium piuttosto standard per un ChromeDriver che ci consentirà di controllare il browser Chrome in esecuzione sul nostro computer locale. Configuriamo anche la quantità di tempo che il driver deve attendere durante la ricerca di un elemento sulla pagina a cinque secondi.

Infine, prima di eseguire uno qualsiasi dei nostri test, apriamo una pagina Web preferita, www.google.com nella finestra del browser corrente.

3. Acquisire uno screenshot dell'area visualizzabile

In questo primo esempio, daremo uno sguardo all'interfaccia di TakesScreenShot , che Selenium fornisce immediatamente . Come suggerisce il nome, possiamo utilizzare questa interfaccia per acquisire screenshot dell'area visualizzabile.

Creiamo un metodo semplice per acquisire schermate utilizzando questa interfaccia:

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

In questo metodo conciso, convertiamo prima il nostro driver in un TakesScreenshot usando un cast. Allora possiamo chiamare il getScreenshotAs metodo, con il specificato OutputType per creare un file immagine .

Successivamente, possiamo copiare il file in qualsiasi posizione desiderata utilizzando il metodo Apache Commons IO copyFile . Abbastanza bello! In sole due righe siamo in grado di catturare screenshot .

Vediamo ora come possiamo utilizzare questo metodo da uno unit test:

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

In questo unit test, salviamo il file immagine risultante nella nostra cartella test / resources utilizzando il nome file google-home.png prima di asserire per vedere se il file esiste.

4. Acquisizione di un elemento sulla pagina

In questa sezione successiva, daremo un'occhiata a come possiamo catturare uno screenshot di un singolo elemento sulla pagina. Per questo, useremo una libreria chiamata aShot, una libreria di utilità per screenshot supportata nativamente da Selenium 3 in poi .

Poiché aShot è disponibile da Maven Central, possiamo semplicemente includerlo nel nostro pom.xml :

 ru.yandex.qatools.ashot ashot 1.5.4 

La libreria aShot fornisce un'API fluente per configurare esattamente come vogliamo catturare gli screenshot.

Ora vediamo come possiamo catturare il logo dalla home page di Google da uno dei nostri unit test:

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

Iniziamo trovando un WebElement nella pagina utilizzando id hplogo. Quindi creiamo una nuova istanza AShot e impostiamo una delle strategie di scatto integrate - ShootingStrategies.viewportPasting (1000) . Questa strategia farà scorrere la visualizzazione mentre acquisiamo lo screenshot per un massimo di un secondo (1ooom) .

Ora abbiamo configurato la politica su come vogliamo acquisire il nostro screenshot.

Quando vogliamo catturare un elemento specifico nella pagina, internamente aShot troverà la dimensione e la posizione di un elemento e ritaglierà l'immagine originale. Per questo, chiamiamo il metodo coordsProvider e passiamo una classe WebDriverCoordsProvider che utilizzerà l'API WebDriver per trovare le coordinate.

Nota che, per impostazione predefinita, aShot utilizza jQuery per la risoluzione delle coordinate. Ma alcuni driver hanno problemi con Javascript .

Ora possiamo chiamare il metodo takeScreenshot passando il nostro driver e l' elemento logo che, a sua volta, ci darà un oggetto Screenshot contenente il risultato della nostra cattura dello schermo. Come prima, terminiamo il nostro test scrivendo un file immagine e verificandone l'esistenza.

5. conclusione

In questo breve tutorial, abbiamo visto due approcci per acquisire schermate utilizzando Selenium WebDriver.

Nel primo approccio, abbiamo visto come catturare l'intero schermo usando direttamente Selenium. Quindi abbiamo imparato come catturare un elemento specifico nella pagina utilizzando una grande libreria di utilità chiamata aShot.

Uno dei principali vantaggi dell'utilizzo di aShot è che diversi WebDriver si comportano in modo diverso quando acquisiscono screenshot. L'uso di aShot ci allontana da questa complessità e ci dà risultati trasparenti indipendentemente dal driver che stiamo utilizzando . Assicurati di controllare la documentazione completa per vedere tutte le funzionalità supportate disponibili.

Come sempre, il codice sorgente completo dell'articolo è disponibile su GitHub.