剧作家在无头模式下测试失败

Question

我有一个beforeAll函数，它在我在每个test.describe中测试的应用程序中执行登录。 当我处于headless: false模式时，一切正常。 这是beforeAll和登录功能：

//before alll function
test.beforeAll(async ({ browser }) => {
    page = await browser.newPage();
    await performAutomaticLogin(page);
});

//login function (necessary code for this question)
export const performAutomaticLogin = async (page: Page) => {
    await page.goto('/login');
    await page.click('text=Log in with Google account');
    await page.fill('id=identifierId', process.env.NEXT_PUBLIC_TEST_USER!);
    ...
};

但是，当我切换到无头模式时，这一行开始出现故障：

await page.fill('id=identifierId', process.env.NEXT_PUBLIC_TEST_USER!);

page.fill: Target closed
=========================== logs ===========================
waiting for selector "id=identifierId"
============================================================

我不知道为什么。 我关注了这个GitHub 线程，但那里推荐的配置对我不起作用。 这是我的配置：

const config: PlaywrightTestConfig = {
    workers: 1,
    testDir: '../',
    use: {
        baseURL: 'http://localhost:3000',
    },
    timeout: 60000,
    projects: [
        {
            name: 'Chrome / Edge - FullHD',
            use: {
                browserName: 'chromium',
                headless: true,
                viewport: { width: 1920, height: 1080 },
                //these launch options came from github. I tried with and without them
                launchOptions: {
                    args: ['--no-sandbox', '--headless', '--disable-gpu'],
                },
            },
        },
    ],
    reporter: [['junit', { outputFile: 'test-results.xml' }]],
};
export default config;

版本：

• 剧作家/ @playwright/test: ^1.25.0
• 铬版本：105.0.5195.19

Answer 1

Google OAuth 页面在无头模式下访问时会有所不同。 您可以通过使用 page.screenshot() 截取页面或使用page.url() page.screenshot()检查页面 URL 来注意到它。

这就是我在项目中的做法：

async signIn(emailAddress, password) {
    // Make sure we are prompted to sign in with Google
    expect(this.page.url()).toMatch(new RegExp('https://accounts.google.com/(signin|o/oauth2|ServiceLogin)'))

    if (this.page.url().match(new RegExp('https://accounts.google.com/(signin|o/oauth2)'))) {
        // Email address
        await this.page.fill('input[type="email"]', emailAddress)
        await this.page.click('#identifierNext')

        // Password
        await this.page.fill('input[type="password"]', password)
        await this.page.click('#passwordNext')
    } else {
        /* Google uses legacy OAuth page when browser is in headless mode */

        // Fill email address
        await this.page.fill('//html/body/div/div[2]/div[2]/div[1]/form/div/div/div/div/div/input[1]', emailAddress)
        await this.page.click('//html/body/div/div[2]/div[2]/div[1]/form/div/div/input')

        // Fill password
        await this.page.fill('//html/body/div[1]/div[2]/div/div[2]/form/span/div/div[2]/input', password)
        await this.page.click('//html/body/div[1]/div[2]/div/div[2]/form/span/div/input[2]')
    }
}

这不是一个有效的解决方案，但现在可以工作几个月。

Answer 2

用这个：

await page.waitForSelector('id=yourId');
await page.fill('id=yourId', process.env.NEXT_PUBLIC_TEST_USER!);

Answer 3

只需在 launchOptions 中添加 'headless=chrome'

use:{launchOptions: {args: ['--headless=chrome']}}