How to Interact with elements inside an Iframe
In earlier chapter we learn how to switch between Iframes on a webpage. There were mainly three ways of switching between Iframes.
- By Frame Index
- By Frame ID or Name
- By Frame WebElement
If you haven’t gone through the previous tutorial, please take a look here.
Now lets learn how to interact with elements inside an iFrame. Once we have switched to a particular iFrame everything else after that can be done using regular WebDriver command. Lets first create a hypothetical test case, here are the steps that we would take in our test.
- Navigate to the page with multiple iFrames. It is here “http://toolsqa.com/iframe-practice-page/“
- Switch to first frame and then find First Name and Last name element.
- Fill some value in the first name and Last name value
- Switch to second frame.
- Find the first image element and then click on it.
Let me show you the current structure of the webpage and different frames associated with it:
Here there are two frames, frame 0 and frame 1 inside the main html page. Here is the code that is required in each step.
Step 1: Navigate to the page with multiple iFrames.
|
1 2 |
// Step 1: Navigate to the page with multiple iFrames driver.get("https://toolsqa.com/iframe-practice-page/"); |
We all know what this is, now lets do the second step.
Step 2: Switch to first frame and then find First Name and Last name element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Step 2: Switch to first frame and then find First Name and Last name // element /* Switch to the first frame, remember frame index starts from 0 */ driver.switchTo().frame(0); /* now find the First name field */ WebElement firstName = driver.findElement(By .xpath("//*[@id='content']/form/fieldset/div[1]/p[3]/input")); /* now find the Last name field */ WebElement lastName = driver.findElement(By .xpath("//*[@id='content']/form/fieldset/div[1]/p[4]/input")); |
Once you switch to the frame, you can access the html elements that are inside the frame. Any attempt to access the elements which are inside iFrame without switching to that ifFrame will result in WebDriver exception. At the end of this chapter we will reproduce the exception for learning purpose.
Also notice that once you have switch to the frame find element commands are exactly same as what we would use normally.
Step 3: Fill some value in the first name and Last name value
|
1 2 3 |
//Step 3: Fill some value in the first name and last name files firstName.sendKeys("Virender"); lastName.sendKeys("Singh"); |
Step 4: Switch to second frame (Critical step)
I would like you to refer to the image that I have shared above. It shows that main page has two frame 0 and 1. Now if you are inside frame 0 you cannot switch to frame 1. Because frame 1 is not a part of frame 0, but its a part of main page. Any attempt to directly switch to frame 1 from frame 0 will give an exception. Exception will be No Such frame exception. We will reproduce it later in this chapter for learning purpose.
So how do we switch to frame 1?
Simple switch back to the main page using the SwitchTo().defaultContent() command. Once on the main page switch to the frame 1 as shown in the code below:
|
1 2 3 |
// Step 4: Switching to the 2nd frame, frame index 1 driver.switchTo().defaultContent(); driver.switchTo().frame(1); |
Step 5: Find the first image element and then click on it
Once you are in second frame, rest is just similar to regular findElement and click command. As shown in the code below.
|
1 2 3 4 5 6 |
//Step 5: Find image element and click on that WebElement imageElement = driver.findElement(By .xpath("//*[@id='post-9']/div/div[1]/div/p[1]/a/img")); imageElement.click(); System.out.println("Switching successfull"); |
Complete code listing is here
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
WebDriver driver = new FirefoxDriver(); // Step 1: Navigate to the page with multiple iframes driver.get("https://toolsqa.com/iframe-practice-page/"); // Step 2: Switch to first frame and then find First Name and Last name // element /* Switch to the first frame, remember frame index starts from 0 */ driver.switchTo().frame(0); /* now find the First name field */ WebElement firstName = driver.findElement(By .xpath("//*[@id='content']/form/fieldset/div[1]/p[3]/input")); /* now find the Last name field */ WebElement lastName = driver.findElement(By .xpath("//*[@id='content']/form/fieldset/div[1]/p[4]/input")); // Step 3: Fill some value in the first name and last name files firstName.sendKeys("Virender"); lastName.sendKeys("Singh"); // Step 4: Switching to the 2nd frame, frame index 1 driver.switchTo().defaultContent(); driver.switchTo().frame(1); //Step 5: Find image element and click on that WebElement imageElement = driver.findElement(By .xpath("//*[@id='post-9']/div/div[1]/div/p[1]/a/img")); imageElement.click(); System.out.println("Switching successfull"); |
Now the two exceptions that we wanted to see. First one is no such element exception, which comes when you try to access any element inside a frame without switching to the iFrame. We can reproduce this error by simply removing the SwitchTo statements. Here is the minimal code required, try running it.
NoSuchElement Exception in Iframe
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Step 1: Navigate to the page with multiple iframes driver.get("https://toolsqa.com/iframe-practice-page/"); // Step 2: Switch to first frame and then find First Name and Last name // element /* Switch to the first frame, remember frame index starts from 0 */ //driver.switchTo().frame(0); /* now find the First name field */ WebElement firstName = driver.findElement(By .xpath("//*[@id='content']/form/fieldset/div[1]/p[3]/input")); |
Note : Notice that I have commented out the switch to frame command. This code will produce following error:
Exception in thread “main” org.openqa.selenium.NoSuchElementException: Unable to locate element: {“method”:”xpath”,”selector”:”//*[@id=’content’]/form/fieldset/div[1]/p[3]/input”}
Command duration or timeout: 226 milliseconds
For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html
Build info: version: ‘2.45.0’, revision: ’32a636c’, time: ‘2015-03-05 22:01:35’
System info: host: ‘abc-PC’, ip: ‘192.168.3.3’, os.name: ‘Windows 7’, os.arch: ‘amd64’, os.version: ‘6.1’, java.version: ‘1.8.0_25’
Driver info: org.openqa.selenium.firefox.FirefoxDriver
NoSuchFrame Exception in Iframe
As discussed earlier in this chapter, you will get a no Such frame exception if you try to switch to another frame without switching back to the main page. This can be reproduced by commenting out the driver.switchTo().defaultContent() statement. Here is the code which will reproduce this exception
|
1 2 3 4 5 6 |
WebDriver driver = new FirefoxDriver(); driver.get("https://toolsqa.com/iframe-practice-page/"); driver.switchTo().frame(0); //driver.switchTo().defaultContent(); driver.switchTo().frame(1); System.out.println("Switching successfull"); |
Note :This is the exception that you get
Exception in thread “main” org.openqa.selenium.NoSuchFrameException: Unable to locate frame: 1
Command duration or timeout: 105 milliseconds
Build info: version: ‘2.45.0’, revision: ’32a636c’, time: ‘2015-03-05 22:01:35’
System info: host: ‘abc-PC’, ip: ‘192.168.3.3’, os.name: ‘Windows 7’, os.arch: ‘amd64’, os.version: ‘6.1’, java.version: ‘1.8.0_25’
Driver info: org.openqa.selenium.firefox.FirefoxDriver
That’s pretty much what we have for iFrames.
