Comment gérer les iFrames dans Selenium Webdriver : switchTo()

iFrame dans le pilote Web Selenium

iFrame dans le pilote Web Selenium est une page Web ou un cadre en ligne intégré dans une autre page Web ou un document HTML intégré dans un autre document HTML. L'iframe est souvent utilisée pour ajouter du contenu provenant d'autres sources, comme une publicité, dans une page Web. L'iframe est définie avec leiframe> balise.

Comment identifier l'iFrame

Nous ne pouvons pas détecter les frames en voyant simplement la page ou en inspectant Firebug.

Observez l'image ci-dessous, la publicité affichée est une Iframe, nous ne pouvons pas la localiser ou la reconnaître en l'inspectant simplement à l'aide de Firebug. La question est donc de savoir comment identifier l'iframe ?

Identifier l'iframe
Comment identifier l'iframe à l'aide de Selenium WebDriver

Nous pouvons identifier les cadres dans Selenium en utilisant les méthodes indiquées ci-dessous :

  • Faites un clic droit sur l'élément, si vous trouvez l'option « Ce cadre », alors il s'agit d'un iframe. (Veuillez vous référer au diagramme ci-dessus)
  • Faites un clic droit sur la page et cliquez sur « Afficher la source de la page » et recherchez avec « iframe ». Si vous pouvez trouver un nom de balise avec « iframe », cela signifie que la page est constituée d'une iframe.

Dans le diagramme ci-dessus, vous pouvez voir que 'Ce cadre' est disponible en cliquant avec le bouton droit, nous sommes donc maintenant sûrs qu'il s'agit d'une iframe.

Nous pouvons même identifier le nombre total d'iframes en utilisant l'extrait ci-dessous.

Int size = driver.findElements(By.tagName("iframe")).size();

Comment gérer les cadres dans Selenium à l'aide des commandes WebDriver

Fondamentalement, nous pouvons basculer les éléments et gérer les cadres dans Selenium de 3 manières.

  • Par indice
  • Par nom ou identifiant
  • Par élément Web

Méthode 1 : Passer au frame par index

L'index est l'un des attributs de gestion des trames dans Selenium grâce auquel nous pouvons y accéder.

L'index de l'iframe commence par « 0 ».

Supposons que s'il y a 100 images dans la page, nous pouvons passer au cadre dans Selenium en utilisant l'index.

  • driver.switchTo().frame(0);
  • driver.switchTo().frame(1);

Méthode 2 : passer au cadre par nom ou ID

Le nom et l'ID sont des attributs de gestion des frames dans Selenium grâce auxquels nous pouvons passer à l'iframe.

  • driver.switchTo().frame("iframe1");
  • driver.switchTo().frame("id of the element");

Exemple de passage à iframe via ID :

au cadre par élément Web

Nous pouvons accéder à cette iframe via cette URL ci-dessous : https://demo.guru99.com/test/guru99home/

Gérer les cadres dans Selenium à l'aide des commandes WebDriver

Il est impossible de cliquer directement sur iframe XPath puisqu'il s'agit d'une iframe. Nous devons d’abord passer au cadre, puis cliquer en utilisant XPath.

Étape 1)

WebDriver driver = new FirefoxDriver();

driver.get("https://demo.guru99.com/test/guru99home/");

driver.manage().window().maximize();

  • Nous initialisons le Firefox chauffeur.
  • Accédez au site « guru99 » qui constitue l’iframe.
  • Maximisé la fenêtre.

Étape 2)

driver.switchTo().frame("a077aa5e");
  • Dans cette étape, nous devons connaître l'identifiant de l'iframe en inspectant via Firebug.
  • Passez ensuite à l'iframe via ID.

Étape 3)

driver.findElement(By.xpath("html/body/a/img")).click();
  • Ici, nous devons connaître le chemin XPath de l'élément sur lequel cliquer.
  • Cliquez sur l'élément à l'aide de la commande du pilote Web indiquée ci-dessus.

Voici le code complet:

public class SwitchToFrame_ID {
public static void main(String[] args) {

		WebDriver driver = new FirefoxDriver(); //navigates to the Browser
	    driver.get("https://demo.guru99.com/test/guru99home/"); 
	       // navigates to the page consisting an iframe

	       driver.manage().window().maximize();
	       driver.switchTo().frame("a077aa5e"); //switching the frame by ID

			System.out.println("********We are switch to the iframe*******");
     		driver.findElement(By.xpath("html/body/a/img")).click();
  		    //Clicks the iframe
       
  			System.out.println("*********We are done***************");
      }
}		

