Come gestire gli iFrame in Selenium Driver web: switchTo()

iFrame inserito Selenium Webdriver

iFrame inserito Selenium Webdriver è una pagina Web o un frame in linea incorporato in un'altra pagina Web o un documento HTML incorporato all'interno di un altro documento HTML. L'iframe viene spesso utilizzato per aggiungere contenuti da altre fonti come una pubblicità in una pagina web. L'iframe è definito con il fileiframe> etichetta.

Come identificare l'iFrame

Non possiamo rilevare i frame semplicemente vedendo la pagina o esaminando Firebug.

Osserva l'immagine seguente. La pubblicità visualizzata è un Iframe, non possiamo individuarlo o riconoscerlo semplicemente controllandolo utilizzando Firebug. Quindi la domanda è: come puoi identificare l'iframe?

Identificare l'Iframe
Come identificare l'iframe utilizzando Selenium webdriver

Possiamo identificare i fotogrammi in Selenium utilizzando i metodi indicati di seguito:

  • Fai clic con il tasto destro sull'elemento. Se trovi l'opzione come "Questo frame", allora si tratta di un iframe. (Fai riferimento al diagramma sopra)
  • Fai clic con il pulsante destro del mouse sulla pagina e fai clic su "Visualizza sorgente pagina" e cerca con "iframe", se riesci a trovare un nome di tag con "iframe", significa che la pagina è costituita da un iframe.

Nel diagramma sopra puoi vedere che 'Questo telaio' è disponibile facendo clic con il pulsante destro del mouse, quindi ora siamo sicuri che si tratti di un iframe.

Possiamo anche identificare il numero totale di iframe utilizzando lo snippet seguente.

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

Come gestire i frame in Selenium utilizzando i comandi del WebDriver

Fondamentalmente possiamo scambiare gli elementi e gestire i frame Selenium utilizzando 3 modi.

  • Per indice
  • Per nome o ID
  • Per elemento Web

Metodo 1: passa al fotogramma tramite indice

L'indice è uno degli attributi per la gestione dei frame in Selenium attraverso il quale possiamo passare ad esso.

L'indice dell'iframe inizia con "0".

Supponiamo che se ci sono 100 frame nella pagina, possiamo passare al frame in Selenium utilizzando indice.

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

Metodo 2: Passa al frame tramite Nome o ID

Nome e ID sono attributi per la gestione dei frame Selenium attraverso il quale possiamo passare all'iframe.

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

Esempio di passaggio a iframe tramite ID:

al frame tramite Web Element

Possiamo accedere a questo iframe tramite questo URL seguente: https://demo.guru99.com/test/guru99home/

Maniglia dei fotogrammi verso l'interno Selenium Utilizzo dei comandi del WebDriver

È impossibile fare clic direttamente su iframe XPath poiché è un iframe. Per prima cosa dobbiamo passare al frame e poi possiamo cliccare utilizzando xpath.

Passo 1)

WebDriver driver = new FirefoxDriver();

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

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

  • Inizializziamo il Firefox conducente.
  • Passare al sito "guru99" che consiste nell'iframe.
  • Ingrandita la finestra.

Passo 2)

driver.switchTo().frame("a077aa5e");
  • In questo passaggio dobbiamo scoprire l'ID dell'iframe controllando tramite Firebug.
  • Quindi passa all'iframe tramite ID.

Passo 3)

driver.findElement(By.xpath("html/body/a/img")).click();
  • Qui dobbiamo trovare l'xpath dell'elemento su cui fare clic.
  • Fare clic sull'elemento utilizzando il comando del driver Web mostrato sopra.

Ecco il codice completo:

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

Produzione:

Il browser accede alla pagina costituita dall'iframe precedente e fa clic sull'iframe.

Metodo 3: passa al frame tramite elemento Web

Possiamo anche passare all'iframe utilizzando l'elemento web.

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

Come tornare al frame principale

Dobbiamo uscire dall'iframe.

Per tornare al frame principale, puoi utilizzare switchTo().parentFrame() o se vuoi tornare al frame principale (o alla maggior parte dei frame principali), puoi utilizzare switchTo().defaultContent();

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

Come passare da un frame all'altro, se NON POSSIAMO cambiare utilizzando l'ID o l'elemento Web:

