Playwright - storageState 和 globalSetup 无法与 POM 正常工作

Question

我正在使用 Playwright 编写我的 e2e 测试。我一直在使用 beforeEach 钩子，但我决定使用全局设置会更好。然而，存储状态似乎没有正确传递给测试本身，或者我的整个实现可能是错误的。

这是我的

playwright.config.ts

:

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

export default defineConfig({
  globalSetup: "./global-setup.ts",
  testDir: './tests',
  retries: 2, // Set the number of retries here
  reporter: [['html'], ['list']],
  use: {
    baseURL: 'http://localhost:8080/velocity_builder',
    headless: true,
    screenshot: 'only-on-failure',
    storageState: './storageState.json'
  },
  workers: 4,
  timeout: 30000,
});

这是我的

global-setup.ts

：

import { expect, Browser, chromium, Page } from '@playwright/test';
import { BuilderPage } from './tests/BuilderPage';

async function globalSetup() {
const browser: Browser = await chromium.launch({ headless: false })
const context = await browser.newContext()
const page: Page = await context.newPage()
const builderPage = new BuilderPage(page); // initialize a new builder page object
await page.goto('http://localhost:8080'); // go to the builder
await builderPage.initializeBuilder(); // initialize the builder by clicking a blank applet

    // Ensure panels are visible
    await expect(builderPage.panels.document).toBeVisible();
    await expect(builderPage.panels.quickView).toBeVisible();
    await expect(builderPage.panels.properties).toBeVisible();
    
    // Ensure buttons are visible
    await expect(builderPage.saveButton).toBeVisible();
    await expect(builderPage.previewButton).toBeVisible();
    await expect(builderPage.automationButton).toBeVisible();
    await expect(builderPage.globalizationButton).toBeVisible();
    await expect(builderPage.addButton).toBeVisible();
    
    // Click on the add button and ensure toolbox panel is visible
    await builderPage.addButton.click();
    await expect(builderPage.panels.toolbox).toBeVisible();
    
    // Store session state (e.g., cookies) for further use in tests
    const storageState = await page.context().storageState({ path: 'storageState.json' });
    console.log(storageState)
    
    await browser.close()

}

export default globalSetup

最后，这是我一直试图运行但未成功的测试：

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

test.describe.configure({ mode: 'parallel', retries: 4 }); // Runs the test in the file in parallel mode and retries them 4 times if they fail
test.describe('Element Style Tests', () =\> {
// let page: Page;
let builderPage: BuilderPage;
test('Check Header Style', async () =\> {
await builderPage.addElementToDocument('Header');
const isElementInQuickView = await builderPage.verifyElementInQuickView();
expect(isElementInQuickView).toBe(true);

        const types = [
            'Header (Branded)',
            'Header (Decorative)',
            'Section',
            'Header'
        ];
    
        for (let i = 0; i < types.length; i++) {
            await new Promise((resolve) => setTimeout(resolve, 500)); // You might want to replace this with a better synchronization method
            await builderPage.checkHeaderStyleChange(types[i]);
        }
    });

});

全局设置似乎工作正常，因为它成功写入

storageState.json

:

{
"cookies": \[\],
"origins": \[
{
"origin": "http://localhost:8080",
"localStorage": \[
{
"name": "flowplayerTestStorage",
"value": "test"
}
\]
}
\]
}

而且当我在无头模式下运行它时，我可以看到命令运行得很好。然而，当它进入测试本身时，这就是我在

test results terminal

中得到的：

Running global setup if any…
{
cookies: \[\],
origins: \[ { origin: 'http://localhost:8080', localStorage: \[Array\] } \]
}

Running 1 test using 1 worker

x  1 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (11ms)
x  2 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #1) (11ms)
x  3 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #2) (12ms)
x  4 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #3) (11ms)
x  5 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #4) (11ms)

1) testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style ─────────────────────────────

    TypeError: Cannot read properties of undefined (reading 'addElementToDocument')
    
       8 |     let builderPage: BuilderPage;
       9 |     test('Check Header Style', async () => {
    > 10 |         await builderPage.addElementToDocument('Header');
         |                           ^
      11 |         const isElementInQuickView = await builderPage.verifyElementInQuickView();
      12 |         expect(isElementInQuickView).toBe(true);
      13 |
    
      ```

如果有人能帮助我理解我做错了什么，我会很高兴。

Answer 1

您需要先创建一个 builderPage 实例。

let builderPage: BuilderPage;

test('Check Header Style', async ({ page }) => {
    builderPage = new BuilderPage(page)
    await builderPage.addElementToDocument('Header');