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 this video to see a detailed explanation of the code above:

To learn more about WebdriverIO, you can check out my free tutorial series here –

WebdriverIO – Tutorial Series for Beginners