playwright-electron
Advanced tools
This package contains the Electron flavor of Playwright.
npm i --save-dev electron@beta playwright-electron
npx mocha
index.js - main Electron application file.
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.
<!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
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 () => {
// After each test close Electron application.
await this.app.close();
});
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, '..'));
});
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();
// Capture window screenshot.
await page.screenshot({ path: 'intro.png' });
});
it('sniff console', async () => {
const page = await this.app.firstWindow();
// Collect console logs.
let consoleText;
page.on('console', message => consoleText = message.text());
// Click button.
await page.click('text=Click me');
// Check that click produced console message.
assert.equal(consoleText, 'click');
});
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());
});
});
FAQs
A high-level API to automate Electron
We found that playwright-electron demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.