Question: How to change context between step/pageObjects

[jzaratei]

So, I have an e2e scenario where I have to do a first login with X-user, do something and then do a second login with a Y-user

When I do login with X-user 
 Then I do something
 When I do login with Y-user
 Then I check something

The problem here is that when I create a new context in the second login step:

const context = await this.browser.newContext({
      storageState: STORAGE_STATE_EXTERNAL,
    });
    this.page = await context.newPage();
    await this.page.goto('myapp.com')

The last step 'Then I check something' is using the old context (the first one).
Is there a way to share this new created context between the remaining steps/page objects?

the official playwright approach is to create as many page objects as many roles you have: https://playwright.dev/docs/auth#testing-multiple-roles-with-pom-fixtures, but in that case I would have to duplicate my page objects which would increase the maintenance task.

thanks for your suggestions.

[vitalets]

Could you provide more details on how steps are implemented?
The main question - does I check something step need access to both user X and user Y or only to user Y?
In general, I think you can do something similar to auth-in-steps example. Use some fixture that holds current values of the context (e.g. page and other POMs) and can switch these values dynamically.
If you are using Cucumber style, such fixture already exists - it's world fixture.
For example:

export class World {
  constructor() {}

  async setActiveUser(userName) {
    const context = await this.browser.newContext({
      storageState: STORAGE_STATE_EXTERNAL,
    });
    this.page = await context.newPage();
    // re-create fixtures b/c page was changed 
    this.pom = new POM(this.page);
  }
}

Then in steps:

When('I do login with {string}', async function (user: string) {
  await this.setActiveUser(user);
});

Then('I check something', async function () {
  await this.pom.checkSomething(); // <- uses pom for user Y
});

[jzaratei]

hello @vitalets, I am using decorators to implement steps in page objects

export
@Fixture("loginPage")
class loginPage{
 private user: Locator
 private pass: Locator
 private loginBtn: Locator

constructor (public page: Page) {
 this.user = this.page.getId('user')
 this.password = this.page.getId('password')
}

@Given("I do login with {} user {} pass")
async doLogin(user: string, pass: string) {
    await this.user.fill(user);
    await this.password.fill(pass);
    await this.loginBtn.click();
  }

@Given("I do login with {} user {} pass in another window")
async doLoginNewWindow(user: string, pass: string) {
    const context = await this.browser.newContext({
      storageState: STORAGE_STATE_EXTERNAL,
    });
    this.page = await context.newPage();
    await this.page.goto('myapp.com')
    await doLogin(user, password)
  }
}

export
@Fixture("checkPage")
class checkPage{
 private item1: Locator

constructor (public page: Page) {
 this.item1= this.page.getId('item')
}

@Given("I check something")
async checkPage() {
    await expect(this.item).tobeVisible();
  }
}

export const test = base.extend<{
  loginPage: LoginPage;
  checkPage: CheckPage
}>({
    loginPage: async ({ page}, use) => {
    await use(new LoginPage(page));
  },
   checkPage: async ({ page}, use) => {
    await use(new CheckPage(page));
   },
  },
)

The step ' Then I check something ' is only access by Y-user:

When I do login with X-user --> do initial login with X-login
 Then I do something --> X-user do something
 When I do login with Y-user  in another window --> do second login in a new browser with Y-login
 Then I check something --> Y-user check page

I am only using playwright style to implement steps, hence am not familiar with cucumber word.

Thanks for your support

[vitalets]

Got it! As page can switch dynamically, I suggest to adopt POMs to that. For example, use getters instead of locator properties:

export
@Fixture("loginPage")
class loginPage {
 constructor (public page: Page) {}
  
 get user() {
   return this.page.getId('user');
 }
  
 get password() {
   return this.page.getId('password');
 }
  
 get loginBtn() {
   return this.page.getId('loginBtn');
 }
}

The same for checkPage:

export
@Fixture("checkPage")
class checkPage{
  constructor (public page: Page) {}

  get item1() {
    return this.page.getId('item');
  }

  @Given("I check something")
  async checkPage() {
      await expect(this.item).tobeVisible();
    }
  }
}

Now the only problem - how to promote new page to other fixtures. I see the straightforward way - do it in loginPage:

export const test = base.extend<{
  loginPage: LoginPage;
  checkPage: CheckPage
}>({
    loginPage: async ({ page, checkPage }, use) => {
    await use(new LoginPage(page, checkPage)); // <- pass checkPage to loginPage
  },
   checkPage: async ({ page}, use) => {
    await use(new CheckPage(page));
   },
  },
);

class LoginPage{
  constructor (public page: Page, private checkPage: CheckPage) {}

  @Given("I do login with {} user {} pass in another window")
  async doLoginNewWindow(user: string, pass: string) {
      const context = await this.browser.newContext({
        storageState: STORAGE_STATE_EXTERNAL,
      });
      this.page = await context.newPage();
      await this.page.goto('myapp.com')
      await doLogin(user, password);
      
      this.checkPage.page = this.page; // <- update page in CheckPage
    }
  }

If that concept is suitable, we can do it in more universal way, by passing array of fixtures that should get updated page:

class LoginPage{
  constructor (public page: Page, private dynamicFixtures: {page: Page}[]) {}

  async doLoginNewWindow(user: string, pass: string) {
      // ...
      this.dynamicFixtures.forEach(f => f.page = this.page);
  } 
} 

export const test = base.extend<{
  loginPage: LoginPage;
  checkPage: CheckPage
}>({
   loginPage: async ({ page, checkPage, fixtureA, fixtureB }, use) => {
    await use(new LoginPage(page, [checkPage, fixtureA, fixtureB]));
  },
);

[jzaratei]

Thanks, I Will give It a try.