Skip to content

Commit 2510edc

Browse files
authored
docs(ci): update docs for caching and troubleshooting (#2176)
1 parent c5b0baa commit 2510edc

File tree

10 files changed

+162
-140
lines changed

10 files changed

+162
-140
lines changed

docs/ci.md

Lines changed: 123 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,24 @@
33
Playwright tests can be executed to run on your CI environments. To simplify this, we have created sample configurations for common CI providers that can be used to bootstrap your setup.
44

55
<!-- GEN:toc -->
6-
- [GitHub Actions](#github-actions)
7-
- [Docker](#docker)
8-
- [Azure Pipelines](#azure-pipelines)
9-
- [Travis CI](#travis-ci)
10-
- [CircleCI](#circleci)
11-
- [AppVeyor](#appveyor)
6+
- [CI configurations](#ci-configurations)
7+
* [GitHub Actions](#github-actions)
8+
* [Docker](#docker)
9+
- [Tips](#tips)
10+
* [Azure Pipelines](#azure-pipelines)
11+
* [Travis CI](#travis-ci)
12+
- [Tips](#tips-1)
13+
* [CircleCI](#circleci)
14+
* [AppVeyor](#appveyor)
15+
- [Debugging browser launches](#debugging-browser-launches)
16+
- [Caching browsers](#caching-browsers)
1217
<!-- GEN:stop -->
1318

1419
Broadly, configuration on CI involves **ensuring system dependencies** are in place, **installing Playwright and browsers** (typically with `npm install`), and **running tests** (typically with `npm test`). Windows and macOS build agents do not require any additional system dependencies. Linux build agents can require additional dependencies, depending on the Linux distribution.
1520

16-
## GitHub Actions
21+
## CI configurations
22+
23+
### GitHub Actions
1724

1825
The [Playwright GitHub Action](https://github.com/microsoft/playwright-github-action) can be used to run Playwright tests on GitHub Actions.
1926

@@ -26,24 +33,126 @@ steps:
2633
2734
We run [our tests](/.github/workflows/tests.yml) on GitHub Actions, across a matrix of 3 platforms (Windows, Linux, macOS) and 3 browsers (Chromium, Firefox, WebKit).
2835
29-
## Docker
36+
### Docker
3037
3138
We have a [pre-built Docker image](docker/README.md) which can either be used directly, or as a reference to update your existing Docker definitions.
3239
33-
## Azure Pipelines
40+
#### Tips
41+
1. By default, Docker runs a container with a `/dev/shm` shared memory space 64MB.
42+
This is [typically too small](https://github.com/c0b/chrome-in-docker/issues/1) for Chromium
43+
and will cause Chromium to crash when rendering large pages. To fix, run the container with
44+
`docker run --shm-size=1gb` to increase the size of `/dev/shm`. Since Chromium 65, this is no
45+
longer necessary. Instead, launch the browser with the `--disable-dev-shm-usage` flag:
46+
47+
```js
48+
const browser = await playwright.chromium.launch({
49+
args: ['--disable-dev-shm-usage']
50+
});
51+
```
52+
53+
This will write shared memory files into `/tmp` instead of `/dev/shm`. See
54+
[crbug.com/736452](https://bugs.chromium.org/p/chromium/issues/detail?id=736452) for more details.
55+
1. Using `--ipc=host` is also recommended when using Chromium—without it Chromium can run out of memory
56+
and crash. Learn more about this option in [Docker docs](https://docs.docker.com/engine/reference/run/#ipc-settings---ipc).
57+
1. Seeing other weird errors when launching Chromium? Try running your container
58+
with `docker run --cap-add=SYS_ADMIN` when developing locally. Since the Dockerfile
59+
adds a `pwuser` user as a non-privileged user, it may not have all the necessary privileges.
60+
1. [dumb-init](https://github.com/Yelp/dumb-init) is worth checking out if you're
61+
experiencing a lot of zombies Chromium processes sticking around. There's special
62+
treatment for processes with PID=1, which makes it hard to terminate Chromium
63+
properly in some cases (e.g. in Docker).
64+
65+
### Azure Pipelines
3466

3567
For Windows or macOS agents, no additional configuration required, just install Playwright and run your tests.
3668

3769
For Linux agents, refer to [our Docker setup](docker/README.md) to see additional dependencies that need to be installed.
3870

39-
## Travis CI
71+
### Travis CI
4072

4173
We run our tests on Travis CI over a Linux agent (Ubuntu 18.04). Use our [Travis configuration](/.travis.yml) to see list of additional dependencies to be installed.
4274

43-
## CircleCI
75+
#### Tips
76+
- [User namespace cloning](http://man7.org/linux/man-pages/man7/user_namespaces.7.html) should be enabled to support proper sandboxing
77+
- [xvfb](https://en.wikipedia.org/wiki/Xvfb) should be launched in order to run Chromium in non-headless mode (e.g. to test Chrome Extensions)
78+
79+
To sum up, your `.travis.yml` might look like this:
80+
81+
```yml
82+
language: node_js
83+
dist: bionic
84+
addons:
85+
apt:
86+
packages:
87+
# These are required to run webkit
88+
- libwoff1
89+
- libopus0
90+
- libwebp6
91+
- libwebpdemux2
92+
- libenchant1c2a
93+
- libgudev-1.0-0
94+
- libsecret-1-0
95+
- libhyphen0
96+
- libgdk-pixbuf2.0-0
97+
- libegl1
98+
- libgles2
99+
- libevent-2.1-6
100+
- libnotify4
101+
- libxslt1.1
102+
- libvpx5
103+
# This is required to run chromium
104+
- libgbm1
105+
106+
# allow headful tests
107+
before_install:
108+
# Enable user namespace cloning
109+
- "sysctl kernel.unprivileged_userns_clone=1"
110+
# Launch XVFB
111+
- "export DISPLAY=:99.0"
112+
- "sh -e /etc/init.d/xvfb start"
113+
```
114+
115+
### CircleCI
116+
117+
We run our tests on CircleCI, with our [pre-built Docker image](docker/README.md). Use our [CircleCI configuration](/.circleci/config.yml) to create your own. Running Playwright smoothly on CircleCI requires the following steps:
118+
119+
1. Use the pre-built [Docker image](docker/README.md) in your config like so:
120+
121+
```yaml
122+
docker:
123+
- image: aslushnikov/playwright:bionic
124+
environment:
125+
NODE_ENV: development # Needed if playwright is in `devDependencies`
126+
```
127+
128+
1. If you’re using Playwright through Jest, then you may encounter an error spawning child processes:
129+
130+
```
131+
[00:00.0] jest args: --e2e --spec --max-workers=36
132+
Error: spawn ENOMEM
133+
at ChildProcess.spawn (internal/child_process.js:394:11)
134+
```
135+
136+
This is likely caused by Jest autodetecting the number of processes on the entire machine (`36`) rather than the number allowed to your container (`2`). To fix this, set `jest --maxWorkers=2` in your test command.
137+
138+
### AppVeyor
139+
140+
We run our tests on Windows agents in AppVeyor. Use our [AppVeyor configuration](/.appveyor.yml) to create your own.
141+
142+
## Debugging browser launches
143+
144+
Playwright supports the `DEBUG` environment variable to output debug logs during execution. Setting it to `pw:browser*` is helpful while debugging `Error: Failed to launch browser` errors.
145+
146+
```
147+
DEBUG=pw:browser* npm run test
148+
```
149+
150+
## Caching browsers
44151

45-
We run our tests on CircleCI, with our [pre-built Docker image](docker/README.md). Use our [CircleCI configuration](/.circleci/config.yml) to create your own.
152+
By default, Playwright installs browser binaries in the following directories. This behavior can be [customized with environment variables](installation.md).
46153

47-
## AppVeyor
154+
- `%USERPROFILE%\AppData\Local\ms-playwright` on Windows
155+
- `~/Library/Caches/ms-playwright` on MacOS
156+
- `~/.cache/ms-playwright` on Linux
48157

49-
We run our tests on Windows agents in AppVeyor. Use our [AppVeyor configuration](/.appveyor.yml) to create your own.
158+
These locations are not covered by typical CI configurations, which cache the project `node_modules` or the [npm-cache directory](https://docs.npmjs.com/cli-commands/cache.html). To cache the browser binaries between CI runs, cache this location in your CI configuration, against a hash of the Playwright version.

docs/core-concepts.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ Along with a test runner Playwright can be used to automate user interactions to
88
validate and test web applications. The Playwright API enables this through
99
the following primitives.
1010

11-
#### Contents
12-
- [Browser](#browser)
13-
- [Browser contexts](#browser-contexts)
14-
- [Pages and frames](#pages-and-frames)
15-
- [Selectors](#selectors)
16-
- [Auto-waiting](#auto-waiting)
17-
- [Node.js and browser execution contexts](#nodejs-and-browser-execution-contexts)
18-
- [Object & element handles](#object--element-handles)
11+
<!-- GEN:toc-top-level -->
12+
- [Browser](#browser)
13+
- [Browser contexts](#browser-contexts)
14+
- [Pages and frames](#pages-and-frames)
15+
- [Selectors](#selectors)
16+
- [Auto-waiting](#auto-waiting)
17+
- [Node.js and browser execution contexts](#nodejs-and-browser-execution-contexts)
18+
- [Object & element handles](#object--element-handles)
19+
<!-- GEN:stop -->
1920

2021
<br/>
2122

docs/emulation.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ Playwright allows overriding various parameters of the device where the browser
99

1010
Most of these parameters are configured during the browser context construction, but some of them such as viewport size can be changed for individual pages.
1111

12-
#### Contents
12+
<!-- GEN:toc-top-level -->
1313
- [User agent](#user-agent)
1414
- [Viewport, color scheme](#viewport-color-scheme)
1515
- [Devices](#devices)
16-
- [Locale & Timezone](#locale--timezone)
16+
- [Locale & timezone](#locale--timezone)
1717
- [Permissions](#permissions)
1818
- [Geolocation](#geolocation)
19+
<!-- GEN:stop -->
1920

2021
<br/>
2122

docs/extensibility.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Extensibility
22

3-
#### Contents
4-
3+
<!-- GEN:toc-top-level -->
54
- [Custom selector engines](#custom-selector-engines)
5+
<!-- GEN:stop -->
66

77
## Custom selector engines
88

docs/input.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Input
22

3-
#### Contents
3+
<!-- GEN:toc-top-level -->
44
- [Text input](#text-input)
55
- [Checkboxes](#checkboxes)
66
- [Select options](#select-options)
@@ -9,6 +9,7 @@
99
- [Keys and shortcuts](#keys-and-shortcuts)
1010
- [Upload files](#upload-files)
1111
- [Focus element](#focus-element)
12+
<!-- GEN:stop -->
1213

1314
<br/>
1415

docs/loading.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
Playwright logically splits the process of showing a new document in the page into **navigation** and **loading**.
44

5+
<!-- GEN:toc-top-level -->
6+
- [Navigation](#navigation)
7+
- [Loading](#loading)
8+
- [Common scenarios](#common-scenarios)
9+
- [Loading a popup](#loading-a-popup)
10+
<!-- GEN:stop -->
11+
512
## Navigation
613

714
Page navigation can be either initiated by the Playwright call:

docs/network.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ Playwright provides APIs to **monitor** and **modify** network traffic, both HTT
44
Any requests that page does, including [XHRs](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) and
55
[fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) requests, can be tracked, modified and handled.
66

7-
#### Contents
8-
- [HTTP Authentication](#http-authentication)
9-
- [Handle file downloads](#handle-file-downloads)
10-
- [Network events](#network-events)
11-
- [Handle requests](#handle-requests)
12-
- [Modify requests](#modify-requests)
13-
- [Abort requests](#abort-requests)
7+
<!-- GEN:toc-top-level -->
8+
- [HTTP Authentication](#http-authentication)
9+
- [Handle file downloads](#handle-file-downloads)
10+
- [Network events](#network-events)
11+
- [Handle requests](#handle-requests)
12+
- [Modify requests](#modify-requests)
13+
- [Abort requests](#abort-requests)
14+
<!-- GEN:stop -->
1415

1516
<br/>
1617

docs/selectors.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ Playwright supports multiple selector engines used to query elements in the web
44

55
Selector can be used to obtain `ElementHandle` (see [page.$()](api.md#pageselector) for example) or shortcut element operations to avoid intermediate handle (see [page.click()](api.md#pageclickselector-options) for example).
66

7+
<!-- GEN:toc-top-level -->
8+
- [Selector syntax](#selector-syntax)
9+
- [Examples](#examples)
10+
- [Built-in selector engines](#built-in-selector-engines)
11+
<!-- GEN:stop -->
12+
713
## Selector syntax
814

915
Selector is a string that consists of one or more clauses separated by `>>` token, e.g. `clause1 >> clause2 >> clause3`. When multiple clauses are present, next one is queried relative to the previous one's result.

0 commit comments

Comments
 (0)