Saltar al contenido

Cómo manejar iFrames en Selenium Webdriver: switchTo ()

iFrame en Selenium Webdriver

iFrame en Selenium Webdriver es una página web o marco en línea que está incrustado en otra página web o en un documento HTML incrustado en otro documento HTML. El iframe se utiliza a menudo para colocar contenido de otras fuentes, como un anuncio, en una página web. El iframe está definido por eliframe> etiqueta.

En este tutorial, aprenderá:

  1. Cómo identificar el iframe:
  2. Cómo traducir los elementos en iframes usando los comandos del controlador web:
  3. Concepto de marcos de anidamiento (marcos dentro de marcos):

Cómo identificar el iframe:

Solo podemos detectar los marcos viendo la página o inspeccionando Firebug.

Mire la imagen a continuación, el anuncio que se muestra es Iframe, no podemos encontrarlo o identificarlo simplemente explorando Firebug. Entonces, la pregunta es ¿cómo se puede identificar el iframe?

Cómo identificar el iframe usando Selenium WebDriver

Podemos identificar los marcos en Selenium mediante los métodos que se indican a continuación:

En el diagrama de arriba, puede ver que ‘Este cuadroLa opción está disponible con solo un clic derecho, por lo que ahora estamos seguros de que es un iframe.

Incluso podemos identificar el número total de iframes usando la barra de abajo.


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

Cómo traducir los elementos en formularios usando los comandos del controlador web:

Básicamente, podemos mover los elementos y manejar marcos en Selenium usando 3 formas.

Cambiar a cuadro por índice:

Un índice es una de las características del manejo de cuadros en Selenium a través del cual podemos movernos.

El índice del iframe comienza con ‘0’.

Supongamos que hay 100 cuadros por página, podemos convertir a un cuadro en Selenium usando un índice.

Cambiar al marco por nombre o ID:

El nombre y la identificación son atributos para manejar marcos en Selenium a través de los cuales podemos transferirlos al iframe.

Ejemplo de migración a iframe mediante ID:

Tomemos un ejemplo de cómo cambiar un marco en Selenium que se muestra en la imagen a continuación. Nuestro requisito es hacer clic en el iframe.

Podemos acceder a este iframe a través de la siguiente URL:http://demo.guru99.com/test/guru99home/

Es imposible hacer clic en el iframe directamente a través de él. XPath ya que es un iframe. Primero debemos movernos al marco y luego podemos hacer clic usando xpath.

Paso 1)


WebDriver driver = new FirefoxDriver();

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

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

  • Primero ponemos el controlador de Firefox.
  • Vaya al sitio «guru99» que consiste en el iframe.
  • Maximiza la ventana.

Paso 2)

driver.switchTo().frame("a077aa5e");
  • En este paso, necesitamos averiguar la identificación del iframe explorando a través de Firebug.
  • Luego cambie al iframe a través de ID.

Paso 3)

driver.findElement(By.xpath("html/body/a/img")).click();
  • Aquí tenemos que averiguar el xpath del elemento en el que se va a hacer clic.
  • Haga clic en el elemento con el comando del controlador web que se muestra arriba.

Aquí está el código completo:



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

		WebDriver driver = new FirefoxDriver(); //navigates to the Browser
	    driver.get("http://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***************");
      }
}		

Producción:

Un navegador navega a la página que contiene el iframe anterior y hace clic en el iframe.

Cambiar al marco por elemento web:

Incluso podemos cambiar al iframe usando un elemento web.

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

Cómo volver al marco principal

Necesitamos salir del iframe.

Para volver al marco principal, puede cambiar a (). Use ParentFrame () o si desea volver al mainframe (o la mayoría de los padres), puede usar switchTo (). DefaultContent ();


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

Cómo cambiar el marco, si no podemos cambiar usando ID o Elemento Web:

Supongamos que hay 100 marcos por página, y si no hay ID disponible, en este caso no sabemos cuál es el elemento iframe requerido que se está cargando (este también es el caso cuando no conocemos el índice del marco).

La solución a la preocupación anterior es que necesitamos obtener el índice de iframe a través del cual se carga el elemento y luego debemos movernos al iframe a través del índice.

A continuación, se muestran los pasos para obtener el índice de marco a través del cual se carga el elemento utilizando el fragmento a continuación

Paso 1)


WebDriver driver = new FirefoxDriver();
driver.get("http://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();
  • Inicie el controlador de Firefox.
  • Vaya al sitio «guru99», que es el iframe.
  • Maximiza la ventana.

Paso 2)

int size = driver.findElements(By.tagName("iframe")).size();
  • El código anterior encuentra el número total de iframe presentes en la página usando el apodo ‘iframe’.

Paso 3)

Propósito para este paso es averiguar el índice de 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();}


Arriba «forloop» repite todos los artículos en la página e imprime ‘1’ si se encuentra el otro iframe requerido ‘0’.

Aquí está el código completo del paso 3:


public class IndexOfIframe {
public static void main(String[] args) {
	    WebDriver driver = new FirefoxDriver();
	    driver.get("http://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();}}}

Ejecute este programa y la salida sería la siguiente:

Producción:

1
0
0
0	
0
0

Verifique la salida, puede obtener las series 0 y 1.

  • Dondequiera que encuentre el ‘1’ en la salida, ese es el índice de marco a través del cual se carga el elemento.
  • Dado que el índice de iframe comienza con ‘0’ si encuentra el 1 en 1S tdonde, entonces el índice es 0.
  • Si encuentra 1 de cada 3rd en cambio, el índice es 2.

Podemos comentar sobre el bucle, una vez que tengamos el índice. Paso 4)

driver.switchTo().frame(0);				
  • Una vez que encuentre el índice del elemento, puede cambiar el marco usando el comando anterior.
  • frame driver.switchTo (). (índice disponible en el Paso 3);

Paso 5)

driver.findElement(By.xpath("html/body/a/img")).click();
  • El código anterior hará clic en el iframe o elemento en el iframe.

Entonces, el código completo sería el siguiente:


public class SwitchToframe   {
public static void main(String[] args) throws NoSuchElementException{
	    WebDriver driver = new FirefoxDriver();
	    driver.get("http://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***************");
	        }
	    }

Producción: Un navegador navega a la página que contiene el iframe anterior y hace clic en el iframe.

Concepto de marcos de anidamiento (marcos dentro de marcos):

Suponemos que hay dos marcos dentro de otro como se muestra en la imagen a continuación y nuestro requisito es imprimir el texto en el marco exterior y el marco interior. Para marcos de anidamiento,

Cuando salimos del marco, salimos en el mismo orden en que entramos primero desde el marco interior y luego desde el exterior.

IFrames incrustados en Selenium WebDriver

El código HTML para el marco anidado se muestra arriba.

El código HTML anterior explica claramente la etiqueta iframe (resaltada en verde) en otra etiqueta iframe, lo que indica la presencia de foros anidados.

Estos son los pasos para convertir a un marco externo e imprimir el texto en marcos externos: Paso 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()); 

Tan pronto como cambiemos al marco exterior, deberíamos saber si hay algún marco interior en el marco exterior.

Paso 2)


size = driver.findElements(By.tagName("iframe")).size();
    // prints the total number of frames inside outer frame           
    System.out.println("Total Frames --" + size);

Paso 3)


driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());

Aquí está el código 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();
	}
}

Producción: La salida del código anterior imprimirá el texto en el marco interno y externo.