iFrame with kotlin selenium

An inline frame / iframe is used to embed another document within the current HTML document. It means iframe is actually a webpage within the webpage which have its own DOM for every iframe on the page.

Handle frames in Selenium Kotlin :

You can easily work with the elements in a frame by telling Selenium kotlin to switch to that frame first. For this Selenium provides a driver.switchTo().frame(args) method. Once you have switched to the frame, the rest of your test should be business as usual.

Steps to handle Iframe :

  • Inspect and find the element is within an iFrame
  • Switch to the iFrame
  • Identify and then perform the required operation on the element

single-frame-example-selenium-webdriver

Scenario : Fetch the value from the Topic (page level) and write it to topic textbar present in iframe 1

Page Url : https://chercher.tech/practice/frames-example-selenium-webdriver
single-frame-source-selenium-webdriver

Example for selenium kotlin frame handling


							import org.openqa.selenium.By
import java.util.concurrent.TimeUnit
import org.openqa.selenium.firefox.FirefoxDriver
fun main(args: Array) {
    // set the geckodriver.exe property
    System.setProperty("webdriver.gecko.driver", "C:/Users/user/Pictures/geckodriver.exe")
    // open firefox
    val driver = FirefoxDriver()
    driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS)
    // open webpage
    driver.get("https://chercher.tech/practice/frames-example-selenium-webdriver")
    // store the text value
    val textValue = driver.findElement(By.xpath("//label/span")).text
    // switch to frame1
    driver.switchTo().frame("frame1")
    // set the value of the textbar to the value stored
    driver.findElement(By.xpath("//input[@type='text']")).sendKeys(textValue)
}
							

Switch to nested iFrame

Sometimes we will have multiple and nested iframes in a webpage, if we have nested iframes we have to switch to iframe inside frame.

We can access only content of frame when we are inside a frame, we cannot access outside the frame or inside any other frame.

Scenario : Check the check box present in the iframe 3 , iframe 3 is present inside iframe 1.

Page Url : https://chercher.tech/practice/frames-example-selenium-webdriver
nested-frame-selenium-webdriver

Kotlin selenium code example for handling nested iframe


    // open webpage
    driver.get("https://chercher.tech/practice/frames-example-selenium-webdriver")
    //find the frame1 and store it in webelement
    val frame1 = driver.findElement(By.id("frame1"))
    // switch to frame1
    driver.switchTo().frame(frame1)
    // find the frame 3
    val frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"))
    // switch to frame 3
    driver.switchTo().frame(frame3)
    // find the checkbox
    val checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"))
    // if check box is not selected then click the checkbox
    if (!checkbox.isSelected) {
        checkbox.click()
    }
							

Switch to Parent Frame


Switch to Parent Frame : switchTo().parentFrame() function in selenium switches the control to outer position(one place) in web page, the outer position could be a frame or page level.

In simple terms, parentFrame() function exits the current frame.

After performing a particular task we have move out of the frame, otherwise we cannot access the elements outside the frame.

Selenium Kotlin provides driver.switchTo().parentFrame() function to move out of the current frame, once we move out of the frame we can access the elements outside that frame but we cannot access the elements inside that frame

Scenario :

  • Check the check box present in the iframe 3, iframe 3 is present inside iframe 1
  • After checking the check box, move back to iframe 1 and enter "selenium" text in the topic textbar
  • Now move back to page level and compare the topic(header) text is not equal to "selenium webdriver"

Page Url : https://chercher.tech/practice/frames-example-selenium-webdriver
parent-frame-exampe-selenium-webdriver

Example for navigating to parent frame


    // open webpage
    driver.get("https://chercher.tech/practice/frames-example-selenium-webdriver")
    //find the frame1 and store it in webelement
    val frame1 = driver.findElement(By.id("frame1"))
    // switch to frame1
    driver.switchTo().frame(frame1)
    // find the frame 3
    val frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"))
    // switch to frame 3
    driver.switchTo().frame(frame3)
    // find the checkbox
    val checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"))
    // if check box is not selected then click the checkbox
    if (!checkbox.isSelected) {
        checkbox.click()
    }
    // navigate to parent frame, which is frame 1
    driver.switchTo().parentFrame()
    // set the value of the textbar to the value stored
    driver.findElement(By.xpath("//input[@type='text']")).sendKeys("selenium")
    // navigate to parent, which is page
    driver.switchTo().parentFrame()
    // store the text value
    val textValue = driver.findElement(By.xpath("//label/span")).text
    //verify the value matches or not
    if (textValue == "selenium webdriver") {
        println("Topic value is equal to 'selenium webdriver'")
    }
							

Switch to Default Content


Default Content : switchTo().defaultContent() method exits all the iframes and the places the selenium control at the page level where as parentFrame() method exits the current iframe.

Once we reach page level we cannot access any elements inside the iframe unless we switch to it.

frames-example-selenium-webdriver

Scenario : Check the check box(frame 3), and select the 'Avatar' option from the Animals dropdown(frame 2).

Page Url : https://chercher.tech/practice/frames-example-selenium-webdriver default-content-frames-selenium-webdriver


    // open webpage
    driver.get("https://chercher.tech/practice/frames-example-selenium-webdriver")
    //find the frame1 and store it in webelement
    val frame1 = driver.findElement(By.id("frame1"))
    // switch to frame1
    driver.switchTo().frame(frame1)
    // find the frame 3
    val frame3 = driver.findElement(By.xpath("//iframe[@id='frame3']"))
    // switch to frame 3
    driver.switchTo().frame(frame3)
    // find the checkbox
    val checkbox = driver.findElement(By.xpath("//input[@type='checkbox']"))
    // if check box is not selected then click the checkbox
    if (!checkbox.isSelected) {
        checkbox.click()
    }
    // navigate to page level
    driver.switchTo().defaultContent()
    //switch to frame2
    driver.switchTo().frame("frame2")
    //find the dropdown
    val dropdown = driver.findElement(By.tagName("select"))
    //Create object for select class
    val sel = Select(dropdown)
    //select the 'avatar' option
    sel.selectByVisibleText("Avatar")
							

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
You can also share knowledge by Adding a topic here


Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
Copyright © CherCher Tech