How to handle multiple windows in WebdriverIO

Scenario: Switch to a new window, close the new window and switch back to the old window.

Let's take a look at how to do that -

I'll be using this test site for our example.

---

describe('New Tab', () => {
  it('should be able to switch to a new tab', () => {
    // find selector
    const link = $('.example a');

    // access the page
    browser.url('/windows');

    // click on the link to open a new window
    link.click();

    // switch window
    browser.switchWindow('/windows/new');

    // optional assertion
    expect(browser).toHaveTitle('New Window');
  });

  it('should close the new tab and switch back to old tab', () => {
    // close new window
    browser.closeWindow();

    // switch back to old window
    browser.switchWindow('/windows');

    // optional assertion
    expect(browser).toHaveTitle('The Internet');
  });
});

💎 You can also find this example on GitHub.

---

Check out the video below to see a detailed explanation of the code above.

---

To learn more about WebdriverIO, check out my free tutorial series here -

https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.

---

I hope this post helped you out, let me know in the comments below!

Happy testing! 😄

...

Follow @automationbro on Twitter
Subscribe to my YouTube channel