How to continue tests using existing browser session in Playwright with Typescript?

Question

I am trying to use Page Object Model for Playwright UI tests. I have created a setup file for login, as this is always the first step in each test.

    import { test as setup, expect } from '@playwright/test';
    import { Credentials } from '../pages/Credentials';
    import { LoginPage } from '../pages/Login.page';

    const authFile = 'playwright/.auth/user.json';

    setup('authenticate', async ({ page }) => {

    const loginPage = new LoginPage(page);

    await loginPage.navigate();
    await loginPage.enterUsername(Credentials.username);
    await loginPage.enterPassword(Credentials.password);
    await loginPage.clickLoginButton();
    expect (await loginPage.getWelcomeMessage()).toBe(true);
    // End of authentication steps.

    await page.context().storageState({ path: authFile });
    });

However, when I continue to the next page of my test, the browser closes and a new empty browser session opens. I want the test to carry on using the existing browser session.

This is my code for the test using POM.

    // PMSIntegrations.ts
    import { test, expect } from '@playwright/test';
    import PMSIntegrations from '../pages/PMSIntegrations.page';

    test('User can integrate with third parties', async ({ page }) => {

    const pmsIntegrationsPage = new PMSIntegrations(page);
    await pmsIntegrationsPage.navigateToIntegrations();

    expect (await pmsIntegrationsPage.areServicesConnected()).toBe(true);
    });

And this is my config

    import { PlaywrightTestConfig } from '@playwright/test';

    const config: PlaywrightTestConfig = {

    projects: [

    { name: 'setup', testMatch: /.*\.setup\.ts/ },

       {
         name: 'Chromium',
         use: { browserName: 'chromium',
         // Use prepared auth state.
         storageState: 'playwright/.auth/user.json',
       },
       dependencies: ['setup'],
        }
       ],
     };

    export default config;

Any help always welcomed and appreciated. Thanks

Answer 1

You will want to use the browser state rather than page when storing the state in the set up and then reusing this when starting your tests.

For example:

test('User can integrate with third parties', async ({ page, browser }) => {....})

and then in the setup file you can do so like this

setup('authenticate', async ({ page, browser }) => {
    const loginPage = new LoginPage(page);

    await loginPage.navigate();
    await loginPage.enterUsername(Credentials.username);
    await loginPage.enterPassword(Credentials.password);
    await loginPage.clickLoginButton();
    expect (await loginPage.getWelcomeMessage()).toBe(true);
    // End of authentication steps.

    await browser.context().storageState({ path: authFile });
});

You will want to pass this into each test that is reusing the context. Here's some more Playwright documentation on this.

Answer 2

For the updated versions, the following snippet should be effective:

setup('authenticate', async ({ page, browser }) => {
    const loginPage = new LoginPage(page);

    await loginPage.navigate();
    await loginPage.enterUsername(Credentials.username);
    await loginPage.enterPassword(Credentials.password);
    await loginPage.clickLoginButton();
    expect (await loginPage.getWelcomeMessage()).toBe(true);
    // End of authentication steps.

    await browser.contexts().forEach(async context => {
      await context.storageState({ path: authFile });
    });
});

Incorporate the previously saved cookies into your test.

const fs = require('fs');

const storageState = JSON.parse(fs.readFileSync(authFile, 'utf8'));

const context: BrowserContext = await browser.newContext({ storageState });
const newpage = await context.newPage();

await newpage.goto('https://your_url_here/');