docs: update Playwright automated-testing guide (#41081)

This commit is contained in:
Max Schmitt 2024-01-24 16:50:55 +01:00 committed by GitHub
parent 1af9612edf
commit 5ced88a90a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -196,32 +196,19 @@ support via Electron's support for the [Chrome DevTools Protocol][] (CDP).
### Install dependencies ### Install dependencies
You can install Playwright through your preferred Node.js package manager. The Playwright team You can install Playwright through your preferred Node.js package manager. It comes with its
recommends using the `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` environment variable to avoid own [test runner][playwright-intro], which is built for end-to-end testing:
unnecessary browser downloads when testing an Electron app.
```sh npm2yarn
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install --save-dev playwright
```
Playwright also comes with its own test runner, Playwright Test, which is built for end-to-end
testing. You can also install it as a dev dependency in your project:
```sh npm2yarn ```sh npm2yarn
npm install --save-dev @playwright/test npm install --save-dev @playwright/test
``` ```
:::caution Dependencies :::caution Dependencies
This tutorial was written `playwright@1.16.3` and `@playwright/test@1.16.3`. Check out This tutorial was written with `@playwright/test@1.41.1`. Check out
[Playwright's releases][playwright-releases] page to learn about [Playwright's releases][playwright-releases] page to learn about
changes that might affect the code below. changes that might affect the code below.
::: :::
:::info Using third-party test runners
If you're interested in using an alternative test runner (e.g. Jest or Mocha), check out
Playwright's [Third-Party Test Runner][playwright-test-runners] guide.
:::
### Write your tests ### Write your tests
Playwright launches your app in development mode through the `_electron.launch` API. Playwright launches your app in development mode through the `_electron.launch` API.
@ -229,8 +216,7 @@ To point this API to your Electron app, you can pass the path to your main proce
entry point (here, it is `main.js`). entry point (here, it is `main.js`).
```js {5} @ts-nocheck ```js {5} @ts-nocheck
const { _electron: electron } = require('playwright') const { test, _electron: electron } = require('@playwright/test')
const { test } = require('@playwright/test')
test('launch app', async () => { test('launch app', async () => {
const electronApp = await electron.launch({ args: ['main.js'] }) const electronApp = await electron.launch({ args: ['main.js'] })
@ -242,9 +228,8 @@ test('launch app', async () => {
After that, you will access to an instance of Playwright's `ElectronApp` class. This After that, you will access to an instance of Playwright's `ElectronApp` class. This
is a powerful class that has access to main process modules for example: is a powerful class that has access to main process modules for example:
```js {6-11} @ts-nocheck ```js {5-10} @ts-nocheck
const { _electron: electron } = require('playwright') const { test, _electron: electron } = require('@playwright/test')
const { test } = require('@playwright/test')
test('get isPackaged', async () => { test('get isPackaged', async () => {
const electronApp = await electron.launch({ args: ['main.js'] }) const electronApp = await electron.launch({ args: ['main.js'] })
@ -263,8 +248,7 @@ It can also create individual [Page][playwright-page] objects from Electron Brow
For example, to grab the first BrowserWindow and save a screenshot: For example, to grab the first BrowserWindow and save a screenshot:
```js {6-7} @ts-nocheck ```js {6-7} @ts-nocheck
const { _electron: electron } = require('playwright') const { test, _electron: electron } = require('@playwright/test')
const { test } = require('@playwright/test')
test('save screenshot', async () => { test('save screenshot', async () => {
const electronApp = await electron.launch({ args: ['main.js'] }) const electronApp = await electron.launch({ args: ['main.js'] })
@ -275,12 +259,11 @@ test('save screenshot', async () => {
}) })
``` ```
Putting all this together using the PlayWright Test runner, let's create a `example.spec.js` Putting all this together using the Playwright test-runner, let's create a `example.spec.js`
test file with a single test and assertion: test file with a single test and assertion:
```js title='example.spec.js' @ts-nocheck ```js title='example.spec.js' @ts-nocheck
const { _electron: electron } = require('playwright') const { test, expect, _electron: electron } = require('@playwright/test')
const { test, expect } = require('@playwright/test')
test('example test', async () => { test('example test', async () => {
const electronApp = await electron.launch({ args: ['.'] }) const electronApp = await electron.launch({ args: ['.'] })
@ -316,6 +299,7 @@ Running 1 test using 1 worker
:::info :::info
Playwright Test will automatically run any files matching the `.*(test|spec)\.(js|ts|mjs)` regex. Playwright Test will automatically run any files matching the `.*(test|spec)\.(js|ts|mjs)` regex.
You can customize this match in the [Playwright Test configuration options][playwright-test-config]. You can customize this match in the [Playwright Test configuration options][playwright-test-config].
It also works with TypeScript out of the box.
::: :::
:::tip Further reading :::tip Further reading
@ -473,10 +457,10 @@ test.after.always('cleanup', async t => {
[chrome-driver]: https://sites.google.com/chromium.org/driver/ [chrome-driver]: https://sites.google.com/chromium.org/driver/
[Puppeteer]: https://github.com/puppeteer/puppeteer [Puppeteer]: https://github.com/puppeteer/puppeteer
[playwright-intro]: https://playwright.dev/docs/intro
[playwright-electron]: https://playwright.dev/docs/api/class-electron/ [playwright-electron]: https://playwright.dev/docs/api/class-electron/
[playwright-electronapplication]: https://playwright.dev/docs/api/class-electronapplication [playwright-electronapplication]: https://playwright.dev/docs/api/class-electronapplication
[playwright-page]: https://playwright.dev/docs/api/class-page [playwright-page]: https://playwright.dev/docs/api/class-page
[playwright-releases]: https://github.com/microsoft/playwright/releases [playwright-releases]: https://playwright.dev/docs/release-notes
[playwright-test-config]: https://playwright.dev/docs/api/class-testconfig#test-config-test-match [playwright-test-config]: https://playwright.dev/docs/api/class-testconfig#test-config-test-match
[playwright-test-runners]: https://playwright.dev/docs/test-runners/
[Chrome DevTools Protocol]: https://chromedevtools.github.io/devtools-protocol/ [Chrome DevTools Protocol]: https://chromedevtools.github.io/devtools-protocol/