页面对象中断了 Playwright 上的 waitForElement

Question

观看一些课程后，我想为页面对象实现通用导入器，而不是在每个测试中调用

my_file.page.ts

，我想将所有

*.page.ts

导入到单个

index.ts

文件中，但我无法再调用定位器和使用原生的 Playwright 方法。

这里是

index.ts

const { test: base, expect } = require('@playwright/test')

import { LoginPage } from '../pages/login.page';
import { AssignFields } from '../pages/assignFields.page';

const test = base.extend({
    page: async ({ page }: any, use: (arg0: any) => any) => {
        await use({
            ...page,
            login: new LoginPage(page),
            assignfields: new AssignFields(page),
        })
    }
})

export { test, expect };

我没有对

assignFields.page.ts

进行任何更改

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

const selectors = {
    btnAssignFields: 'selector1',
    btnEdit: 'selector2',
    tableFields: 'selector3',
    tableFieldsItems: 'selector4',
};

export class AssignFields {
    readonly page: Page;
    readonly selectors : any;

    constructor(page: Page) {
        this.page = page;
        this.selectors = selectors
    }

    async assignFields() {
        await this.page.locator(this.selectors.btnAssignFields).click();
    }

    async edit() {
        if (await this.page.isVisible(this.selectors.btnEdit)) {
            await this.page.locator(this.selectors.btnEdit).click();
        }
    }

    async searchByField(fieldName: string) {
        await this.page.getByPlaceholder('Search').fill(fieldName);
    }
}

这样，我导入

index.ts

文件并在

assignFields.spec.ts

上进行测试

import { test, expect } from '../support/index';

test('Filter by text', async ({ page }) => {
    await page.login.goto();
    await page.login.fillEmail('[email protected]');
    await page.login.fillPass('my_password');
    await page.login.clickLogin();

    await page.locator(page.assignfields.selectors.btnAssignFields).waitFor();

    await page.assignfields.assignFields();
    await page.waitForSelector(page.assignfields.selectors.tableFields);
    await page.assignfields.edit();

    await page.assignfields.searchByField('my_field');

    await expect(
        page.locator(page.assignfields.selectors.tableFieldsItems)
    ).toHaveCount(1);
});

运行项目时，我收到以下消息：

@assignFields.spec.ts:9
TypeError: page.locator is not a function

那一行是第一行

await page.locator

，我从中了解到的是某些东西没有被正确导入，也许是剧作家本身，也许是其他东西，但我无法从这一点继续。

Answer 1

看起来您混淆了页面 - 这是由 Playwright 提供的真实

page

对象，以及您创建的名为 LoginPage 和AssignFields 的页面。

您可以调用 page.page.locator 来解决问题，而不是使用 page.locator，但可能需要对 index.ts 进行一些额外的更改。

我会去改变命名约定。

这是我的建议：

• 不要覆盖页面，你可以将其称为应用程序或其他名称。
• 在index.ts中，保留原始页面对象。

const test = base.extend({
    app: async ({ page }, use) => {
        await use({
            page,  // Keep the original page object
            login: new LoginPage(page),
            assignfields: new AssignFields(page),
        });
    }
});

• 然后我会更新我的规范文件以使用

  app

  而不是页面。

test('Filter by text', async ({ app }) => {
    await app.login.goto();
    await app.login.fillEmail('[email protected]');
    await app.login.fillPass('my_password');
    await app.login.clickLogin();

    await app.page.locator(app.assignfields.selectors.btnAssignFields).waitFor();

    ...

这些更改应该会给您解决问题的想法。