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

Tabla de contenido

iFrame en Selenium Webdriver
Cómo identificar el iframe:
Cómo cambiar los elementos en iframes usando los comandos del controlador web:
Concepto de marcos anidados (marcos dentro de marcos):

iFrame en Selenium Webdriver

iFrame en Selenium Webdriver 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 usa a menudo para agregar contenido de otras fuentes como un anuncio en una página web. El iframe se define con la etiqueta < iframe >.

En este tutorial, aprenderá:

Cómo identificar el iframe:
¿Cómo cambiar los elementos en iframes usando los comandos del controlador web?
Concepto de marcos anidados (marcos dentro de marcos):

Cómo identificar el iframe:

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

Observe la imagen de abajo, el anuncio que se muestra es un iframe, no podemos ubicarlo ni reconocerlo con solo inspeccionarlo con 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 usando los métodos que se detallan a continuación:

Haga clic derecho en el elemento, si encuentra la opción como '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 cualquier nombre de etiqueta con el 'iframe', entonces significa que la página consiste en un iframe.

En el diagrama anterior, puede ver que la opción ' Este marco ' está disponible al hacer clic con el botón derecho, por lo que ahora estamos seguros de que es un iframe.

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

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

Cómo cambiar los elementos en iframes usando los comandos del controlador web:

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

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

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 cambiarlo.

El índice del iframe comienza con '0'.

Supongamos que si hay 100 marcos en la página, podemos cambiar a marco en Selenium usando index.

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

Cambiar al marco por nombre o ID:

El nombre y el ID son atributos para manejar marcos en Selenium a través de los cuales podemos cambiar al iframe.

driver.switchTo (). frame ("iframe1");
driver.switchTo (). frame ("id del elemento");

Ejemplo de cambio a iframe mediante ID:

Tomemos un ejemplo para cambiar el marco en Selenium que se muestra en la imagen de abajo. 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 iframe directamente a través de XPath, ya que es un iframe. Primero tenemos que cambiar al marco y luego podemos hacer clic usando xpath.

Paso 1)

Controlador WebDriver = nuevo FirefoxDriver ();driver.get ("http://demo.guru99.com/test/guru99home/");driver.manage (). window (). maximizar ();

Inicializamos el controlador de Firefox.
Navegue al sitio "guru99" que consiste en el iframe.
Maximizó la ventana.

Paso 2)

driver.switchTo (). frame ("a077aa5e");

En este paso, debemos 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í 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:

clase pública SwitchToFrame_ID {public static void main (String [] args) {Controlador WebDriver = nuevo FirefoxDriver (); // navega al navegadordriver.get ("http://demo.guru99.com/test/guru99home/");// navega a la página que consiste en un iframedriver.manage (). window (). maximizar ();driver.switchTo (). frame ("a077aa5e"); // cambiar el marco por IDSystem.out.println ("******** Cambiamos al iframe *******");driver.findElement (By.xpath ("html / body / a / img")). click ();// Hace clic en el iframeSystem.out.println ("********* Hemos terminado ***************");}}

Producción:

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

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 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 si hay 100 marcos en la página y no hay ID disponible, en este caso, simplemente no sabemos desde qué elemento iframe requerido se está cargando (es el caso cuando no conocemos el índice del marco además).

La solución para la preocupación anterior es que debemos encontrar el índice del iframe a través del cual se está cargando el elemento y luego debemos cambiar al iframe a través del índice.

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

Paso 1)

Controlador WebDriver = nuevo FirefoxDriver ();driver.get ("http://demo.guru99.com/test/guru99home/");driver.manage (). window (). maximizar ();

Inicialice el controlador de Firefox.
Navegue al sitio "guru99" que consiste en 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 usando el nombre de etiqueta 'iframe'.

Paso 3)

El objetivo de este paso sería averiguar el índice de iframe.

