Second browser instance in protractor can not access class' elements - protractor

Question

I am using the protractor framework. I'd like to write a test checking if User 1 successfully sends message to User 2. Both users should be logged in at 2 different browsers. So, what i want to do is:
it("Test", () => {
let browser2 = browser.forkNewDriverInstance(true);
browser2.Chat.icon.click();
This way i want to click the element icon in the class Chat, which looks like:
export class Chat{
public static icon: p.ElementFinder = element(by.css("#popup > div > div > div > section > header > a"));
}
When i try do do that, the following error appear: Property Chat does not exist on type Protractor
How can i access the elements in the classes from browser2?

Answer 1

So, browser2 in your example is a completely new instance of the browser. The elements on the Chat property are still attached to the initial browser instance (browser). What worked for me is creating a module for switching browser (and element, by, etc.) contexts. The second answer here helped me greatly in creating that library: Multiple browsers and the Page Object pattern
I'm using the page object pattern, so what I had to do was re-instantiate new page objects after I forked the new driver instance. So it ended up something like this (Javascript).
var Loginpage = require('../loginPage.js);
var loginPage = new LoginPage();
it('user1 logs in, sends message to user2' () => {
loginPage.login()
//send your message
});
it('user2 logs in and looks for message' () => {
browser.forkNewDriverInstance(true);
var newBrowserLoginPage = new LoginPage();
newBrowserLoginPage.login()
var newBrowserNotificationsPage = new UserNotificationsPage();
newBrowserNotificationsPage.checkMessages();
});
So, I suggest building the small library for switching browser contexts (and therefore element, by, protractor, etc. contexts).