WebdriverIO Tutorial: Browser Commands for Selenium Testing

WebdriverIO is a very well known End to End JavaScript testing 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 WebriverIO 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. 

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 a 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:

 browser.getWindowSize() 

Example: Print the current browser window size on console

describe("Browser Commands ", function() {

       it("getWindowSize example ", function() {

               browser.url("https://www.lambdatest.com/");

               console.log(browser.getWindowSize());

       });

  });

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:

 browser.setWindowSize(width, height) 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("setWindowSize example ", function() {

               browser.url("https://www.lambdatest.com/");

               browser.setWindowSize(100, 300);

               browser.pause(5000);

               console.log(browser.getWindowSize());

       });

   });

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:

 browser.newWindow(url, NewWindowName, NewWindowsFeature) 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("newWindow example ", function() {

               browser.url("https://www.lambdatest.com/");

               browser.newWindow(

                   "https://www.google.com/",

                   "Google Window",                            

                   "width=800,height=700,resizable,scrollbars=yes,status=1"

               );

               browser.pause(5000);

               console.log(browser.getTitle());

               // opening Google and writing text on newly opened window

               $(".//input[@name='q']").setValue("lambdatest.com");

               browser.pause(5000);

       });

});

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

 browser.closeWindow() 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("closeWindow  example ", function() {

               browser.url("https://www.lambdatest.com/");

               browser.newWindow(

                       "https://www.google.com/",

                       "Google Window",

                       "width=800,height=700,resizable,scrollbars=yes,status=1"

               );

               browser.pause(5000);

               console.log(browser.getTitle()); // print google title

               browser.pause(5000);

               browser.closeWindow();

       });

});

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:

 browser.switchWindow(urlOrTitleOfWindow) 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("swtichWindow  example ", function() {

               browser.url("https://www.lambdatest.com/");

               browser.newWindow(

                       "https://www.google.com/",

                       "Google Window",

                       "width=800,height=700,resizable,scrollbars=yes,status=1"

               );

               browser.pause(5000);

               console.log(browser.getTitle()); // print google title

               browser.switchWindow("https://www.lambdatest.com/");

               browser.pause(5000);

               console.log(browser.getTitle()); // print landatest title

               $("=Automation").click();

               browser.switchWindow("Google");

               console.log(browser.getTitle()); // print google title

       });

  });

How to Maximize Browser Window With WebdriverIO?

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

Syntax:

 browser.maximizeWindow() 

Example:

xxxxxxxxxx

describe("Browser Commands ", function() {

   it("maximize Command", function() {

       browser.url("https://www.lambdatest.com/");

       browser.maximizeWindow();

       $("=Automation").click();

   });

});

How to Minimize a Browser Window With WebdriverIO?

minimize window 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: 

 browser.minimizeWindow() 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

   it("minimize Command", function() {

       browser.url("https://www.lambdatest.com/");

       browser.maximizeWindow();

       browser.pause(5000);

       browser.minimizeWindow();

       $("=Automation").click();

   });

});

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:

 browser.fullscreenWindow() 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

   it("fullscreenWindow Command", function() {

       browser.url("https://www.lambdatest.com/");

       browser.pause(5000);

       browser.fullscreenWindow();

       $("=Automation").click();

   });

});

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:  browser.navigateTo(url) 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("NavigateTo Command", function() {

               browser.url("https://www.lambdatest.com/");

               const title = browser.getTitle();

               console.log(title);

               browser.navigateTo("https://www.google.com/");                

       });

});

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: browser.back() 

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 the old URL. 

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("Back() Command", function() {

               browser.url("https://www.lambdatest.com/");

               const title = browser.getTitle();

               console.log(title);

               browser.navigateTo("https://www.google.com/");

               browser.back();

               const title = browser.getTitle();

               console.log(title);

       });  

});

How to Navigate to Forwarding URL Using WebdriverIO?

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

Syntax: browser.forward();  

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.

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("forward() Command", function() {

               browser.url("https://www.lambdatest.com/");

               const title = browser.getTitle();

               console.log(title);

               browser.navigateTo("https://www.google.com/");

               browser.back();

               browser.forword();

               console.log(browser.getTitle());

       });

});

How to Manage Page Load With WebdriverIO Browser Commands?

Moving ahead with this WebdriverIO tutorial, I’ll dwell on 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. The parameter is passed in milliseconds. Avoid using this constant pause. This will increase execution time as we are giving a specific time duration. It is similar to Thread.sleep()

Syntax:  browser.pause(milliseconds)  

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("Pause example ", function() {

               browser.url("https://www.lambdatest.com/");

               browser.pause(5000);

               $("=Automation").click();

       });

});

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:  browser.refresh()  

Example: Open Url and reload again the same URL. 

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("refresh() Command", function() {

               browser.url("https://www.lambdatest.com/");

               browser.refresh();

               console.log(browser.getTitle());

       });

});

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

pageLoad: 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: browser.setTimeout({ timeouts.implicit, timeouts.pageLoad, timeouts.script}) 

Example: Open a URL and click on the element.

xxxxxxxxxx

describe("Browser Commands ", function() {

   it("timeout Command", function() {

       browser.url("https://www.lambdatest.com/");

       browser.setTimeout({ implicit: 10000, pageLoad: 10000, script: 5000 });

       $("=Automationsssss").click(); // Wrong element selector and throw error after 10000 millisecond

   });

});

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

Other Important WebdriverIO Browser Commands

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

How to Open URL Using Webdriver 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: browser.url(String url) 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("Open URL", function() {

               browser.url("https://www.lambdatest.com/");

       });

});

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. 

Syntax: browser.getTitle()  

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("Open URL and print browser Title", function() {

               browser.url("https://www.lambdatest.com/");

               const title = browser.getTitle();

               console.log(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: browser.$(String selector) 

Or 

 $(String selector )  

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("Open URL and print browser Title and ClickOn Header Link", function() {

               browser.url("https://www.lambdatest.com/");

               const title = browser.getTitle();

               console.log(title);

               browser.$("=Automation").click();

               // Or

               $("=Pricing").click(); // Without writing 'browser' object

              // Store element in elem variable using const 

              const elem = $("=Automation");

              elem.click();

       });

});

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: browser.$$(String selector)  

Or 

 $$(String selector ) 

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

xxxxxxxxxx

describe("Browser Commands ", function() {

           it("$$ example ", function() {

               browser.url("https://www.lambdatest.com/");

               const lstHeaderLinks = $$(".//*[@class='navbar-nav']/li");

               lstHeaderLinks.forEach(element => {

                       console.log(element.getText());

               });

       });

});

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: browser.deleteCookie(nameOftheCookie)  

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

xxxxxxxxxx

describe("Browser Commands ", function() {

       it("Cookies Command", function() {

               browser.url("https://www.lambdatest.com/");

               console.log(browser.getTitle());

               console.log(browser.getAllCookies());

               browser.deleteCookie("utm_medium");

               browser.deleteAllCookies();

       });

  });

There are many more commands which are provided by WebDriverIO javascript and we will further explore them in another WebDriverIO tutorial.

That’s All Folks

In this WebDriverIO tutorial, I explored a few very basic and frequently used JavaScript browser commands for Selenium Grid. 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 about this topic, you can read our previous WebDriverIO tutorial.

Happy testing!