TS剧作家。使用 POM 时无法重复使用身份验证

Question

我是 Playwright 的新手，但我知道我们可以重新使用 Playwright 的身份验证。然而，当我用POM进行测试时，似乎无法使用它。有谁能帮我解决这个问题吗？

我能够生成 storageState.json 文件，其中包含设置中的所有登录信息。然而，到了测试的时候，却要求我重新登录。

I have my logInPageAction.ts 

import {expect, Page } from '@playwright/test';
import { LoginPageLocator } from '../pageLocator/loginPage';
import  { BasePageAction } from './BasePage';


export class logInPageAction extends BasePageAction {
    constructor(public page: Page ) { 
        super(page)
    }

    async goToPage(url: string){
        await this.page.goto(`${url}`,{ timeout: 45000 });
    }

    async validLogin(username:string , password:string){
        await this.page.click(LoginPageLocator.aggreeToAllBnt);
        await this.page.click(LoginPageLocator.logInNowBnt);
        await this.page.fill(LoginPageLocator.idpUsernameInput,username);
        await this.page.click(LoginPageLocator.idpNextBnt);
        await this.page.fill(LoginPageLocator.passwordInput,password);
        await this.page.click(LoginPageLocator.signInBnt);

        // await expect(this.page).toHaveURL('/myproducts/')
    }

globle-setup.ts
import { chromium, expect, FullConfig } from '@playwright/test';
import { logInPageAction } from '../PageAction/logInPageAction';
import { creatdential } from '../config/config';

async function globalSetup(config: FullConfig) { 

  const browser = await chromium.launch();
  const context = await browser.newContext()
  const page = await context.newPage()

  const newLoginPage = new logInPageAction(page)
  const creaden = new creatdential()
  const baseURL =  await creaden.getBaseUrl()
  await console.log (baseURL)
  await newLoginPage.goToPage(`${baseURL}/app`)
  await newLoginPage.validLogin(await creaden.getUserName(),await creaden.getPassword())

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

  global.__BROWSER__ = browser;
  global.__CONTEXT__ = context;
  global.__PAGE__ = page;
}
export default globalSetup; 

playwright.config.ts

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

const config: PlaywrightTestConfig = {

  testDir: './tests',
  timeout: 240 * 1000,
  expect: {
    timeout: 45000
  },
  /* Global setup */
  reporter: 'html',
  globalSetup: require.resolve('./support/global-setup'),

  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
    storageState: './storageState.json',
  },
  projects: [
    {
      name: 'chromium',

      /* Project-specific settings. */
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1920, height: 1080 },
        headless: false

      },
    },
  ],
};
export default config;

test file example.spec.ts

import { test, expect } from '@playwright/test';

import { logInPageAction } from '../PageAction/logInPageAction';
import { BasePageAction } from '../PageAction/BasePage';

test('has title', async ({ page }) => {

  const pag = new BasePageAction(page)
  await pag.gotoMainPage(await pag.getBaseUrl())
  await expect(page).toHaveTitle(/Demo/);
});

Answer 1

import { chromium } from '@playwright/test';
import { logInPageAction } from '../PageAction/logInPageAction';
import { Credential } from '../config/config'; // Assuming creatdential is a typo.

async function globalSetup() { 
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const loginPage = new logInPageAction(page);
  const credential = new Credential(); // Assuming Credential is a class that provides login details.
  const baseURL = await credential.getBaseUrl();
  
  await loginPage.goToPage(`${baseURL}/app`);
  await loginPage.validLogin(await credential.getUserName(), await credential.getPassword());

  // Save the authentication state.
  await context.storageState({ path: 'storageState.json' });

  await browser.close(); // Make sure to close the browser after setup to avoid any open sessions.
}

export default globalSetup;