WebdriverIO — Open multiple browser tabs

WebdriverIO — multiple browser tabs

In this article I assume you are familiar with WebdriverIO, at least at a basic level and you know how to put a test together and run it.

One need that you might have, at times, is to deal with multiple browser tabs or windows and perform different verifications there.

This is where browser.newWindow can come to the rescue… with one caveat though… there seems to be some limitations and it opens only one additional browser tab (or window). If you need only two browser tabs/windows that’s fine but what if you need more than two browser tabs/windows?

So, this code below will end up having only two open browser tabs… well, the second tab that initially opens webdriver.io will be reloaded with yahoo.comand this sucks, right?

browser.url(“https://google.com");
browser.newWindow("https://webdriver.io");
browser.newWindow("https://yahoo.com");

There is a way though to sort this out :), just use some JavaScript insertion to open additional browser tabs with window.open(). The command below will open additional tabs for you.

browser.execute((url) => {
window.open(url);
}, "http://yahoo.com");

Now, if we put it all together and want, let say, to open for different tabs, with two seconds waiting interval between them and the switch to the newly open tabs, here is the code below, you can just copy/paste in your spec file and try it out.

describe("tabs", () => {
  it("multiple browser tabs / windows", () => {
    // open url
    browser.url("https://google.com");
    browser.pause(2000);
browser.newWindow("https://webdriver.io");
    browser.pause(2000);
browser.execute((url) => {
      window.open(url);
    }, "http://yahoo.com");
    browser.pause(2000);
browser.execute((url) => {
      window.open(url);
    }, "http://twitter.com");
    browser.pause(2000);
browser.switchWindow("google.com");
    browser.pause(2000);
browser.switchWindow("webdriver.io");
    browser.pause(2000);
browser.switchWindow("yahoo.com");
    browser.pause(2000);
browser.switchWindow("twitter.com");
    browser.pause(2000);
  });
});

There is one thing to note though, each browser might have implemented window.open() slightly different. For instance, open new tabs rather than windows or the other way around. You might need to do additional research regarding your browser if it does not behave as you expected as sometimes this can be worked out in the browser setting.

This was tested in WebdriverIO v6.

I hope this was helpful!

See ya!