WebdriverIO Tutorial: Browser Commands for Selenium Testing

WebdriverIO is a very well known End to End JavaScript framework for automation testing. It is based in Node.js and can further help you automate user activities on a browser with the help of WebdriverIO browser commands. WebDriverIO browser commands are used to directly perform certain actions on the browser. There are a few examples: Opening browser, Finding element, Navigating forward, back, Refreshing the page also Close the browser.

In Selenium, a driver object is created to interact with the browser. However, in WebDriverIO you can set up a WebDriverIO test runner to directly use a globally initialized ‘driver’ or ‘browser’ object. In this WebDriverIO tutorial, I will cover the ‘browser’ object and how to use them. While running the script, the browser session gets automatically initialized and closed. You don’t have to create objects separately in WebDriverIO.

In our previous WebrDiver Tutorial I had covered more about the basics of WebdriverIO and how you can run WedbdriverIO scripts. In this WebdriverIO tutorial, I will focus on the major challenges you might face while working on your Selenium Automation Scripts in WebDriverIO. I will further give a solution to all these issues with respective WebdriverIO commands for Selenium testing in detail in this WebDriverIO tutorial along with examples.

If you’re looking to improve your WebdriverIO interview skills, check out our curated list of WebdriverIO interview questions and answers.

How To Handle Browser Windows With WebdriverIO Commands?

In this WebdriverIO tutorial, I’ll now discuss some major issues you might encounter while handing browser windows to run your Selenium test Automation Scripts. This includes finding your browser window size, it’s specification and other action you can perform on these browsers.

How To Find Your Window Size With WebdriverIO?

This command returns the current window size. Basically, getWindowSize() will help when you want to run an automation script on a particular browser size. Output of this command is in format { height: 798, width: 1200, x: 22, y: 45 }

Syntax:

Example: Print the current browser window size on console

How to Specify Your Window Size With WebdriverIO?

Sometimes, we want to set a specific height and width of the browser. In such cases, setWindowSize() will help you. It takes two parameters, height and width as an Integer.

Syntax:

Example: Open the current browser and change the width and height of that browser.

How To Open A New Window With WebdriverIO?

newWindow command is used when you want to open a new url on a new browser window. Other parameters included are windoname and window features. You can use them to set the name of the window along with its size, position etc respectively.

Syntax:

Example: Open two URL https://www.lambdatest.com/ and https://www.google.com/ then search particular text on newly open window

How to Close Browser Window With WebdriverIO?

closeWindow command is very similar to the newWindow command. closeWindow command helps to close the browser between the script execution. Remember, closeWindow will not close the main browser. If the browser context is not handled and found no parent/main context then It will close all browsers.

Syntax

Example: Open url https://www.lambdatest.com/ and https://www.google.com/ then close all opened browsers.

How To Switch Browser Window With WebdriverIO?

switchWindow() command helps in automatically switching to a specific browser/tab. It takes a string parameter as url or browser title name.

Syntax:

Example: Open two URLs https://www.lambdatest.com/ and https://www.google.com/ then print the first url title and then second browser title

How To Maximize Browser Window With WebdriverIO?

maximizeWindow command helps the browser to maximize the browser window for automated browser testing.

Syntax:

Example:

How To Minimize a Browser Window With WebdriverIO?

minimizeWindow helps users to minimize the window during the execution. Note that even the browser window is minimized, still, script execution continues without any error. The below example shows that even if the browser minimized, the script is successfully clicked on the Automation link.

Syntax:

Example: Click on Automation link of LambdaTest url after minimizing browser window.

How To Go Fullscreen on a Browser With WebdriverIO?

With the fullscreenWindow command, the browser can be seen on the full screen. It hides the browser Menu bar and bookmarks if visible.

Syntax:

Example: Open url in fullscreen mode and click on Automation.

How To Navigate Browser Windows with WebdriverIO Browser Commands?

While performing Selenium test automation, you’d have to navigate to different Urls, including the one you’ve used before the current URL. Here in this WebdriverIO tutorial, i’ll further address the issues you might face.

How To Open A New URL In The Same Window With WebdriverIO?

navigateTo command helps you to open a new url on the same open browser.

Syntax:

Example: Open the URL https://www.lambdatest.com/ and then navigate to new URL https://www.google.com/ on the same page.

How To Navigate To Previous Page Using WebdriverIO?

back() command helps in automating the back button for any page. By using this command you can go back to the previous page of the open browser.

Syntax:

Example: Open the URl https://www.lambdatest.com/ and then navigate to new URL https://www.google.com/ on the same page and go back again to old url.

How To Navigate To Forward URL Using WebdriverIO?

Forward helps to navigate from current web URL to forward URl. This will be read from the browser history. If history url is not found then it will use current url only. To use this url, you are required to use back() in order to create navigation history.

