WebdriverIO Tutorial: Browser Commands for Selenium Testing

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:

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.

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 newly open window

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.

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

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:

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?

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:

browser.minimizeWindow()

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

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.

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.

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 old url.

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

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

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());
       });
});

Austin Siewert

CEO, Vercel

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

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 TestMu AI:

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

browser.pause(milliseconds)

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

describe("Browser Commands ", function() {
       it("Pause example ", function() {
               browser.url("https://www.lambdatest.com/");
               browser.pause(5000);
               $("=Automation").click();
       });
});

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:

browser.refresh()

Example: Open Url and reload again the same url.

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

browser.setTimeout({ timeouts.implicit, timeouts.pageLoad, timeouts.script})

Example: Open a url and click on element

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

browser.url(String url)

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

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.

Title

Syntax:

browser.getTitle()

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

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

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

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.

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();
       });
  });

Also Read:WebdriverIO Tutorial With Examples For Selenium Testing