Cómo manejar iFrames en Selenium Controlador web: cambiar a ()
Krishna rungta
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 a continuación. El anuncio que se muestra es un Iframe, no podemos localizarlo ni reconocerlo simplemente inspeccionando con Firebug. Entonces la pregunta es ¿cómo se puede identificar el iframe?
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/
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.
El código HTML para el marco anidado anterior se muestra a continuación.
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.