para (int i = 0; i <= tamaño; 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" itera todos los iframes en la página e imprime '1' si se encontró nuestro iframe requerido; de lo contrario, devuelve '0'.

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

clase pública IndexOfIframe {public static void main (String [] args) {Controlador WebDriver = nuevo FirefoxDriver ();driver.get ("http://demo.guru99.com/test/guru99home/");driver.manage (). window (). maximizar ();//driver.manage().timeouts().implicitlyWait(100, TimeUnit.SECONDS);int size = driver.findElements (By.tagName ("iframe")). size ();para (int i = 0; i <= tamaño; 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:

Verifique la salida, puede encontrar la serie de ceros y unos.

Dondequiera que encuentre el '1' en la salida, es el índice de Frame por el cual se carga el elemento.
Dado que el índice del iframe comienza con '0' si encuentra el 1 en el ^primer lugar, entonces el índice es 0.
Si encuentras 1 de cada 3 ^er lugar, el índice es 2.

Podemos comentar el ciclo for, una vez que encontramos el index. 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:

SwitchToframe de clase pública {public static void main (String [] args) lanza NoSuchElementException {Controlador WebDriver = nuevo FirefoxDriver ();driver.get ("http://demo.guru99.com/test/guru99home/");driver.manage (). window (). maximizar ();// tamaño int = driver.findElements (By.tagName ("iframe")). size ();/ * para (int i = 0; i <= tamaño; i ++) {driver.switchTo (). frame (i);int total = driver.findElements (By.xpath ("html / body / a / img")). size ();System.out.println (total);driver.switchTo (). defaultContent (); // volviendo del iframe} * /// Comentó el código para encontrar el índice del elementodriver.switchTo (). frame (0); // Cambiando al marcoSystem.out.println ("******** Nos cambiaron al iframe *******");driver.findElement (By.xpath ("html / body / a / img")). click ();// Hacer clic en el elemento en línea con el anuncioSystem.out.println ("********* Hemos terminado ***************");}}

Salida: el navegador navega a la página que consta del iframe anterior y hace clic en el iframe.

Concepto de marcos anidados (marcos dentro de marcos):

Supongamos que hay dos marcos uno dentro del otro como se muestra en la imagen de abajo y nuestro requisito es imprimir el texto en el marco exterior y el marco interior. En el caso de marcos anidados,

Al principio, debemos cambiar al marco exterior 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 en él desde el marco interior primero y luego desde el exterior.

El código HTML para el marco anidado anterior es como 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 muestran los pasos para cambiar al marco exterior e imprimir el texto en los marcos exteriores: Paso 1)

Controlador WebDriver = nuevo FirefoxDriver ();driver.get ("Url");driver.manage (). window (). maximizar ();driver.manage (). timeouts (). implicitlyWait (2, TimeUnit.SECONDS);int size = driver.findElements (By.tagName ("iframe")). size ();System.out.println ("Cuadros totales -" + tamaño);// imprime el número total de fotogramasdriver.switchTo (). frame (0); // Cambio del marco exteriorSystem.out.println (driver.findElement (By.xpath ("xpath del elemento externo")). 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 ();// imprime el número total de fotogramas dentro del marco exteriorSystem.out.println ("Cuadros totales -" + tamaño);

Encuentra el número total de iframes dentro del marco exterior.
Si el tamaño se encontró en '0', entonces no hay un marco interior dentro del marco.

Paso 3)

driver.switchTo (). frame (0); // Cambiando a innerframeSystem.out.println (driver.findElement (By.xpath ("xpath del elemento interno")). 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) {Controlador WebDriver = nuevo FirefoxDriver ();driver.get ("Url");driver.manage (). window (). maximizar ();driver.manage (). timeouts (). implicitlyWait (2, TimeUnit.SECONDS);int size = driver.findElements (By.tagName ("iframe")). size ();System.out.println ("Cuadros totales -" + tamaño);// imprime el número total de fotogramasdriver.switchTo (). frame (0); // Cambio del marco exteriorSystem.out.println (driver.findElement (By.xpath ("xpath del elemento externo")). GetText ());// Imprimir el texto en el marco exteriorsize = driver.findElements (By.tagName ("iframe")). size ();// imprime el número total de fotogramas dentro del marco exteriorSystem.out.println ("Cuadros totales -" + tamaño);driver.switchTo (). frame (0); // Cambiando a innerframeSystem.out.println (driver.findElement (By.xpath ("xpath del elemento interno")). GetText ());// Imprimiendo el texto en marco interiordriver.switchTo (). defaultContent ();}}

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