Sortie :

Le navigateur accède à la page composée de l'iframe ci-dessus et clique sur l'iframe.

Méthode 3 : passer au cadre par élément Web

Nous pouvons même passer à l'iframe en utilisant l'élément web .

  • driver.switchTo().frame(WebElement);

Comment revenir au cadre principal

Il faut sortir de l'iframe.

Pour revenir au cadre parent, vous pouvez soit utiliser switchTo().parentFrame() ou si vous souhaitez revenir au cadre principal (ou le plus parent), vous pouvez utiliser switchTo().defaultContent();

	    driver.switchTo().parentFrame();
	    driver.switchTo().defaultContent();

Comment changer de cadre, si nous NE POUVONS PAS changer en utilisant l'ID ou l'élément Web :

Supposons que s'il y a 100 frames dans la page et qu'aucun ID n'est disponible, dans ce cas, nous ne savons tout simplement pas à partir de quel élément iframe requis est chargé (c'est le cas lorsque nous ne connaissons pas l'index du frame aussi).

La solution au problème ci-dessus est que nous devons trouver l'index de l'iframe via lequel l'élément est chargé, puis nous devons passer à l'iframe via l'index.

Vous trouverez ci-dessous les étapes permettant de trouver l'index du cadre par lequel l'élément est chargé à l'aide de l'extrait ci-dessous.

Étape 1)

WebDriver driver = new FirefoxDriver();
driver.get("https://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();
  • Initialisez le Firefox chauffeur.
  • Accédez au site « guru99 » qui contient l'iframe.
  • Maximisé la fenêtre.

Étape 2)

int size = driver.findElements(By.tagName("iframe")).size();
  • Le code ci-dessus trouve le nombre total d'iframes présentes dans la page en utilisant le nom de balise « iframe ».

Étape 3)

Objectif pour cette étape consisterait à découvrir l'index de l'iframe.

for(int i=0; i<=size; i++){
	driver.switchTo().frame(i);
	int total=driver.findElements(By.xpath("html/body/a/img")).size();
	System.out.println(total);
	    driver.switchTo().defaultContent();}

Au-dessus de « forloop » parcourt toutes les iframes de la page et imprime « 1 » si notre iframe requise a été trouvée, sinon renvoie « 0 ».

Voici le code complet jusqu'à l'étape 3 :

public class IndexOfIframe {
public static void main(String[] args) {
	    WebDriver driver = new FirefoxDriver();
	    driver.get("https://demo.guru99.com/test/guru99home/");  
	    driver.manage().window().maximize();
	    //driver.manage().timeouts().implicitlyWait(100, TimeUnit.SECONDS);
	    int size = driver.findElements(By.tagName("iframe")).size();

	    for(int i=0; i<=size; i++){
		driver.switchTo().frame(i);
		int total=driver.findElements(By.xpath("html/body/a/img")).size();
		System.out.println(total);
	    driver.switchTo().defaultContent();}}}

Exécutez ce programme et le résultat ressemblerait à ci-dessous :

Sortie :

1
0
0
0	
0
0

Vérifiez la sortie, vous pouvez trouver la série de 0 et de 1.

  • Partout où vous trouvez le « 1 » dans la sortie, il s’agit de l’index du cadre par lequel l’élément est chargé.
  • Puisque l'index de l'iframe commence par '0' si vous trouvez le 1 dans le 1stplace, alors l’indice est 0.
  • Si vous en trouvez 1 sur 3rd lieu, l'indice est 2.

Nous pouvons commenter la boucle for, une fois que nous avons trouvé l'index.

Étape 4)

driver.switchTo().frame(0);
  • Une fois que vous avez trouvé l'index de l'élément, vous pouvez basculer le cadre à l'aide de la commande ci-dessus.
  • driver.switchTo().frame(index trouvé à l'étape 3);

Étape 5)

driver.findElement(By.xpath("html/body/a/img")).click();
  • Le code ci-dessus clique sur l'iframe ou l'élément dans l'iframe.

Le code complet serait donc comme ci-dessous :

