handling iframes using selenium webdriver switchto method
¿Cuál de los siguientes es un ejemplo de minería de datos?
Manejo de iFrames con Selenium WebDriver: Tutorial práctico con ejemplos prácticos
iFrame (marco en línea) es un documento HTML incrustado dentro de otro documento HTML.
Los iFrames se utilizan más comúnmente para mostrar anuncios dentro de una página web. Los iFrames se mencionan explícitamente en el documento HTML mediante la etiqueta HTML
Este tutorial le explicará todo sobre el manejo de iframes en Selenium junto con los ejemplos de código correspondientes para su fácil comprensión.
=> Lea la serie de entrenamiento Easy Selenium.
Lo que vas a aprender:
- Manejo de iFrames con Selenium
- ACTUALIZACIÓN en marzo de 2020
- Conclusión
Manejo de iFrames con Selenium
Un iframe dentro de una página web se puede identificar en el navegador Firefox si la opción llamada 'Este marco' se muestra en las opciones de clic derecho como se muestra a continuación.
Alternativamente, también podemos validar si una página web tiene iframes mirando el código fuente y buscando la etiqueta
|_+_|Métodos proporcionados por Selenium para manejar iFrames
Selenium proporciona los siguientes métodos integrados para alternar entre iframes.
- switchTo.frame (int frameNumber)
- switchTo.frame (cadena nombre de marco)
- switchTo.frame (WebElement frameElement)
- switchTo (). defaultContent ()
# 1) switchTo.frame (int frameNumber)
- Este método permite a los usuarios cambiar a un marco en particular utilizando la identificación del marco.
- El número de cuadro es un valor de índice de base cero, lo que significa que el primer cuadro de la página web tiene el índice 0, el segundo cuadro tiene el índice 1 y el tercer cuadro tiene el índice 3 y así sucesivamente.
- El número de fotograma también se puede identificar utilizando el ID de fotograma del elemento. Esto se puede hacer Haga clic derecho -> Inspeccionar elemento y busque el iFrame. Valide si alguno de los iFrames tiene un atributo de ID.
El elemento iframe de muestra en el código fuente se vería como se menciona a continuación.
Una vez que se identifica la identificación del iFrame, podemos usar el mismo para cambiar al marco como se muestra a continuación.
Ejemplos:
driver.switchTo.frame (“a077aa5e”);
driver.switchTo.frame (0);
- Este método genera NoSuchFrameException cuando el marco requerido no se encuentra en la página web actual.
# 2) switchTo.frame (string frameName)
- Este método permite a los usuarios cambiar a un marco en particular utilizando el nombre del marco definido por el desarrollador.
- El nombre del marco debe incluirse entre comillas dobles para que se considere un parámetro de cadena.
- Este método genera NoSuchFrameException cuando el marco requerido no se encuentra en la página web actual.
Ejemplo:
En el código mencionado anteriormente, tanto el ID del marco como el nombre del marco tienen el mismo valor. El cambio al marco se puede lograr usando el nombre del marco como se muestra a continuación:
driver.switchTo.frame (“a077aa5e”);
# 3) switchTo.frame (WebElement frameElement)
- Este método permite a los usuarios cambiar a un marco según la ubicación del elemento web.
- Este método lanza NoSuchFrameException cuando el marco requerido no está presente en la página web y StaleElementReferenceException si el marco que se muestra en la página web no está activo.
Ejemplo:
WebElement frameElement = driver.findElement (By.id (“a077aa5e”));
driver.switchTo.frame (frameElement);
# 4) switchTo (). DefaultContent ()
- Se puede alternar entre los iframes y la página principal mediante el método driver.switchTo (). DefaultContent ().
- Tenga en cuenta que hay un método similar en Selenium para cambiar entre marcos llamados método driver.switchTo (). ParentFrame ().
- La diferencia entre driver.switchTo (). DefaultContent () y driver.switchTo (). ParentFrame () es que el primer método cambia el control a la página web principal independientemente del número de fotogramas dentro de la página web, mientras que el segundo método cambia el control al marco principal del marco actual.
Ejemplo:
Suponga que hay tres marcos denominados i1, i2 e i3 dentro de la página web principal p1. Las tramas i1, i2 e i3 dependen entre sí, lo que significa que una trama será el padre de otra.
Usando el método driver.switchTo (). DefaultContent () en el marco i3, el control del controlador web se mueve a la página principal, p1. Mientras que el método driver.switchTo (). ParentFrame () en el marco i3 cambia el control de nuevo al marco i2 y así sucesivamente.
Ejemplo de código fuente:
A continuación se muestra el escenario de prueba que se automatizará usando iframes en selenium:
- Abra el sitio web SoftwareTestingHelp.com.
- Encuentre todos los elementos HTML con la etiqueta iframe, cuente el número de apariciones del iFrame e imprímalo en una consola.
- Cambie a un marco válido en la página web usando la identificación del marco e imprima el código fuente del marco.
- Cierre la ventana del navegador actual.
Salida de código:
Abra el sitio web: https://www.softwaretestinghelp.com
Cambie al marco llamado aswift_0.
Imprima el número de iframes en la página web en la ventana de la consola de eclipse.
Imprima el código fuente del marco en la consola eclipse después de cambiar al marco.
Explicación del código:
- Estamos inicializando un objeto del controlador gecko usando el método System.setProperty para apuntar a la ruta del archivo geckodriver.exe en la máquina local.
- Luego estamos creando una instancia de un objeto del controlador FireFox a través de la interfaz WebDriver.
- Con el objeto del controlador de Firefox, se abre la siguiente página web: https://www.softwaretestinghelp.com.
- En el siguiente paso, identificamos la cantidad de elementos de iframe que se muestran en la página web, los contamos y mostramos el recuento de iframe en la consola de eclipse.
- Usando la identificación del marco, estamos cambiando al marco en la página web. En el caso anterior, la identificación del marco es 'aswift_0'.
- Una vez que hemos realizado un cambio al marco con éxito, estamos imprimiendo el código fuente del marco en la consola de eclipse.
- Luego volvemos a la página web principal usando la declaración driver.switchTo (). DefaultContent () y finalmente cerrando la instancia del controlador web usando el método driver.quit.
Diferencia entre Frame e iFrame en Selenium
- Un marco se utiliza para dividir una página en varias secciones, con contenido nuevo en cada sección.
- Se utiliza un iFrame para incrustar el contenido de los sitios web externos en la página web, con el fin de evitar problemas de secuencias de comandos entre sitios.
- Se considera que un iFrame es menos seguro que un marco, ya que iFrame permite a los desarrolladores incrustar contenido de sitios web de terceros. Por lo tanto, un iframe requiere que un desarrollador confíe en el contenido que ha incrustado en el iframe.
- La mayoría de las aplicaciones web que se desarrollan en la actualidad no utilizan marcos para dividir la página, sino que utilizan iframes para incrustar contenido externo, como anuncios, dentro de la página web.
Manejo de marcos dinámicos en selenio
- En algunas páginas web, las propiedades del marco, como la identificación del marco y el nombre del marco, pueden cambiar de forma dinámica en una página web; sin embargo, la posición del marco seguirá siendo la misma. En tal caso, no podemos confiar en la identificación del marco o el nombre del marco para identificar un marco de forma única.
- Podemos usar el índice de fotogramas en tal caso, para identificar unívocamente el marco basándose en la posición del marco.
- En algunos casos, el valor de la identificación del marco cambia cada vez que se carga la página, pero con un texto estático que no cambia. Por ejemplo , considere el siguiente código para iframes.
En el ejemplo anterior, el texto 'frame_' permanece constante mientras que el valor numérico cambia con cada carga de página.
- Podemos identificar el marco anterior de forma única usando el siguiente XPath
// iframe (contiene (@ id, ’frame’))
ACTUALIZACIÓN en marzo de 2020
Cómo ubicar los elementos dentro del marco
En Selenium, para acceder a los elementos presentes dentro del marco, primero debemos cambiar dentro del marco y luego identificar los elementos como lo hacemos normalmente usando diferentes localizadores de Selenium. Su código de Selenium no puede localizar sus elementos, sin cambiar a IFrame.
La siguiente captura de pantalla muestra cómo se incrustan los marcos en un código HTML:
Diferentes formas de cambiar a un IFrame usando selenio
# 1) Usando el nombre o la identificación del marco
Cambie a IFrame usando el nombre del marco o la identificación del marco, a veces el nombre o la identificación del marco, o ambos, estarán presentes en un código.
Sintaxis:
|_+_|# 2) Uso del índice de cuadros
Localice el marco usando el índice de marco si está disponible.
Sintaxis:
|_+_|# 3) Usar elemento web
Ubique el marco usando localizadores de selenio .
Sintaxis:
|_+_|Otras operaciones con Frame
# 1) Volver al marco de padres o antepasados
Volver del fotograma 3 al fotograma 2 con el comando 'switchTo.parentFrame' .
Sintaxis:
|_+_|# 2) Cambiar a cualquier otro marco
Si desea cambiar del cuadro 3 al cuadro 1 o al cuadro predeterminado, utilice el comando 'switchTo.defaultContent'.
Sintaxis:
|_+_|En el siguiente código, estamos ubicando un cuadro de texto de nombre presente dentro de un marco.
¿Qué pasa si intentamos localizarlo directamente sin cambiar al marco?
Veamos el resultado:
El código falló con el motivo 'No se pudo ubicar el elemento: {' método ':' xpath ',' selector ':' // input (@ name = ’name’) '}
Ahora cambie dentro del marco usando Web Element o diga usando el localizador de selenio y ubique el campo del cuadro de texto.
A continuación se muestra el código completo para cambiar dentro del marco:
|_+_|Producción:
Así es como necesitamos cambiar entre los marcos para ubicar los elementos usando Selenium. Si hay varios marcos en su página web, debe cambiar varias veces.
Conclusión
- iFrame es un documento HTML incrustado dentro de otro documento HTML. Los iFrames se mencionan explícitamente en el documento HTML mediante la etiqueta HTML
- El método switchTo.frame (int frameNumber) permite a los usuarios cambiar a un marco en particular usando la identificación del marco.
- El método switchTo.frame (string frameName) permite a los usuarios cambiar a un marco en particular usando el nombre definido por el desarrollador del marco.
- El método switchTo.frame (WebElement frameElement) permite a los usuarios cambiar a un marco en función de la ubicación del elemento web.
=> Consulte TODOS los tutoriales de Selenium aquí.
Lectura recomendada
- Tutorial de Cucumber Selenium: Integración de Cucumber Java Selenium WebDriver
- Introducción a Selenium WebDriver - Tutorial de Selenium n. ° 8
- Implementación de nuestro primer script de WebDriver - Tutorial de Selenium WebDriver # 10
- Preguntas frecuentes sobre selenio
- Cómo manejar alertas / ventanas emergentes en Selenium WebDriver - Tutorial de Selenium n. ° 16
- Manejo de tablas web, marcos y elementos dinámicos en Selenium Script - Tutorial de Selenium n. ° 18
- Espera implícita y explícita en Selenium WebDriver (tipos de esperas de Selenium)
- Guía para generar informes de extensión en Selenium WebDriver