Codeceptjs: i want to switch to another tab

[tony204]

like:
I.amOnPage("page A ");
I.click('button');// this will redirect to Page B ,but pop up new chrome windows.
so how can i switch to the new page B ?
if page B is in the same browser ,but new tab, how can i focus to the new page B?

[tony204]

i wrote like that ,but it also stay on page A!
I.amOnPage("page A ");
I.click('button');
I.pressKey(['ctrl', 'Tab']);
I.seeInTitle('Page B title'); // this failed , because it stay on page A.

[APshenkin]

Hi!
Try custom helper like this:

changeTab(num) {
        let client = this.helpers['WebDriverIO'].browser;
        return client
            .getTabIds(function(err, handles) {
                this.switchTab(handles[num - 1]);
                return;
            })
    }

[tony204]

how can i use the method?

[artiomnist]

@tony204 Add the method to your custom helper, include the helper in your codeceptjs config, and use as an actor method. (I.changeTab())

@APshenkin I've tried using this method as follows:

I.amOnPage('/');                                   // PAGE A
I.click('Facebook Link');
I.changeTab(1);                  // num= 0 or 2 also did not work...
I.seeInCurrentUrl('https://www.facebook.com/');    // PAGE B

The browser still finds itself on PAGE A, and thus the test fails at I.seeInCurrentUrl

expected url to include "https://www.facebook.com/"
      + expected - actual

      -http://www.PAGEAURL.com/
      +https://www.facebook.com/

[APshenkin]

@artiomnist
Before changing the tab you have to wait until the tab is open.

try this method:

waitTabsLoading(ammountOfTabs, timeout) {
        let client = this.helpers['WebDriverIO'].browser;
        return client
            .waitUntil(function() {
                return this.getTabIds().then(function(handles) {
                    return handles.length === ammountOfTabs
                });
            }, timeout * 1000);
    }

also after changing tab you have to wait, when new page will be loaded. I use this method for waiting

waitInUrl(urlPart, timeout) {
        let client = this.helpers['WebDriverIO'].browser;
        let currUrl;
        return client
            .waitUntil(function() {
                return this.url().then(function(res) {
                    currUrl = res.value;
                    return (decodeURIComponent(decodeURIComponent(decodeURIComponent(res.value.replace(/\+/g, " "))).replace(/\+/g, " "))).indexOf(urlPart.replace(/\+/g, " ")) > -1;
                });
            }, timeout * 1000);
    }

[artiomnist]

@APshenkin
Thanks, I didn't realise I had to wait for the tab to load etc.

I've added in the methods and I'm running as follows:

...                                               // Click on link that opens a new tab
I.waitTabsLoading(2, 20);
I.changeTab(1);                         // num= 0 or 2 also did not work...
I.waitInUrl('facebook', 10);

However, I'm getting the following error:
Promise was rejected with the following reason: timeout at the I.waitInUrl('facebook', 10); step.

Screenshot shows PAGEA. I suspect changeTab() is not switching tabs?

[APshenkin]

I.changeTab(1);
here should be I.changeTab(2);

[artiomnist]

My bad, I will change that.

However, Still get the issue Promise was rejected with the following reason: timeout with I.changeTab(2)

[APshenkin]

Hm... It's strange, because I use the same methods in my project. What version of WebdriverIO do you use?
I use 3.4.0, maybe you set other version and there is some difference in API.

[APshenkin]

Also try to increase delay to 30

[artiomnist]

I am using WebDriverIO 4.2.16 ... That was the issue!
I've tried switching to WebDriverIO 3.4.0 and running the test and it works. 👍

I would have thought the API for WebDriverIO 4.2.16 switchTab method would be the same as WebDriverIO 3.4.0... Anyways, I'll update if I can get v4.2.16 to switchTabs.

Thanks for all your help! Awesome work!

[tony204]

@artiomnist
kindly how can include the helper in your codeceptjs config?

[APshenkin]

@tony204 Please read the documentation http://codecept.io/helpers/

[APshenkin]

Here is changeTab method for WebdriverIO 4.4

changeTab(num) {
        //получаем информацию о webdriver
        let client = this.helpers['WebDriverIO'].browser;
        return client
            .getTabIds().then(function(handles) {
                return this.switchTab(handles[num - 1]);
            });
    }

[APshenkin]

Closing, duplicate https://github.com/Codeception/CodeceptJS/issues/207