public class SwitchToframe   {
public static void main(String[] args) throws NoSuchElementException{
	    WebDriver driver = new FirefoxDriver();
	    driver.get("https://demo.guru99.com/test/guru99home/");  
	    driver.manage().window().maximize();
	    //int size = driver.findElements(By.tagName("iframe")).size();
	
	/*for(int i=0; i<=size; i++){
	    driver.switchTo().frame(i);
	    int total=driver.findElements(By.xpath("html/body/a/img")).size();
		System.out.println(total);
	    driver.switchTo().defaultContent(); //switching back from the iframe
	 }*/
	            
		//Commented the code for finding the index of the element
	    driver.switchTo().frame(0); //Switching to the frame
		System.out.println("********We are switched to the iframe*******");
		driver.findElement(By.xpath("html/body/a/img")).click();
		
		//Clicking the element in line with Advertisement
	    System.out.println("*********We are done***************");
	        }
	    }

Sortie :

Le navigateur accède à la page composée de l'iframe ci-dessus et clique sur l'iframe.

Concept de cadres imbriqués dans Selenium

Supposons qu'il y ait deux cadres l'un dans l'autre, comme indiqué dans l'image ci-dessous, et notre exigence est d'imprimer le texte dans le cadre extérieur et le cadre intérieur.

Dans le cas de frames imbriquées,

  • Dans un premier temps, nous devons passer au cadre externe soit par l'index, soit par l'ID de l'iframe.
  • Une fois que nous passons au cadre externe, nous pouvons trouver le nombre total d'iframes à l'intérieur du cadre externe, et
  • Nous pouvons passer au cadre interne par l'une des méthodes connues.

En sortant du cadre, nous devons sortir dans le même ordre que celui dans lequel nous y sommes entrés, d'abord depuis le cadre intérieur, puis depuis le cadre extérieur.

Concept de cadres imbriqués dans Selenium
iFrames imbriqués dans Selenium WebDriver

Le code HTML du cadre imbriqué ci-dessus est tel qu'indiqué ci-dessous.

Concept de cadres imbriqués dans Selenium

Le code HTML ci-dessus explique clairement la balise iframe (surlignée en vert) dans une autre balise iframe, indiquant la présence d'iframes imbriquées.

Vous trouverez ci-dessous les étapes pour passer au cadre extérieur et imprimer le texte sur les cadres extérieurs :

Étape 1)

	WebDriver driver=new FirefoxDriver();
	    driver.get("Url");
	    driver.manage().window().maximize();
	    driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);
	    int size = driver.findElements(By.tagName("iframe")).size();
	    System.out.println("Total Frames --" + size);
	    
		// prints the total number of frames 
		driver.switchTo().frame(0); // Switching the Outer Frame    		
	    System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText());
  • Passez au cadre extérieur.
  • Imprime le texte sur le cadre extérieur.

Une fois que nous passons au cadre extérieur, nous devrions savoir si un cadre intérieur est présent à l'intérieur du cadre extérieur.

Étape 2)

size = driver.findElements(By.tagName("iframe")).size();
    // prints the total number of frames inside outer frame           
    System.out.println("Total Frames --" + size);
  • Recherche le nombre total d'iframes à l'intérieur du cadre externe.
  • Si la taille a été trouvée « 0 », alors il n’y a pas de cadre intérieur à l’intérieur du cadre.

Étape 3)

driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());
  • Passer au cadre intérieur
  • Imprime le texte sur le cadre intérieur.

Voici le code complet:

public class FramesInsideFrames {
public static void main(String[] args) {
WebDriver driver=new FirefoxDriver();
	    driver.get("Url");
	    driver.manage().window().maximize();
	    driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);

	    int size = driver.findElements(By.tagName("iframe")).size();
	    System.out.println("Total Frames --" + size);
               
		// prints the total number of frames 
		driver.switchTo().frame(0); // Switching the Outer Frame    		
	    System.out.println (driver.findElement(By.xpath("xpath of the outer element ")).getText());

		//Printing the text in outer frame
		size = driver.findElements(By.tagName("iframe")).size();
	    // prints the total number of frames inside outer frame           
                                                                                                          
	    System.out.println("Total Frames --" + size);
	    driver.switchTo().frame(0); // Switching to innerframe
	    System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());
		
		//Printing the text in inner frame
		driver.switchTo().defaultContent();
	}
}

Sortie:

La sortie du code ci-dessus imprimerait le texte dans le cadre intérieur et le cadre extérieur.