Protractor : Wait for element doesn't work in the 'second browser instance' of a same test - protractor

Question

I am trying to use multiple browsers in the same test, script fails when i try to wait for the element present in second browser.
var browser2 = browser.forkNewDriverInstance(true);
browser2.get('https://test.app.com');
var EC = protractor.ExpectedConditions;
browser2.wait(EC.visibilityOf($('.meeting-btn>span')),15000); //Script fails here
browser2.$('.meeting-btn>span').click();
console.log("clicked Meeting button");
*Error:
Failed: Wait timed out after 15010ms
The element is actually present in the screen but wait keyword isn't locating the element. The script actually works when i write the code in following manner.
var browser2 = browser.forkNewDriverInstance(true);
browser2.get('https://test.app.com');
var EC = protractor.ExpectedConditions;
browser.sleep(15000);
browser2.$('.meeting-btn>span').click();
console.log("clicked Meeting button");
Script fails only when i insert wait keyword. Any suggestions would be helpful.

Answer 1

Your error is this line:
browser2.wait(EC.visibilityOf($('.meeting-btn>span')),15000); //Script fails here
Using $('.meeting-btn>span') implicitly uses the main browser so is equivalent to browser.$('.meeting-btn>span'), which can't be found in browser2.
To fix the error, use:
browser2.wait(EC.visibilityOf(browser2.$('.meeting-btn>span')),15000); //Script fixes
To avoid this kind of error during developpment, I usually define my ElementFinder first, then re-use it. See "targetElement" here:
var browser2 = browser.forkNewDriverInstance(true);
browser2.get('https://test.app.com');
const targetElement = browser2.$('.meeting-btn>span');
var EC = protractor.ExpectedConditions;
browser2.wait(EC.visibilityOf(targetElement),15000); //Script fails here
targetElement.click();
console.log("clicked Meeting button");
To test this code in a new project:
follow setup steps from https://www.protractortest.org/#/
change conf.js so it looks like the following:
exports.config = {
// seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['todo-spec.js'],
directConnect: true,
// SELENIUM_PROMISE_MANAGER: true
};
create test file test.js:
function checkElements(targetBrowser) {
const targetURL = 'https://angular.io/';
targetBrowser.get(targetURL);
const targetSelector = 'a.button.hero-cta.no-print';
const targetElem = targetBrowser.$(targetSelector);
var EC = protractor.ExpectedConditions;
targetBrowser.wait(EC.visibilityOf(targetElem),15000); //Script fails here
targetElem.click();
// title is present
const titleElem = targetBrowser.$("#getting-started-with-angular");
expect(titleElem.getText()).toEqual('Getting started with Angular');
}
describe('angular homepage', function() {
it('test with browser', function() {
checkElements(browser);
});
it('test with 2nd browser', function() {
const browser2 = browser.forkNewDriverInstance(true);
checkElements(browser2);
});
});
add another it method with the code from this answer:
it('MY TEST', function() {
var browser2 = browser.forkNewDriverInstance(true);
browser2.get('https://test.app.com');
const targetElement = browser2.$('.meeting-btn>span');
var EC = protractor.ExpectedConditions;
browser2.wait(EC.visibilityOf(targetElement),15000); //Script fails here
targetElement.click();
console.log("clicked Meeting button");
});
run protractor: "protractor conf.js"