Menu

Comment prendre une capture d'écran dans Selenium

how take screenshot selenium

Essayez Notre Instrument Pour Éliminer Les Problèmes

Ce tutoriel explique l'importance de Selenium Screenshot et comment utiliser Ashot pour prendre une capture d'écran dans l'application Selenium avec des exemples:

Les captures d'écran sont essentiellement utilisées dans l'analyse des bogues. Ils aident à comprendre si l'application fonctionne selon les exigences de l'utilisateur ou non.

Pour chaque cas de test, la sortie reçue peut être différente, parfois la sortie correcte est reçue, parfois nous obtenons une erreur, parfois un message d'erreur est reçu en raison de données d'entrée manquantes ou insuffisantes, etc. La capture d'écran aide à suivre les preuves des actions / sorties a reçu.

=> Consultez TOUS les tutoriels Selenium ici

Captures d

Dans ce didacticiel, nous allons apprendre où les captures d'écran Selenium sont nécessaires. Nous discuterons d'Ashot et comment pouvons-nous utiliser Ashot dans Selenium (installation et configuration de ashot ()), apprendre à capturer des captures d'écran dans Selenium (pour toute la page Web, pour un seul élément sur la page et pour une fenêtre actuellement ouverte, en comparant également 2 images), puis regardez quelques exemples où des captures d'écran sont souvent capturées.

Ce que vous apprendrez:

Comprendre les captures d'écran Selenium

Identifiant Gmail

L'image ci-dessus est un exemple de capture d'écran capturée lors de l'exécution de code à partir du site Web Gmail. L'image aide à confirmer que l'utilisateur s'est connecté avec succès au compte de messagerie avec le nom d'utilisateur et le mot de passe corrects.

Ainsi, les captures d'écran sont très utiles pour capturer les actions / sorties reçues après qu'une action est exécutée et aident donc à confirmer qu'une action est exécutée sans aucun problème.

Selenium peut prendre automatiquement des captures d'écran; nous devons simplement ajouter du code pour la capture d'écran dans le processus de toute exécution de code où des captures d'écran sont nécessaires.

Où sont nécessaires des captures d'écran Selenium

Voici les possibilités:

  • Quand il est difficile de trouver un élément sur une page Web.
  • Où il y a un délai d'attente pour rechercher des éléments Web sur une page.
  • Lorsqu'une erreur ou un problème survient dans le système / l'application.
  • Lorsqu'un échec d'assertion est rencontré.

Qu'est-ce que Ashot

Ashot () est un utilitaire tiers pris en charge par le pilote Web Selenium pour capturer les captures d'écran.

quel est le modèle de cascade avec exemple

Ashot () fournit les opérations ci-dessous pour capturer des captures d'écran:

  • Capturer la page entière
  • Capturer l'élément Web
  • Comparer des images

Voyons comment cela fonctionne exactement dans la section suivante.

Caractéristiques d'Ashot:

  • Il est possible de prendre une capture d'écran de la page entière.
  • Il est également possible de prendre une capture d'écran d'un élément Web, qui est pris en charge sur diverses plates-formes comme Android Emulator Browser, iOS Simulator Mobile Safari, les différents navigateurs de bureau).
  • Fournit une comparaison de capture d'écran flexible.
  • Décore les captures d'écran.

Ashot peut prendre des captures d'écran en trois étapes:

  • Capture une capture d'écran de la page entière.
  • Trouvez la taille et la position de l'élément.
  • Coupe la capture d'écran d'origine.

Comment pouvons-nous utiliser Ashot dans le sélénium

Considérez les étapes suivantes pour télécharger et configurer Ashot sur votre machine:

  1. Aller au lien.
  2. Trouvez la dernière version du fichier jar présent pour Ashot.
  3. Téléchargez et enregistrez le fichier jar à un chemin spécifique sur votre machine.
  4. Maintenant, pour ajouter le fichier jar à votre projet dans Eclipse - Allez dans votre projet -> Faites un clic droit -> allez dans les propriétés -> sélectionnez Build Path -> Libraries -> add External Jars
  5. Parcourez le chemin où le fichier jar téléchargé est enregistré.
  6. Sélectionnez le fichier jar, cliquez sur Appliquer et fermez.

Comment capturer des captures d'écran dans Selenium

Selenium fournit des fonctionnalités intégrées pour capturer des captures d'écran. Selon l'exigence, Capture d'écran L'interface est utilisée pour prendre des captures d'écran, lors de l'exécution des scripts Selenium. Ainsi, Selenium Webdriver aide à capturer des captures d'écran pendant l'exécution du code.

Dans la section ci-dessous, nous découvrirons les différents types de captures d'écran capturées.

Voici les types:

Capturer une capture d'écran de:

  • Fenêtre ouverte actuelle
  • La page Web entière
  • Juste un élément Web spécifique
  • Comparaison de l'image de la capture d'écran avec l'image d'origine

Comprenons les points ci-dessus en détail.

# 1) Fenêtre ouverte actuelle

Regardons l'implémentation du code pour gérer les captures d'écran dans Selenium pour la fenêtre actuellement ouverte:

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import org.apache.commons.io.FileUtils; import org.openqa.selenium.OutputType; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.testng.annotations.Test; @Test public class Screenshot { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS);//for page load drv.get('https://opensource-demo.orangehrmlive.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait //Capturing the screenshot File f = ((TakesScreenshot) drv).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(f, new File('C:/Users/Chait/Desktop/Screenshots/screenshot01.png')); //screenshot copied from buffer is saved at the mentioned path. System.out.println('The Screenshot is captured.'); } }

L'image ci-dessous est la sortie de l'implémentation du code ci-dessus. Ici, le site OrangeHRM est ouvert et la capture d'écran de la page de connexion est capturée.

Fenêtre ouverte actuelle

(image la source )

Ainsi, nous pouvons capturer des captures d'écran partout où cela est nécessaire lors de l'exécution du code. La capture d'écran capturée est enregistrée dans un fichier avec l'extension .png ou .jpeg. Nous devons donner le chemin où le fichier image doit être enregistré.

comment créer une liste d'objets en java

# 2) La page Web entière

