2020-05-11 18:00:33 -07:00
|
|
|
# playwright-electron
|
|
|
|
|
This package contains the [Electron](https://www.electronjs.org/) flavor of [Playwright](http://github.com/microsoft/playwright).
|
2020-05-11 18:56:05 -07:00
|
|
|
|
|
|
|
|
## How to demo
|
|
|
|
|
|
|
|
|
|
```bash
|
2020-05-12 15:57:04 -07:00
|
|
|
npm i --save-dev electron@beta playwright-electron
|
|
|
|
|
npx mocha
|
2020-05-11 18:56:05 -07:00
|
|
|
```
|
|
|
|
|
|
2020-05-12 15:57:04 -07:00
|
|
|
|
2020-05-11 18:56:05 -07:00
|
|
|
`index.js` - main Electron application file.
|
|
|
|
|
```js
|
|
|
|
|
const { app, BrowserWindow } = require('electron');
|
|
|
|
|
|
|
|
|
|
function createWindow () {
|
|
|
|
|
let win = new BrowserWindow({
|
|
|
|
|
width: 800,
|
|
|
|
|
height: 600,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
win.loadFile('index.html');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
app.whenReady().then(createWindow);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
`index.html` - page that Electron opens in a BrowserWindow.
|
|
|
|
|
```js
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Hello World!</title>
|
|
|
|
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
|
|
|
|
<style>
|
|
|
|
|
html {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
flex: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Hello World!</h1>
|
|
|
|
|
<button onclick="console.log('click')">Click me</button>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
`test/spec.js` - test file
|
|
|
|
|
```js
|
|
|
|
|
const { electron } = require('playwright-electron');
|
|
|
|
|
const assert = require('assert');
|
|
|
|
|
const electronPath = require('electron');
|
|
|
|
|
const path = require('path')
|
|
|
|
|
|
|
|
|
|
describe('Sanity checks', function () {
|
|
|
|
|
this.timeout(10000);
|
|
|
|
|
|
|
|
|
|
beforeEach(async () => {
|
|
|
|
|
// Before each test start Electron application.
|
|
|
|
|
this.app = await electron.launch(electronPath, {
|
|
|
|
|
path: electronPath,
|
|
|
|
|
args: [path.join(__dirname, '..')] // loads index.js
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
afterEach(async () => {
|
2020-06-13 23:10:34 -07:00
|
|
|
// After each test close Electron application.
|
2020-05-11 18:56:05 -07:00
|
|
|
await this.app.close();
|
|
|
|
|
});
|
|
|
|
|
|
2020-05-12 15:28:37 -07:00
|
|
|
it('script application', async () => {
|
|
|
|
|
const appPath = await this.app.evaluate(async ({ app }) => {
|
|
|
|
|
// This runs in the main Electron process, first parameter is
|
|
|
|
|
// the result of the require('electron') in the main app script.
|
|
|
|
|
return app.getAppPath();
|
|
|
|
|
});
|
|
|
|
|
assert.equal(appPath, path.join(__dirname, '..'));
|
|
|
|
|
});
|
2020-05-11 18:56:05 -07:00
|
|
|
|
2020-05-12 15:28:37 -07:00
|
|
|
it('window title', async () => {
|
|
|
|
|
// Return value of this.app.firstWindow a Playwright Page.
|
|
|
|
|
// See https://playwright.dev/#path=docs%2Fapi.md&q=class-page.
|
|
|
|
|
|
|
|
|
|
// Get a Playwright page for the first Electron window.
|
|
|
|
|
// It awaits for the page to be available. Alternatively use
|
|
|
|
|
// this.app.windows() or this.app.waitForEvent('window').
|
|
|
|
|
const page = await this.app.firstWindow();
|
|
|
|
|
assert.equal(await page.title(), 'Hello World!');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('capture screenshot', async () => {
|
|
|
|
|
const page = await this.app.firstWindow();
|
2020-05-11 18:56:05 -07:00
|
|
|
|
|
|
|
|
// Capture window screenshot.
|
2020-05-12 15:28:37 -07:00
|
|
|
await page.screenshot({ path: 'intro.png' });
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('sniff console', async () => {
|
|
|
|
|
const page = await this.app.firstWindow();
|
2020-05-11 18:56:05 -07:00
|
|
|
|
|
|
|
|
// Collect console logs.
|
|
|
|
|
let consoleText;
|
2020-05-12 15:28:37 -07:00
|
|
|
page.on('console', message => consoleText = message.text());
|
2020-05-11 18:56:05 -07:00
|
|
|
|
|
|
|
|
// Click button.
|
2020-05-12 15:28:37 -07:00
|
|
|
await page.click('text=Click me');
|
2020-05-11 18:56:05 -07:00
|
|
|
|
|
|
|
|
// Check that click produced console message.
|
|
|
|
|
assert.equal(consoleText, 'click');
|
|
|
|
|
});
|
2020-05-12 15:28:37 -07:00
|
|
|
|
|
|
|
|
it('intercept network', async () => {
|
|
|
|
|
await this.app.firstWindow();
|
|
|
|
|
|
|
|
|
|
// Return value of this.app.context() is a Playwright BrowserContext.
|
|
|
|
|
// See https://playwright.dev/#path=docs%2Fapi.md&q=class-browsercontext.
|
|
|
|
|
|
|
|
|
|
await await this.app.context().route('**/empty.html', (route, request) => {
|
|
|
|
|
route.fulfill({
|
|
|
|
|
status: 200,
|
|
|
|
|
contentType: 'text/html',
|
|
|
|
|
body: '<title>Hello World</title>',
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Helper method to create BrowserWindow.
|
|
|
|
|
const page = await this.app.newBrowserWindow({ width: 800, height: 600 });
|
|
|
|
|
await page.goto('https://localhost:1000/empty.html');
|
|
|
|
|
|
|
|
|
|
assert.equal(await page.title(), 'Hello World');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('should maximize window', async () => {
|
|
|
|
|
await this.app.firstWindow();
|
|
|
|
|
|
|
|
|
|
const page = await this.app.newBrowserWindow({ width: 800, height: 600 });
|
|
|
|
|
// page.browserWindow is a Playwright JSHandle pointing at Electron's
|
|
|
|
|
// BrowserWindow.
|
|
|
|
|
// https://playwright.dev/#path=docs%2Fapi.md&q=class-jshandle
|
|
|
|
|
await page.browserWindow.evaluate(browserWindow => browserWindow.maximize());
|
|
|
|
|
});
|
|
|
|
|
|
2020-05-11 18:56:05 -07:00
|
|
|
});
|
2020-05-12 09:20:25 -07:00
|
|
|
```
|
