Hello:
I’m trying to add e2e test to Theia electron application since I need to test the electron application on various platforms.
I added a config file playwright.config.ts:
// *****************************************************************************
// Copyright (C) 2017 Ericsson and others.
//
// This program and the accompanying materials are made available under the
// terms of the Eclipse Public License v. 2.0 which is available at
// http://www.eclipse.org/legal/epl-2.0.
//
// This Source Code may also be made available under the following Secondary
// Licenses when the conditions for such availability set forth in the Eclipse
// Public License v. 2.0 are satisfied: GNU General Public License, version 2
// with the GNU Classpath Exception which is available at
// https://www.gnu.org/software/classpath/license.html.
//
// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
// *****************************************************************************
import { expect, test } from '@playwright/test';
import { ElectronApplication, Page, _electron as electron } from 'playwright';
let electronApp: ElectronApplication;
test.beforeAll(async () => {
electronApp = await electron.launch({
args: [
'./src-gen/frontend/electron-main.js'
]
});
electronApp.on('window', async page => {
const filename = page.url()?.split('/').pop();
console.log(`Window opened: ${filename}`);
page.on('pageerror', (error) => {
console.error(error);
});
page.on('console', (msg) => {
console.log(msg.text());
});
});
});
test.afterAll(async () => {
await electronApp.close();
});
let page: Page;
test('renders the first page', async () => {
page = await electronApp.firstWindow()
// await page.waitForSelector('h1')
// const text = await page.$eval('h1', (el) => el.textContent)
// expect(text).toBe('Hello World!')
// console.log(222222, page);
const contentPanel = await page.$('#theia-main-content-panel');
console.log(111111, contentPanel?.isVisible());
await page.screenshot({ path: './test.png' });
const title = await page.title();
console.log(111111, title);
expect(title).toBe('Window 1');
});
and a test file electron-playwright-test.spec.ts:
// *****************************************************************************
// Copyright (C) 2021 logi.cals GmbH, EclipseSource and others.
//
// This program and the accompanying materials are made available under the
// terms of the Eclipse Public License v. 2.0 which is available at
// http://www.eclipse.org/legal/epl-2.0.
//
// This Source Code may also be made available under the following Secondary
// Licenses when the conditions for such availability set forth in the Eclipse
// Public License v. 2.0 are satisfied: GNU General Public License, version 2
// with the GNU Classpath Exception which is available at
// https://www.gnu.org/software/classpath/license.html.
//
// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
// *****************************************************************************
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
testDir: '../lib/tests',
testMatch: ['**/*.js'],
workers: 2,
// Timeout for each test in milliseconds.
timeout: 60 * 1000,
use: {
baseURL: 'http://localhost:3000',
browserName: 'chromium',
screenshot: 'only-on-failure',
viewport: { width: 1920, height: 1080 }
},
snapshotDir: '../src/tests/snapshots',
expect: {
toMatchSnapshot: { threshold: 0.15 }
},
preserveOutput: 'failures-only',
reporter: [
['list'],
['allure-playwright']
]
};
export default config;
And I added a scripts to the electron’s package.json:
"test:playwright": "playwright test --config=./configs/playwright.config.ts"
But the test failed:
mac@Titans-iMac theia-1.25.0 % yarn electron test:playwright
yarn run v1.22.19
$ yarn --cwd examples/electron test:playwright
$ playwright test --config=./configs/playwright.config.ts
Using config at /Users/mac/Downloads/theia-1.25.0/examples/electron/configs/playwright.config.ts
Running 1 test using 1 worker
✘ ../../../test/electron-playwright-test.spec.ts:50:5 › renders the first page (2s)
Window opened: index.html?port=59591
111111 undefined
%cElectron Security Warning (Insecure Content-Security-Policy) font-weight: bold; This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb.me/react-devtools-faq font-weight:bold
111111
1) ../../../test/electron-playwright-test.spec.ts:50:5 › renders the first page ==================
Error: expect(received).toBe(expected) // Object.is equality
Expected: "Window 1"
Received: ""
63 |
64 | console.log(111111, title);
> 65 | expect(title).toBe('Window 1');
| ^
66 | })
67 |
at /Users/mac/Downloads/theia-1.25.0/examples/electron/test/electron-playwright-test.spec.ts:65:19
at WorkerRunner._runTestWithBeforeHooks (/Users/mac/Downloads/theia-1.25.0/node_modules/@playwright/test/lib/workerRunner.js:499:7)
--- Test output ------------------------------------------------------------------------------------
Window opened: index.html?port=59591
111111 undefined
%cElectron Security Warning (Insecure Content-Security-Policy) font-weight: bold; This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb.me/react-devtools-faq font-weight:bold
111111
----------------------------------------------------------------------------------------------------
1 failed
../../../test/electron-playwright-test.spec.ts:50:5 › renders the first page ===================
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The screenshot created successfully but it’s all blank:
Seems like the backend part has beed launched but the frontend part has not finished rendering yet?