如何使用 Playwright 在 Electron 桌面应用程序上进行 E2E 测试答案

【问题标题】：How to E2E test on Electron desktop app with Playwright如何使用 Playwright 在 Electron 桌面应用程序上进行 E2E 测试
【发布时间】：2023-01-24 18:40:44
【问题描述】：

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

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

代码如下：

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 端到端测试的文档。我们如何编写可以通过单击按钮转到不同页面的测试？

【问题讨论】：

标签： electron e2e-testing playwright playwright-test

【解决方案1】：

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

我得到了一个页面对象（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();
    });

});

【讨论】：