Syntax:

Example: Open the URL https://www.lambdatest.com/ and then navigate to new URL https://www.google.com/ on the same page,go back and forward the url

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

How To Manage Page Load With WebdriverIO Browser Commands?

Moving ahead with this WebdriverIO tutorial, I’ll dwell into how you can pause execution for a given time, refreshing your webpage and how to load your page after a certain timeout.

How To Pause Page Load With WebdriverIO?

Pause() method is used to pause execution for a given time. Parameter is passed in milliseconds. Avoid using this constant pause. This will increase execution time as we are giving specific time duration. It is similar to Thread.sleep()

Syntax

Example: Open https://www.lambdatest.com/ and wait for 5000 milliseconds before clicking on Automation link

You can also learn the key features of WebdriverIO waits that can help you in pausing the test execution:

How To Refresh Your Page With WebdriverIO?

Refresh is a very less frequently used command in automation. WebDriverIO provides this command to reload your current browser.

Syntax:

Example: Open Url and reload again the same url.

How to Handle Timeout With WebdriverIO?

WebDriverIO provides a timeout command to handle script injection execution, page load time on the element during the current session. All values for the time is in milliseconds.

Implicit: Implicit wait waits for a given time and if the element is found in this duration then WebDriverIO performs an operation or else throws element not found error. The benefit of using implicit wait in Selenium is that it is applicable for all the web elements specified in the Selenium test automation script till the time the WebDriver instance (or IWebDriver object) is alivepageLoad: Execution waits for the page to completely load all resources.

Script: Script injection and execution should complete before a given timeout reaches to the end.

Timeout commands should be written in the hooks provided by WebDriverIO so that you do not have to write every time a JavaScript file is created.

Syntax:

Example: Open a url and click on element

Note: Above example gives an error that “Automationsssss” can not be found as we are giving you an example of implicit wait.

Other Important WebdriverIO Browser Commands

Here are some other important browse.r commands in WebdriverIO which can be used for your Selenium Test Automation Scripts

How To Open URL Using WebdriverIO Command

One of the most basic and frequently used WebDriverIO browser commands is url(). This command helps users to open the URL on the configured browser. Parameter ‘String url’ is optional and if the parameter is not passed then it will pick ‘baseUrl’ from ‘wdio.conf.js’ file

Syntax:

Example: Open https://www.lambdatest.com/ URL in the browser

How To Capture Title with WebdriverIO?

getTitle() is used to capture the value of an open browser title. The return value is trimmed and in case there is no browser title it’ll return a null value.

Title

Syntax:

Example: Open https://www.lambdatest.com/ URL and print browser title

How To Find Elements With WebdriverIO?

You might be familiar with findElemnt() method in Java. WebDriverIO has a similar method, ‘$()’. It will automatically identify the locator and find the element according to the locator. Since it is a global variable you can directly write $(String selector).

The $() method will return only a single web element. In case, you want to store an element then store that element in a const variable and perform an action. You can also use $() as a chain selector, i.e. $(selector).$(selector).$(selector), advantage of using a chain selector is that you can go inside the DOM and select a particular element.

Syntax:

Or

Example: Open https://www.lambdatest.com/ and Click on Automation, Pricing and again Automation Header link

How To Find Multiple Elements With WebdriverIO?

>$$() is similar to the $() method, however $() returns a single web element and $$() method will return an array of elements. $$() is also defined globally so you can directly write $$() without using the ‘browser’ object and it can also be used as a support chain selector.

Syntax:

Or

Example: Read all header links of https://www.lambdatest.com/ and print their text

How To Manage Your Browser Cookies With WebdriverIO?

deleteCookie WebDriverIO command is a very useful browser command. It helps users to delete stored cookies from the browser session. This will help users to delete specific cookies provided in the parameter.

To know the name of the cookies, you can use the browser.getAllCookies() and print a console log to get more information about cookie names.

If you want to delete all cookies related to the opened browser, then use getAllCookies() WebDriverIO command.

Syntax:

Example: Open url and read all stored cookies and then delete particular cookies.

Also Read:WebdriverIO Tutorial With Examples For Selenium Testing

That’s All Folks

In this WebDriverIO tutorial, I explored a few very basic and frequently used JavaScript browser commands for Selenium testing. These WebDriverIO commands help users configure the script based on browser configuration. I hope this helped you!

You can even scale your automated browser testing by using WebdriverIo along with a Selenium Grid to perform parallel testing.Although maintaining your own Selenium Grid can be quite exhaustive you can choose Cloud Selenium Grids to scale your efforts. In order to know more on this topic, you can read our previous WebDriverIO tutorial.

Happy Testing!