WebdriverIO - Frames

The frames in an html code are represented by the frames/iframe tag. WebdriverIO can handle frames by switching from the main page to the frame.

Methods for Frames

Some methods to work with frames are as follows −

browser.switchToFrame('<frame id/index/locator>')

This method is used to switch focus from the main page to a frame. The frame id, index or locator is passed as a parameter to this method.

Syntax

The syntax is as follows −

browser.switchToWindow(x)

To switch the focus from the frame to the main page, we have to pass null as a parameter to the browser.switchToFrame method.

Let us see the html code of an element inside a frame and obtain the text - BOTTOM inside it.

Frame

The tagname highlighted in the above image is frame and the value of its name attribute is frame-bottom.

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Frames', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/nested_frames')  
      //switch to frame
      browser.switchToFrame($("frame[name='frame-bottom']"))
      //identify element with tagname
      const p = $('<body>')
      //get text inside frame
      console.log(p.getText() + ' - Text inside frame')   
      //switch to main page
      browser.switchToFrame(null)           
   });
});

Run the Configuration file - wdio.conf.js file with the command −

npx wdio run wdio.conf.js

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation

The following screen will appear on your computer −

Frame Screen

After the command has been executed successfully, the text inside the frame - BOTTOM gets printed in the console.

Advertisements