Skip to content

Commit

Permalink
docs: allow lang-specific sh snippets
Browse files Browse the repository at this point in the history
  • Loading branch information
pavelfeldman committed Jan 15, 2021
1 parent de5d671 commit e1aac8e
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 35 deletions.
2 changes: 1 addition & 1 deletion docs/src/api/class-browsercontext.md
Expand Up @@ -124,7 +124,7 @@ the JavaScript environment, e.g. to seed `Math.random`.

An example of overriding `Math.random` before the page loads:

```js
```js browser
// preload.js
Math.random = () => 42;
```
Expand Down
2 changes: 1 addition & 1 deletion docs/src/api/class-page.md
Expand Up @@ -429,7 +429,7 @@ the JavaScript environment, e.g. to seed `Math.random`.

An example of overriding `Math.random` before the page loads:

```js
```js browser
// preload.js
Math.random = () => 42;
```
Expand Down
109 changes: 89 additions & 20 deletions docs/src/cli.md
Expand Up @@ -9,10 +9,14 @@ Playwright comes with the command line tools that run via `npx` or as a part of

## Usage

```sh
```sh js
$ npx playwright --help
```

```sh python
$ python -m playwright
```

Running from `package.json` script
```json
{
Expand All @@ -24,10 +28,14 @@ Running from `package.json` script

## Generate code

```sh
```sh js
$ npx playwright codegen wikipedia.org
```

```sh python
$ python -m playwright codegen wikipedia.org
```

Run `codegen` and perform actions in the browser. Playwright CLI will generate JavaScript code for the user interactions. `codegen` will attempt to generate resilient text-based selectors.

<img src="https://user-images.githubusercontent.com/284612/92536033-7e7ebe00-f1ed-11ea-9e1a-7cbd912e3391.gif"></img>
Expand All @@ -36,53 +44,89 @@ Run `codegen` and perform actions in the browser. Playwright CLI will generate J

Run `codegen` with `--save-storage` to save [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) at the end. This is useful to separately record authentication step and reuse it later.

```sh
```sh js
$ npx playwright --save-storage=auth.json codegen
# Perform authentication and exit.
# auth.json will contain the storage state.
```

```sh python
$ python -m playwright --save-storage=auth.json codegen
# Perform authentication and exit.
# auth.json will contain the storage state.
```

Run with `--load-storage` to consume previously loaded storage. This way, all [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) will be restored, bringing most web apps to the authenticated state.

```sh
```sh js
$ npx playwright --load-storage=auth.json open my.web.app
$ npx playwright --load-storage=auth.json codegen my.web.app
# Perform actions in authenticated state.
```

```sh python
$ python -m playwright --load-storage=auth.json open my.web.app
$ python -m playwright --load-storage=auth.json codegen my.web.app
# Perform actions in authenticated state.
```

## Open pages

With `open`, you can use Playwright bundled browsers to browse web pages. Playwright provides cross-platform WebKit builds that can be used to reproduce Safari rendering across Windows, Linux and macOS.

```sh
```sh js
# Open page in Chromium
npx playwright open example.com
$ npx playwright open example.com
```

```sh
```sh python
# Open page in Chromium
$ python -m playwright open example.com
```

```sh js
# Open page in WebKit
$ npx playwright wk example.com
```

```sh python
# Open page in WebKit
npx playwright wk example.com
$ python -m playwright wk example.com
```

### Emulate devices
`open` can emulate mobile and tablet devices ([see all devices](https://github.com/microsoft/playwright/blob/master/src/server/deviceDescriptors.ts)).

```sh
```sh js
# Emulate iPhone 11.
npx playwright --device="iPhone 11" open wikipedia.org
$ npx playwright --device="iPhone 11" open wikipedia.org
```

```sh python
# Emulate iPhone 11.
$ python -m playwright --device="iPhone 11" open wikipedia.org
```

### Emulate color scheme and viewport size
```sh
```sh js
# Emulate screen size and color scheme.
$ npx playwright --viewport-size=800,600 --color-scheme=dark open twitter.com
```
```sh python
# Emulate screen size and color scheme.
npx playwright --viewport-size=800,600 --color-scheme=dark open twitter.com
$ python -m playwright --viewport-size=800,600 --color-scheme=dark open twitter.com
```

### Emulate geolocation, language and timezone
```sh
```sh js
# Emulate timezone, language & location
# Once page opens, click the "my location" button to see geolocation in action
$ npx playwright --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" open maps.google.com
```
```sh python
# Emulate timezone, language & location
# Once page opens, click the "my location" button to see geolocation in action
npx playwright --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" open maps.google.com
$ python -m playwright --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" open maps.google.com
```

## Inspect selectors
Expand Down Expand Up @@ -130,34 +174,59 @@ Generates selector for the given element.

## Take screenshot

```sh
```sh js
# See command help
$ npx playwright screenshot --help
```

```sh
```sh python
# See command help
$ python -m playwright screenshot --help
```

```sh js
# Wait 3 seconds before capturing a screenshot after page loads ('load' event fires)
npx playwright \
$ npx playwright \
--device="iPhone 11" \
--color-scheme=dark \
screenshot \
--wait-for-timeout=3000 \
twitter.com twitter-iphone.png
```

```sh
```sh python
# Wait 3 seconds before capturing a screenshot after page loads ('load' event fires)
$ python -m playwright \
--device="iPhone 11" \
--color-scheme=dark \
screenshot \
--wait-for-timeout=3000 \
twitter.com twitter-iphone.png
```

```sh js
# Capture a full page screenshot
$ npx playwright screenshot --full-page en.wikipedia.org wiki-full.png
```

```sh python
# Capture a full page screenshot
npx playwright screenshot --full-page en.wikipedia.org wiki-full.png
$ python -m playwright screenshot --full-page en.wikipedia.org wiki-full.png
```

## Generate PDF

PDF generation only works in Headless Chromium.

```sh
```sh js
# See command help
$ npx playwright pdf https://en.wikipedia.org/wiki/PDF wiki.pdf
```

```sh python
# See command help
$ python -m playwright pdf https://en.wikipedia.org/wiki/PDF wiki.pdf
```

## Known limitations
Opening WebKit Web Inspector will disconnect Playwright from the browser. In such cases, code generation will stop.
22 changes: 20 additions & 2 deletions docs/src/debug.md
Expand Up @@ -85,7 +85,7 @@ chromium.launch(devtools=True)
Set the `PWDEBUG` environment variable to run your scripts in debug mode. This
configures the browser for debugging.

```sh
```sh js
# Linux/macOS
$ PWDEBUG=1 npm run test

Expand All @@ -94,6 +94,15 @@ $ set PWDEBUG=1
$ npm run test
```

```sh python
# Linux/macOS
$ PWDEBUG=1 pytest -s

# Windows
$ set PWDEBUG=1
$ pytest -s
```

### Defaults

With PWDEBUG, the following defaults are configured for you:
Expand Down Expand Up @@ -132,11 +141,20 @@ This improves the debugging experience for JavaScript executions in the page con

Playwright supports verbose logging with the `DEBUG` environment variable.

```sh
```sh js
# Linux/macOS
$ DEBUG=pw:api npm run test

# Windows
$ set DEBUG=pw:api
$ npm run test
```

```sh python
# Linux/macOS
$ DEBUG=pw:api pytest -s

# Windows
$ set DEBUG=pw:api
$ pytest -s
```
6 changes: 3 additions & 3 deletions docs/src/intro-python.md
Expand Up @@ -10,8 +10,8 @@ title: "Getting Started"
Use pip to install Playwright in your Python project. See [system requirements](#system-requirements).

```sh
pip install playwright
python -m playwright install
$ pip install playwright
$ python -m playwright install
```

These commands download the Playwright package and install browser binaries for Chromium, Firefox and WebKit. To modify this behavior see [installation parameters](./installation.md).
Expand Down Expand Up @@ -74,7 +74,7 @@ firefox.launch(headless=False, slowMo=50)
Command Line Interface [CLI](./cli.md) can be used to record user interactions and generate Python code.

```sh
python -m playwright codegen wikipedia.org
$ python -m playwright codegen wikipedia.org
```

## System requirements
Expand Down
4 changes: 2 additions & 2 deletions docs/src/intro.md
Expand Up @@ -10,7 +10,7 @@ title: "Getting Started"
Use npm or Yarn to install Playwright in your Node.js project. See [system requirements](#system-requirements).

```sh
npm i -D playwright
$ npm i -D playwright
```

This single command downloads the Playwright NPM package and browser binaries for Chromium, Firefox and WebKit. To modify this behavior see [installation parameters](./installation.md).
Expand Down Expand Up @@ -65,7 +65,7 @@ firefox.launch({ headless: false, slowMo: 50 });
Command Line Interface [CLI](./cli.md) can be used to record user interactions and generate JavaScript code.

```sh
npx playwright codegen wikipedia.org
$ npx playwright codegen wikipedia.org
```

## TypeScript support
Expand Down
12 changes: 6 additions & 6 deletions docs/src/test-runners-python.md
Expand Up @@ -11,7 +11,7 @@ in Python.
## Usage

```sh
pip install pytest-playwright
$ pip install pytest-playwright
```

Use the `page` fixture to write a basic test. See [more examples](#examples).
Expand All @@ -27,16 +27,16 @@ To run your tests, use pytest CLI.

```sh
# Run tests (Chromium and headless by default)
pytest
$ pytest

# Run tests in headful mode
pytest --headful
$ pytest --headful

# Run tests in a different browser (chromium, firefox, webkit)
pytest --browser firefox
$ pytest --browser firefox

# Run tests in multiple browsers
pytest --browser chromium --browser webkit
$ pytest --browser chromium --browser webkit
```

If you want to add the CLI arguments automatically without specifying them, you can use the [pytest.ini](https://docs.pytest.org/en/stable/reference.html#ini-options-ref) file:
Expand Down Expand Up @@ -114,7 +114,7 @@ def test_visit_example(page):
Start Pytest with the `base-url` argument.

```sh
pytest --base-url http://localhost:8080
$ pytest --base-url http://localhost:8080
```

```py
Expand Down

0 comments on commit e1aac8e

Please sign in to comment.