Cómo manejar iFrames en Selenium Controlador web: cambiar a ()

iFrame en Selenium controlador web

iFrame en Selenium controlador web es una página web o un marco en línea que está incrustado en otra página web o un documento HTML incrustado dentro de otro documento HTML. El iframe se utiliza a menudo para agregar contenido de otras fuentes, como un anuncio, a una página web. El iframe se define con el <iframe> etiqueta.

Cómo identificar el iFrame

No podemos detectar los marcos con solo ver la página o inspeccionar Firebug.

Observe la imagen de abajo, donde se muestra el anuncio.yed es un Iframe, no podemos localizarlo ni reconocerlo simplemente inspeccionando con Firebug. Entonces la pregunta es ¿cómo se puede identificar el iframe?

Identificar el iframe
Cómo identificar el iframe usando Selenium Controlador web

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

  • Haga clic derecho en el elemento. Si encuentra la opción "Este marco", entonces es un iframe (consulte el diagrama anterior).
  • Haga clic derecho en la página y haga clic en "Ver código fuente de la página" y busque con el "iframe". Si puede encontrar algún nombre de etiqueta con el "iframe", significa que la página consta de un iframe.

En el diagrama de arriba, puedes ver que 'Este cuadroLa opción 'está disponible al hacer clic derecho, por lo que ahora estamos seguros de que es un iframe.

Incluso podemos identificar el número total de iframes utilizando el siguiente fragmento.

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

Cómo manejar marcos en Selenium usando comandos de WebDriver

Básicamente, podemos cambiar los elementos y manejar marcos en Selenium usando 3 maneras.

  • Por índice
  • Por nombre o identificación
  • Por elemento web

Método 1: cambiar al cuadro por índice

El índice es uno de los atributos para el manejo de cuadros en Selenium a través del cual podemos cambiar a él.

El índice del iframe comienza con "0".

Supongamos que si hay 100 marcos en la página, podemos cambiar al marco en Selenium mediante el uso de índice.

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

Método 2: cambiar al marco por nombre o ID

Nombre e ID son atributos para manejar marcos en Selenium a través del cual podemos cambiar al iframe.

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

Ejemplo de cambio a iframe mediante ID:

al marco por elemento web

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

Manejar marcos hacia adentro Selenium Uso de comandos de WebDriver

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

Paso 1)

WebDriver driver = new FirefoxDriver();

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

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

  • Inicializamos el Firefox conductor.
  • Navegue hasta el sitio "guru99" que contiene el iframe.
  • Maximizó la ventana.

Paso 2)

driver.switchTo().frame("a077aa5e");
  • En este paso necesitamos averiguar la identificación del iframe inspeccionando 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í necesitamos averiguar la xpath del elemento en el que se hará clic.
  • Haga clic en el elemento usando 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("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***************");
      }
}		

Salida:

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

Método 3: cambiar al marco por elemento web

Incluso podemos cambiar al iframe usando el elemento web.

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

Cómo volver al marco principal

Tenemos que salir del iframe.

Para volver al marco principal, puede usar switchTo().parentFrame() o si desea volver al marco principal (o a la mayoría de los principales), 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 en la página y no hay ningún ID disponible, en este caso, simplemente no sabemos desde qué elemento iframe requerido se está cargando (este es el caso cuando no conocemos el índice del marco también).

La solución al problema anterior es que debemos encontrar el índice del iframe a través del cual se carga el elemento y luego debemos cambiar al iframe a través del índice.

A continuación se detallan los pasos para encontrar el índice del marco mediante el cual se carga el elemento utilizando el siguiente fragmento

Paso 1)

WebDriver driver = new FirefoxDriver();
driver.get("https://demo.guru99.com/test/guru99home/");
driver.manage().window().maximize();
  • Inicializar el Firefox conductor.
  • Navegue hasta el sitio "guru99" que contiene el iframe.
  • Maximizó la ventana.

Paso 2)

int size = driver.findElements(By.tagName("iframe")).size();
  • El código anterior encuentra el número total de iframes presentes dentro de la página utilizando el nombre de etiqueta "iframe".

Paso 3)

Objetivo para Este paso sería averiguar el índice del 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();}

El "forloop" anterior itera todos los iframes de la página e imprime '1' si se encontró el iframe requerido; de lo contrario, devuelve '0'.

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

Ejecute este programa y el resultado sería el siguiente:

Salida:

1
0
0
0	
0
0

Verifique la salida, puede encontrar la serie de 0 y 1.

  • Dondequiera que encuentre el '1' en la salida, ese es el índice del marco mediante el cual se carga el elemento.
  • Dado que el índice del iframe comienza con '0' si encuentra el 1 en el 1stlugar, entonces el índice es 0.
  • Si encuentras 1 de cada 3rd lugar, el índice es 2.

Podemos comentar el bucle for, una vez que encontremos el índice.

Paso 4)

driver.switchTo().frame(0);
  • Una vez que encuentre el índice del elemento, puede cambiar el marco usando el comando anterior.
  • driver.switchTo().frame(índice encontrado 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("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***************");
	        }
	    }

Salida:

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

Concepto de marcos anidados en Selenium

Supongamos que hay dos marcos uno dentro del otro como se muestra en la imagen a continuación y nuestro requisito es imprimir el texto en el marco exterior y en el marco interior.

En el caso de marcos anidados,

  • Al principio debemos cambiar al marco exterior ya sea por índice o ID del iframe
  • Una vez que cambiamos al marco exterior, podemos encontrar el número total de iframes dentro del marco exterior, y
  • Podemos cambiar al marco interior mediante cualquiera de los métodos conocidos.

Al salir del marco, debemos salir en el mismo orden en que entramos desde el marco interior primero y luego desde el marco exterior.

Concepto de marcos anidados en Selenium
iFrames anidados en Selenium Controlador web

El código HTML para el marco anidado anterior se muestra a continuación.

Concepto de marcos anidados en Selenium

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

A continuación se detallan los pasos para cambiar al marco exterior e imprimir el texto en los marcos exteriores:

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());
  • Cambie al marco exterior.
  • Imprime el texto en el marco exterior.

Una vez que cambiamos al marco exterior, debemos saber si hay algún marco interior presente dentro del 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);
  • Calcula el número total de iframes dentro del marco exterior.
  • Si se encontró que el tamaño es "0", entonces no hay ningún marco interior dentro del marco.

Paso 3)

driver.switchTo().frame(0); // Switching to innerframe
System.out.println(driver.findElement(By.xpath("xpath of the inner element ")).getText());
  • Cambiar al marco interior
  • Imprime el texto en el marco interior.

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

Salida:

El resultado del código anterior imprimiría el texto en el marco interior y el marco exterior.