Regardons le code d'implémentation ci-dessous pour capturer une capture d'écran de la page complète, à l'aide d'Ashot dans Selenium webdriver. Pour cela, considérons l'exemple d'une page (Jmeter-user-defined-variables) de - softwaretestinghelp.com .

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.apache.commons.io.FileUtils; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.OutputType; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; public class Screenshot_EntirePage { public static void main(String() args) throws InterruptedException, IOException { WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://www.softwaretestinghelp.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait WebElement auto = drv.findElement(By.xpath('//ul(@id='mega-menu-primary')/li(6)')); auto.click(); //click Automation tab WebElement jmeter = drv.findElement(By.linkText('JMeter')); //link to JMeter page jmeter.click(); //scroll down to open a link among various links, in the Video Tutorials section of the page JavascriptExecutor js = (JavascriptExecutor) drv; js.executeScript('window.scrollBy(0,1700)'); //scrolling downwards Thread.sleep(1500); WebElement udv = drv.findElement(By.linkText('User-Defined Variables')); udv.click(); //opening User-Defined Variables link Thread.sleep(1500); //Capturing the Screenshot with the help of ashot() Screenshot screenshot=new AShot().takeScreenshot(drv); ImageIO.write(screenshot.getImage(),'PNG',new File('C:\Users\Chait\Desktop\Screenshots\entirepage.png')); //The screenshot to be captured will be in .png image format and would be saved at above mentioned path. System.out.println('Screenshot for full page is captured successfully!'); } }

Ici le variables définies par l'utilisateur jmeter page de notre site Web: www.softwaretestinghelp.com est ouvert, puis nous avons pris une capture d'écran de cette page Web complète (avec l'aide de ashot () en sélénium) au format .png et sauvegardée au chemin souhaité. De la même manière, nous pouvons capturer une capture d'écran de la page entière pour n'importe quelle page Web.

Ainsi, lors de la mise en œuvre du code ci-dessus pour capturer la capture d'écran de la page entière, la sortie reçue est comme indiqué dans l'image ci-dessous pour une capture d'écran complète de la page Web.

Page entière

# 3) Un élément Web

Examinons le code d'implémentation ci-dessous, avec l'utilisation d'Ashot dans Selenium webdriver pour capturer une capture d'écran d'un élément Web spécifique sur la page Web.

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.testng.annotations.Test; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; @Test public class Screenshot_WebEle_Ashot { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://opensource-demo.orangehrmlive.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait WebElement uname = drv.findElement(By.id('txtUsername')); //Username....ID.... uname.sendKeys('Admin'); WebElement pword = drv.findElement(By.id('txtPassword')); //Password....ID.... pword.sendKeys('admin123'); WebElement login_b = drv.findElement(By.xpath('//input(@id='btnLogin')')); login_b.click(); //Login button....XPATH.... WebElement ele = drv.findElement(By.linkText('Maintenance')); ele.click(); //opening link for element for which we want screenshot // pass driver as well as the element in takeScreenshot() method. Screenshot Screenshot_webele = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(drv, ele); // For saving the screenshot in .png/.jpeg format at the desired location ImageIO.write(Screenshot_webele.getImage(),'png',new File('C:\Users\Chait\Desktop\Screenshots\element.jpeg')); System.out.println('Screenshot for specified element captured successfully!'); } }

Ainsi en implémentant le code ci-dessus pour capturer une capture d'écran d'un élément spécifique (ici onglet Maintenance), la sortie reçue est comme indiqué dans l'image ci-dessous.

Maintenance_WebElement 1

Ici, nous choisissons l'onglet «Maintenance» comme élément pour lequel une capture d'écran est requise. Mentionnez le chemin où nous voulons que la capture d'écran soit enregistrée. De la même manière, nous pouvons capturer une capture d'écran pour tout autre élément sur un tel site Web.

# 4) Comparaison de la capture d'écran avec l'image originale

Jetons un coup d'œil au code d'implémentation ci-dessous avec l'utilisation d'Ashot dans Selenium webdriver pour capturer une capture d'écran d'un élément de logo sur la page Web et le comparer avec le logo d'origine.

Pour cela, considérons l'exemple de naukri.com :

package SeleniumPrograms; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.firefox.FirefoxDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.comparison.ImageDiff; import ru.yandex.qatools.ashot.comparison.ImageDiffer; public class Screen_Compare { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://www.naukri.com/nlogin/login'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait // Finding the logo element and capturing its screenshot WebElement logo = drv.findElement(By.xpath('//a(@class='nLogo fl')/img')); Screenshot logoSrcshot = new AShot().takeScreenshot(drv, logo); // Reading the image for comparision BufferedImage expectedImage = ImageIO.read(new File('C:\Users\Chait\Desktop\naukri_Logo.png')); BufferedImage actualImage = logoSrcshot.getImage(); ImageDiffer img_differnece = new ImageDiffer(); // Creating ImageDiffer object and calling the method makeDiff() ImageDiff differnece = img_differnece.makeDiff(actualImage, expectedImage); if (differnece.hasDiff() == true) //Checking the difference using in-built functions) { System.out.println('Both logo images matched') //in case when no difference found } else { System.out.println('The logo images are different'); //in case when difference found } } }

Ainsi, lors de la mise en œuvre du code ci-dessus pour la comparaison de la capture d'écran d'un élément de logo (ici le logo naukri.com), la sortie reçue est comme indiqué dans l'image ci-dessous.

logo naukri

Ici, nous choisissons le logo de «naukri.com», capturons sa capture d'écran, puis nous le comparons au logo d'origine. La différence entre les images se trouve à l'aide des fonctions intégrées. Si aucune différence n'est trouvée dans les 2 images du logo, le programme imprime la sortie comme ' Les deux images du logo correspondent 'Else imprime' Les images du logo sont différentes ».

Exemples où des captures d'écran sont souvent capturées

# 1) Confirmation de déconnexion

Pour nous connecter à un site Web, nous devons entrer le nom d'utilisateur et le mot de passe corrects, après quoi nous nous connectons au site Web. Ensuite, l'utilisateur exécute les options requises et une fois le travail terminé, l'utilisateur se déconnecte.

Donc, si nous fournissons un code pour la capture d'écran après avoir été déconnecté, une nouvelle page de connexion apparaîtra, ce qui confirmera l'action de déconnexion. Veuillez voir l'image ci-dessous pour plus de détails:

confirmation de déconnexion

# 2) Confirmation d'un enregistrement nouvellement créé

L'ajout de code pour la capture d'écran après la création d'un nouvel enregistrement confirme que l'enregistrement a été créé avec succès. Veuillez voir la capture d'écran ci-dessous pour plus de détails.

Confirmation d

Dans le cas où l'enregistrement n'est pas créé, le code ne poursuivra pas la capture d'écran et cela confirmerait que l'enregistrement n'est pas créé avec succès.

# 3) Exemple de sortie manquante / incorrecte

comment afficher les fichiers .json

Cet exemple inclut la création d'un nouvel enregistrement pour le titre du poste sur le site Web d'OrangeHRM. Ici, le champ Titre du poste est marqué «*», ce qui signifie qu’il s’agit d’un champ obligatoire. Ainsi, l'enregistrement ne serait pas créé tant que les champs requis ne seraient pas remplis et nous serions alors en mesure de sauvegarder l'enregistrement. Veuillez voir la capture d'écran ci-dessous pour plus de détails.

Exemple de sortie manquante / incorrecte

Conclusion

Ainsi, dans cet article, nous avons vu où les captures d'écran Selenium sont nécessaires, comment nous pouvons gérer les captures d'écran dans Selenium, qu'est-ce qu'Ashot, comment il peut être téléchargé, configuré et réellement utilisé dans Selenium. Nous avons compris l'implémentation du code pour gérer les captures d'écran et avons également vu quelques exemples où les captures d'écran sont souvent capturées.

=> Lisez le guide complet du sélénium

lecture recommandée