<<Previous Post                          << Complete Tutorial>>                             Next Post>>

Switching To Frames in WebDriverIO

What is an Iframe?

Iframe extends to Inline frame. Iframe in simple terms is a website inside another website.

It can be found as <iframe src=”https//book.theautomatedtester.co.uk”></iframe> in Document object model.

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small Exercise to Locate Iframe Element using SwitchToFrame command of WebDriverIO and then enter text inside the text box present in selected iframe.

Note: – you can also show what happens if you don’t switch to iframe and perform operations on the element. You will get exception.

Using SwitchToFrame Command

First, I will demonstrate the exercise we need to perform to enter text inside the text box present in Iframe which is located by SwitchToFrame command of WebDriverIO, followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

1)  Navigate to http://omayo.blogspot.com/

2)  Find Iframe you want to locate inside omayo.blogspot.com webpage.

3) Find Text Box inside Iframe and Enter Text into it.

Practical Demonstration:

Following are the Steps to Perform above Exercise (i.e. before entering text into a text box which is inside an iframe, we have to first switch to the iframe using SwitchToFrame command of WebDriverIO and then enter text into the text box field) using WebDriverIO Automation code in ‘Visual Studio Code’ IDE:

Pre-requisite: Download the Project from here (Click here to Download) and Unzip it.

1)  Open Visual Studio Code on your system

2)  Click on File and Select Open Folder. Select the project folder on which your workspace is present.

3)  Expand ‘test’ from the Explorer, right-click on the displayed ‘specs’ and select ‘New File’ option as shown below:

4) Give any name of the newly created file say “SwitchingToFrames.test.js” and copy the below given code into the newly created file as shown below and save the file:

The following is the WebDriverIO sample code for entering text inside the text box present in Iframe which is located by SwitchToFrame command of WebDriverIO on ‘Omayo.blogspot.com’ application:

You can understand this code, by reading the comments provided in the below code:

 

Copy the code from here :-

describe('Locate Iframe Using SwitchToFrame Command in WebDriverIO',() => {

    it('should Locate Iframe and Enter Text in Text Field Present in Iframe',() => {
        browser.url('http://omayo.blogspot.com')
        browser.pause(3000);
        $('#iframe2').isDisplayed()  
        const iframe = $("#iframe2") /* const variable named as iframe is created and
                                         iframe id is assigned to iframe
                                      */
        iframe.scrollIntoView(); 
        browser.switchToFrame(iframe)
        $('#q').isDisplayed()  
        $('#q').click()
        $('#q').keys("Text has been Entered in iframe2 text box")
        browser.pause(3000);  
        });
    });

5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly in this file as shown below and save it:

6) Click on Terminal and Open New Terminal.

7) By Default, Powershell Terminal will open as shown below:

8) Run geckodriver.exe in the Powershell terminal as shown below to run Geckodriver in background.

9) Open Another Terminal in the same way we did in the step 6 and run below command in terminal

.\node_modules\.bin\wdio .\wdio.conf.js

Observe that the ‘Switching_To_Frames.test’ will get executed successfully, the Firefox Browser will launch and then Iframe was searched and respective action will be taken by WebDriverIO Automation code.

And also, the result will be displayed as ‘Passed’ in the terminal as shown below:

This is how we can take the help of SwitchToFrame Command of WebDriverIO to Locate Iframe inside the Webpage. I will explain other commands to perform different operations on WebPages using WebDriverIO in the upcoming Articles ­­

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                         << Complete Tutorial>>                             Next Post>>