Prendre des captures d'écran avec Selenium WebDriver

1. Vue d'ensemble

Lorsque vous travaillez avec des tests automatisés utilisant Selenium, nous devons souvent prendre une capture d'écran d'une page Web ou d'une partie d'une page Web. Cela peut être utile, en particulier lorsque le débogage des échecs de test ou la vérification de la cohérence du comportement de notre application dans différents navigateurs.

Dans ce rapide didacticiel, nous examinerons plusieurs façons de capturer des captures d'écran à l'aide de Selenium WebDriver à partir de nos tests JUnit . Pour en savoir plus sur les tests avec Selenium, consultez notre excellent guide sur Selenium.

2. Dépendances et configuration

Commençons par ajouter la dépendance Selenium à notre pom.xml :

 org.seleniumhq.selenium selenium-java 3.141.59 

Comme toujours, la dernière version de cet artefact se trouve dans Maven Central.

Configurons maintenant notre pilote pour utiliser Chrome à partir de notre test unitaire:

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

Comme nous pouvons le voir, il s'agit d'une configuration Selenium assez standard pour un ChromeDriver qui nous permettra de contrôler le navigateur Chrome fonctionnant sur notre machine locale. Nous configurons également la durée pendant laquelle le pilote doit attendre lors de la recherche d'un élément sur la page à cinq secondes.

Enfin, avant l'exécution de l'un de nos tests, nous ouvrons une page Web préférée, www.google.com dans la fenêtre actuelle du navigateur.

3. Prenez une capture d'écran de la zone visible

Dans ce premier exemple, nous allons jeter un œil à l' interface TakesScreenShot , que Selenium fournit prête à l' emploi . Comme son nom l'indique, nous pouvons utiliser cette interface pour prendre des captures d'écran de la zone visible.

Créons une méthode simple pour prendre des captures d'écran à l'aide de cette interface:

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

Dans cette méthode concise, nous convertissons d'abord notre pilote en un TakesScreenshot à l' aide d'un cast. Ensuite, nous pouvons appeler la méthode getScreenshotAs , avec le OutputType spécifié pour créer un fichier image .

Après cela, nous pouvons copier le fichier vers n'importe quel emplacement souhaité à l'aide de la méthode Apache Commons IO copyFile . Plutôt cool! En seulement deux lignes, nous pouvons capturer des captures d'écran .

Voyons maintenant comment nous pouvons utiliser cette méthode à partir d'un test unitaire:

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

Dans ce test unitaire, nous enregistrons le fichier image résultant dans notre dossier test / resources en utilisant le nom de fichier google-home.png avant d'affirmer pour voir si le fichier existe.

4. Capture d'un élément sur la page

Dans cette section suivante, nous verrons comment nous pouvons capturer une capture d'écran d'un élément individuel sur la page. Pour cela, nous utiliserons une bibliothèque appelée aShot, une bibliothèque utilitaire de capture d'écran qui est prise en charge nativement par Selenium 3 et les versions ultérieures .

Comme aShot est disponible depuis Maven Central, nous pouvons simplement l'inclure dans notre pom.xml :

 ru.yandex.qatools.ashot ashot 1.5.4 

La bibliothèque aShot fournit une API Fluent pour configurer la façon exacte dont nous voulons capturer des captures d'écran.

Voyons maintenant comment nous pouvons capturer le logo de la page d'accueil de Google à partir de l'un de nos tests unitaires:

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

Nous commençons par trouver un WebElement sur la page en utilisant l'id hplogo. Ensuite, nous créons une nouvelle instance AShot et définissons l'une des stratégies de prise de vue intégrées - ShootingStrategies.viewportPasting (1000) . Cette stratégie fera défiler la fenêtre pendant que nous prenons notre capture d'écran pendant un maximum d'une seconde (1oooms) .

Nous avons maintenant la politique sur la façon dont nous voulons prendre notre capture d'écran configurée.

Lorsque nous voulons capturer un élément spécifique sur la page, en interne, aShot trouvera la taille et la position d'un élément et recadrera l'image d'origine. Pour cela, nous appelons la méthode coordsProvider et passons une classe WebDriverCoordsProvider qui utilisera l'API WebDriver pour trouver toutes les coordonnées.

Notez que, par défaut, aShot utilise jQuery pour la résolution des coordonnées. Mais certains pilotes ont des problèmes avec Javascript .

Nous pouvons maintenant appeler la méthode takeScreenshot en passant notre pilote et l' élément logo qui, à son tour, nous donneront un objet Screenshot contenant le résultat de notre capture d'écran. Comme précédemment, nous terminons notre test en écrivant un fichier image et en vérifiant son existence.

5. Conclusion

Dans ce tutoriel rapide, nous avons vu deux approches pour capturer des captures d'écran à l'aide de Selenium WebDriver.

Dans la première approche, nous avons vu comment capturer tout l'écran en utilisant directement Selenium. Ensuite, nous avons appris à capturer un élément spécifique sur la page à l'aide d'une excellente bibliothèque utilitaire appelée aShot.

L'un des principaux avantages de l'utilisation d'aShot est que différents WebDrivers se comportent différemment lors de la prise de captures d'écran. Utiliser aShot nous éloigne de cette complexité et nous donne des résultats transparents quel que soit le pilote que nous utilisons . Assurez-vous de consulter la documentation complète pour voir toutes les fonctionnalités prises en charge disponibles.

Comme toujours, le code source complet de l'article est disponible à l'adresse over sur GitHub.