docs: allow lang-specific sh snippets (#5024)

This commit is contained in:
Pavel Feldman 2021-01-14 18:19:02 -08:00 committed by GitHub
parent de5d671d83
commit 7701176b0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 124 additions and 37 deletions

View file

@ -124,7 +124,7 @@ the JavaScript environment, e.g. to seed `Math.random`.
An example of overriding `Math.random` before the page loads: An example of overriding `Math.random` before the page loads:
```js ```js browser
// preload.js // preload.js
Math.random = () => 42; Math.random = () => 42;
``` ```

View file

@ -429,7 +429,7 @@ the JavaScript environment, e.g. to seed `Math.random`.
An example of overriding `Math.random` before the page loads: An example of overriding `Math.random` before the page loads:
```js ```js browser
// preload.js // preload.js
Math.random = () => 42; Math.random = () => 42;
``` ```

View file

@ -9,10 +9,14 @@ Playwright comes with the command line tools that run via `npx` or as a part of
## Usage ## Usage
```sh ```sh js
$ npx playwright --help $ npx playwright --help
``` ```
```sh python
$ python -m playwright
```
Running from `package.json` script Running from `package.json` script
```json ```json
{ {
@ -24,10 +28,14 @@ Running from `package.json` script
## Generate code ## Generate code
```sh ```sh js
$ npx playwright codegen wikipedia.org $ 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. 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> <img src="https://user-images.githubusercontent.com/284612/92536033-7e7ebe00-f1ed-11ea-9e1a-7cbd912e3391.gif"></img>
@ -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. 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 $ npx playwright --save-storage=auth.json codegen
# Perform authentication and exit. # Perform authentication and exit.
# auth.json will contain the storage state. # 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. 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 open my.web.app
$ npx playwright --load-storage=auth.json codegen my.web.app $ npx playwright --load-storage=auth.json codegen my.web.app
# Perform actions in authenticated state. # 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 ## 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. 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 # 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 # Open page in WebKit
npx playwright wk example.com $ npx playwright wk example.com
```
```sh python
# Open page in WebKit
$ python -m playwright wk example.com
``` ```
### Emulate devices ### Emulate devices
`open` can emulate mobile and tablet devices ([see all devices](https://github.com/microsoft/playwright/blob/master/src/server/deviceDescriptors.ts)). `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. # 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 ### Emulate color scheme and viewport size
```sh ```sh js
# Emulate screen size and color scheme. # Emulate screen size and color scheme.
npx playwright --viewport-size=800,600 --color-scheme=dark open twitter.com $ npx playwright --viewport-size=800,600 --color-scheme=dark open twitter.com
```
```sh python
# Emulate screen size and color scheme.
$ python -m playwright --viewport-size=800,600 --color-scheme=dark open twitter.com
``` ```
### Emulate geolocation, language and timezone ### Emulate geolocation, language and timezone
```sh ```sh js
# Emulate timezone, language & location # Emulate timezone, language & location
# Once page opens, click the "my location" button to see geolocation in action # 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 $ 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
$ python -m playwright --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" open maps.google.com
``` ```
## Inspect selectors ## Inspect selectors
@ -130,14 +174,19 @@ Generates selector for the given element.
## Take screenshot ## Take screenshot
```sh ```sh js
# See command help # See command help
$ npx playwright screenshot --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) # Wait 3 seconds before capturing a screenshot after page loads ('load' event fires)
npx playwright \ $ npx playwright \
--device="iPhone 11" \ --device="iPhone 11" \
--color-scheme=dark \ --color-scheme=dark \
screenshot \ screenshot \
@ -145,19 +194,39 @@ npx playwright \
twitter.com twitter-iphone.png 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 # Capture a full page screenshot
npx playwright screenshot --full-page en.wikipedia.org wiki-full.png $ npx playwright screenshot --full-page en.wikipedia.org wiki-full.png
```
```sh python
# Capture a full page screenshot
$ python -m playwright screenshot --full-page en.wikipedia.org wiki-full.png
``` ```
## Generate PDF ## Generate PDF
PDF generation only works in Headless Chromium. PDF generation only works in Headless Chromium.
```sh ```sh js
# See command help # See command help
$ npx playwright pdf https://en.wikipedia.org/wiki/PDF wiki.pdf $ 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 ## Known limitations
Opening WebKit Web Inspector will disconnect Playwright from the browser. In such cases, code generation will stop. Opening WebKit Web Inspector will disconnect Playwright from the browser. In such cases, code generation will stop.

View file

@ -85,7 +85,7 @@ chromium.launch(devtools=True)
Set the `PWDEBUG` environment variable to run your scripts in debug mode. This Set the `PWDEBUG` environment variable to run your scripts in debug mode. This
configures the browser for debugging. configures the browser for debugging.
```sh ```sh js
# Linux/macOS # Linux/macOS
$ PWDEBUG=1 npm run test $ PWDEBUG=1 npm run test
@ -94,6 +94,15 @@ $ set PWDEBUG=1
$ npm run test $ npm run test
``` ```
```sh python
# Linux/macOS
$ PWDEBUG=1 pytest -s
# Windows
$ set PWDEBUG=1
$ pytest -s
```
### Defaults ### Defaults
With PWDEBUG, the following defaults are configured for you: With PWDEBUG, the following defaults are configured for you:
@ -132,7 +141,7 @@ This improves the debugging experience for JavaScript executions in the page con
Playwright supports verbose logging with the `DEBUG` environment variable. Playwright supports verbose logging with the `DEBUG` environment variable.
```sh ```sh js
# Linux/macOS # Linux/macOS
$ DEBUG=pw:api npm run test $ DEBUG=pw:api npm run test
@ -140,3 +149,12 @@ $ DEBUG=pw:api npm run test
$ set DEBUG=pw:api $ set DEBUG=pw:api
$ npm run test $ npm run test
``` ```
```sh python
# Linux/macOS
$ DEBUG=pw:api pytest -s
# Windows
$ set DEBUG=pw:api
$ pytest -s
```

View file

@ -10,8 +10,8 @@ title: "Getting Started"
Use pip to install Playwright in your Python project. See [system requirements](#system-requirements). Use pip to install Playwright in your Python project. See [system requirements](#system-requirements).
```sh ```sh
pip install playwright $ pip install playwright
python -m playwright install $ 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). These commands download the Playwright package and install browser binaries for Chromium, Firefox and WebKit. To modify this behavior see [installation parameters](./installation.md).
@ -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. Command Line Interface [CLI](./cli.md) can be used to record user interactions and generate Python code.
```sh ```sh
python -m playwright codegen wikipedia.org $ python -m playwright codegen wikipedia.org
``` ```
## System requirements ## System requirements

View file

@ -10,7 +10,7 @@ title: "Getting Started"
Use npm or Yarn to install Playwright in your Node.js project. See [system requirements](#system-requirements). Use npm or Yarn to install Playwright in your Node.js project. See [system requirements](#system-requirements).
```sh ```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). 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).
@ -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. Command Line Interface [CLI](./cli.md) can be used to record user interactions and generate JavaScript code.
```sh ```sh
npx playwright codegen wikipedia.org $ npx playwright codegen wikipedia.org
``` ```
## TypeScript support ## TypeScript support

View file

@ -11,7 +11,7 @@ in Python.
## Usage ## Usage
```sh ```sh
pip install pytest-playwright $ pip install pytest-playwright
``` ```
Use the `page` fixture to write a basic test. See [more examples](#examples). Use the `page` fixture to write a basic test. See [more examples](#examples).
@ -27,16 +27,16 @@ To run your tests, use pytest CLI.
```sh ```sh
# Run tests (Chromium and headless by default) # Run tests (Chromium and headless by default)
pytest $ pytest
# Run tests in headful mode # Run tests in headful mode
pytest --headful $ pytest --headful
# Run tests in a different browser (chromium, firefox, webkit) # Run tests in a different browser (chromium, firefox, webkit)
pytest --browser firefox $ pytest --browser firefox
# Run tests in multiple browsers # 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: 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:
@ -114,7 +114,7 @@ def test_visit_example(page):
Start Pytest with the `base-url` argument. Start Pytest with the `base-url` argument.
```sh ```sh
pytest --base-url http://localhost:8080 $ pytest --base-url http://localhost:8080
``` ```
```py ```py

4
types/types.d.ts vendored
View file

@ -1227,7 +1227,7 @@ export interface Page {
* *
* An example of overriding `Math.random` before the page loads: * An example of overriding `Math.random` before the page loads:
* *
* ```js * ```js browser
* // preload.js * // preload.js
* Math.random = () => 42; * Math.random = () => 42;
* ``` * ```
@ -4790,7 +4790,7 @@ export interface BrowserContext {
* *
* An example of overriding `Math.random` before the page loads: * An example of overriding `Math.random` before the page loads:
* *
* ```js * ```js browser
* // preload.js * // preload.js
* Math.random = () => 42; * Math.random = () => 42;
* ``` * ```