如何使用Playwright在Electron桌面端进行E2E测试

Question

我尝试与剧作家一起编写 E2E 测试，但出了点问题。

当我初始化测试时，测试通过了，但实际上，括号内的块没有 go。 当我输入错误的选择器时它也通过了测试。

代码如下：

import { _electron as electron } from 'playwright';
import { test, expect, ElectronApplication, Page, BrowserContext, Locator } from '@playwright/test';

test.describe('Add Connection', async() => {
let electronApp: ElectronApplication;
let firstWindow: Page;
let context: BrowserContext;

    test.beforeAll(async() => {
        electronApp = await electron.launch({ args: ['.']} );
    
        const appPath = await electronApp.evaluate(async({ app }) => {
            return app.getAppPath();
        });
        console.log(appPath);
    });
    
    test('Try Connection', () => {
        electronApp.on('window', async(page) => {
    
            await page.getByTestId('settings').click({delay: 1000});
            await page.getByTestId('connection').click({delay: 1000});   
    
        });
        
    });
    
    test.afterAll(async() => {
        await electronApp.close();
    });

});

我还没有看到足够的关于 Electron 端到端测试的文档。我们如何编写一个测试，我们可以通过单击按钮将 go 转到不同的页面？

Answer 1

我解决了这个问题。 “尝试连接”测试的内部不起作用，因为 electronApp.on() 是回调 function。要编写 ElectronJS 和 Playwright 测试，我选择以下步骤：

我得到了一个页面 object (firstWindow) 之后我点击了按钮并去了我想测试的地方。

最终代码：

import { _electron as electron } from 'playwright';
import { test, expect, ElectronApplication, Page } from '@playwright/test';

test.describe('Add Connection', async() => {
    let electronApp: ElectronApplication;
    let firstWindow: Page;

    test.beforeAll(async() => {
        electronApp = await electron.launch({ args: ['.']} );
        firstWindow = await electronApp.firstWindow();
    });

    test('Try Connection', async() => {
        await firstWindow.title();
        await firstWindow.click('xpath=//*[@id="sidemenu-container"]/a[3]', {delay: 1500});
        await firstWindow.click('xpath=//*[@id="***"]/app-settings/div/div[1]/button[1]', {delay: 1500});
        await firstWindow.click('xpath=//*[@id="***"]', {delay: 1500});
        await firstWindow.getByPlaceholder('***').fill('emir connection');
        await firstWindow.locator('#***').selectOption({label: '***'});
        await firstWindow.click('xpath=//*[@id="***"]', {delay: 2000});
        // for the wait, (fake click)
        await firstWindow.click('xpath=//*[@id="***"]', {delay: 7000});
    });

    test.afterAll(async() => {
        await electronApp.close();
    });

});