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

Prerequisites

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

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,

JavaScript
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.

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

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

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

The below command gets the title of the webpage

JavaScript
await browser.getTitle())

The below command gets the current URL of the webpage.

JavaScript
await browser.getUrl();

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

JavaScript
await browser.forward()

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

JavaScript
await browser.back()

The below command refresh the browser.

JavaScript
await browser.refresh()

The below command maximizes the window in the browser

JavaScript
await browser.maximizeWindow()

The below command minimizes the window in the browser.

JavaScript
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

JavaScript
await browser.fullscreenWindow()

Setwindowsize

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

JavaScript
#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,

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

JavaScript
//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.

JavaScript
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.

JavaScript
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.

JavaScript
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............