Post
Ask Question

Browser Commands In Webdriver IO

In this article, we will see what are the browser commands in webdriver IO.

Prerequisites

  • Set up Webriver IO project.

In the tests folder, Create a spec file. We call test file as spec files.

spec file will be of .js extension. Since Webdriver IO uses javascript as underhood to write tests.

We will be using mocha test framework. so tests will consists of describe and it blocks

  • Describe means a test suite
  • it block is each test that is written inside the describe block.

Note
Now currently Webdriver IO supports an asynchronous mode of execution. Before 14/04/2021 synchronous mode of execution was supported.

Please find the sample code below,

describe('browser commands',()=>{
    it('first test',async()=>{
          await browser.navigateTo("http://google.com");
          console.log(await browser.getTitle());
	      console.log(await browser.getUrl());
         
    })
})

Because of asynchronous execution we use async function inside the it block and await for each command to handle the promises.

browser object is the session instance which is used to control the browser. We can access the WebDriver instance through the global browser or driver object. (i.e )I can also use driver.url() instead of browser object.

The below command opens the browser with the desired webpage.

await browser.url('<url of the application>')

We can also use navigate to command to open the browser with desired page

await browser.navigateTo("http://google.com")

The below command gets the title of the webpage

await browser.getTitle())

The below command gets the current URL of the webpage.

await browser.getUrl();

The below command navigates forward. Equivalent to forward button in the browser.

await browser.forward()

The below command navigates backward. Equivalent to back button in the browser.

await browser.back()

The below command refresh the browser.

await browser.refresh()

The below command maximizes the window in the browser

await browser.maximizeWindow()

The below command minimizes the window in the browser.

await browser.minimizeWindow()

The below command open the browser in fullscreen. It equivalent to viewing the application by pressing F11 key. hides the bookmarks and menu bar of the browser

await browser.fullscreenWindow()

Setwindowsize

This command sets the opens the browser with respective width and height provided.

#400 is width and 500 is the height
await browser.setWindowSize(400, 500)

Locators used in webdriver IO

Locators are used to locating the webelement on the webpage.

Webdriver IO supports below Locators,

  • CSS selector
  • Xpath
  • Id attribute
  • Partial link text
  • Link text
  • Name attribute
  • Tagname

syntax is $('selector') for locating element is

//css locator
const button = await $('#testid')
//xpath locator
const button = await $('//*[@id="testid"]')

Click command is used to click on the webelement.

We locate the webelement using any one of the Locators and then store in a javascript variable. then perform the click command using the variable.

const testbutton = await $('#testid')
await testbutton.click()

Addvalue command is used to set/add value to input field/textarea elements

We locate the webelement using any one of the Locators and then store in a javascript variable. then perform the addvalue command using the variable.

let inputfield = await $('.inputtest')
await inputfield.addValue('test')
await inputfield.addValue(123)

getText

gettext command is used to get text of element present in the webpage.

We locate the webelement using any one of the Locators and then store in a javascript variable. then use the gettext function to get the text of element.

const element = await $('#testid');
console.log(await element.getText());

Hope this article will be helpful to handle browser commands and commands which can be used to interact with the webelements in the webpage

Thanks

Happy Learning............


Similar Articles