Supponiamo che ci siano 100 frame nella pagina e non sia disponibile alcun ID, in questo caso semplicemente non sappiamo da quale elemento iframe richiesto viene caricato (è il caso in cui non conosciamo l'indice del frame Anche).

La soluzione al problema di cui sopra è che dobbiamo trovare l'indice dell'iframe attraverso il quale viene caricato l'elemento e quindi dobbiamo passare all'iframe tramite l'indice.

Di seguito sono riportati i passaggi per trovare l'indice del frame in base al quale l'elemento viene caricato utilizzando lo snippet seguente

Passo 1)

WebDriver driver = new FirefoxDriver();
driver.get("https://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();
  • Inizializza il Firefox conducente.
  • Passare al sito "guru99" che consiste nell'iframe.
  • Ingrandita la finestra.

Passo 2)

int size = driver.findElements(By.tagName("iframe")).size();
  • Il codice sopra trova il numero totale di iframe presenti all'interno della pagina utilizzando il tagname "iframe".

Passo 3)

Obiettivo per questo passaggio consisterebbe nel scoprire l'indice di 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();}

Sopra "forloop" ripete tutti gli iframe nella pagina e stampa '1' se è stato trovato l'iframe richiesto, altrimenti restituisce '0'.

Ecco il codice completo fino al passaggio 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();}}}

Esegui questo programma e l'output sarà come di seguito:

Produzione:

1
0
0
0	
0
0

Verifica l'output, puoi trovare la serie di 0 e 1.

  • Ovunque trovi l'"1" nell'output che è l'indice di Frame con cui viene caricato l'elemento.
  • Poiché l'indice dell'iframe inizia con "0" se trovi 1 in 1stposto, allora l'indice è 0.
  • Se ne trovi 1 su 3rd posto, l'indice è 2.

Possiamo commentare il ciclo for, una volta trovato l'indice.

Passo 4)

driver.switchTo().frame(0);
  • Una volta trovato l'indice dell'elemento, puoi cambiare il frame usando il comando precedente.
  • driver.switchTo().frame(indice trovato dal passaggio 3);

Passo 5)

driver.findElement(By.xpath("html/body/a/img")).click();
  • Il codice sopra farà clic sull'iframe o sull'elemento nell'iframe.

Quindi il codice completo sarebbe come di seguito:

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

Produzione:

Il browser accede alla pagina costituita dall'iframe precedente e fa clic sull'iframe.

Concetto di frame nidificati in Selenium

Supponiamo che ci siano due riquadri uno dentro l'altro come mostrato nell'immagine sottostante e il nostro requisito è stampare il testo nel riquadro esterno e nel riquadro interno.

Nel caso di frame nidificati,

  • Innanzitutto dobbiamo passare al frame esterno tramite l'indice o l'ID dell'iframe
  • Una volta passati al frame esterno possiamo trovare il numero totale di iframe all'interno del frame esterno e
  • Possiamo passare al frame interno con uno qualsiasi dei metodi conosciuti.

Mentre usciamo dal frame, dobbiamo uscire nello stesso ordine in cui siamo entrati prima dal frame interno e poi dal frame esterno.

Concetto di frame nidificati in Selenium
iFrame nidificati in Selenium webdriver

Il codice HTML per il frame nidificato sopra è mostrato di seguito.

Concetto di frame nidificati in Selenium

Il codice HTML riportato sopra spiega chiaramente il tag iframe (evidenziato in verde) all'interno di un altro tag iframe, indicando la presenza di iframe nidificati.

Di seguito sono riportati i passaggi per passare alla cornice esterna e stampare il testo sulle cornici esterne:

Passo 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());
  • Passa al telaio esterno.
  • Stampa il testo sulla cornice esterna.

Una volta passati al frame esterno, dovremmo sapere se è presente un frame interno all'interno del frame esterno

Passo 2)

size = driver.findElements(By.tagName("iframe")).size();
    // prints the total number of frames inside outer frame           
    System.out.println("Total Frames --" + size);
  • Trova il numero totale di iframe all'interno del frame esterno.
  • Se la dimensione trovata è '0', non è presente alcuna cornice interna all'interno della cornice.

Passo 3)

driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());
  • Passare al telaio interno
  • Stampa il testo sulla cornice interna.

Ecco il codice completo:

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

Uscita:

L'output del codice precedente stamperebbe il testo nel frame interno e nel frame esterno.