docs: better intro toc

This commit is contained in:
Pavel Feldman 2020-05-03 14:22:07 -07:00
parent 5bc62a0e25
commit bb13a329f0
3 changed files with 36 additions and 27 deletions

View File

@ -3,8 +3,12 @@
### Table of contents ### Table of contents
1. [Getting Started](./intro.md) 1. [Getting Started](./intro.md)
- [Introduction](./intro.md#) - [Installation](./intro.md#installation)
- [Installation](./installation.md) - [Usage](./intro.md#usage)
- [First script](./intro.md#first-script)
- [System requirements](./intro.md#system-requirements)
- [Debugging scripts](./intro.md#debugging-scripts)
- [Installation parameters](./installation.md)
1. [Core Concepts](./core-concepts.md) 1. [Core Concepts](./core-concepts.md)
- [Overview](./core-concepts.md#) - [Overview](./core-concepts.md#)
- [Browser](./core-concepts.md#browser) - [Browser](./core-concepts.md#browser)

View File

@ -1,7 +1,6 @@
# Installation # Advanced installation
<!-- GEN:toc --> <!-- GEN:toc -->
- [System requirements](#system-requirements)
- [Managing browser binaries](#managing-browser-binaries) - [Managing browser binaries](#managing-browser-binaries)
- [Download from artifact repository](#download-from-artifact-repository) - [Download from artifact repository](#download-from-artifact-repository)
- [Skip browser downloads](#skip-browser-downloads) - [Skip browser downloads](#skip-browser-downloads)
@ -10,20 +9,6 @@
<br> <br>
## System requirements
Playwright requires Node.js version 10.15 or above. The browser binaries for Chromium,
Firefox and WebKit work across the 3 platforms (Windows, macOS, Linux):
* **Windows**: Works with Windows and Windows Subsystem for Linux (WSL).
* **macOS**: Requires 10.14 or above.
* **Linux**: Depending on your Linux distribution, you might need to install additional
dependencies to run the browsers.
* For Ubuntu 18.04, the additional dependencies are defined in [our Docker image](docker/Dockerfile.bionic),
which is based on Ubuntu.
<br>
## Managing browser binaries ## Managing browser binaries
Each version of Playwright needs specific versions of browser binaries to operate. By default Playwright downloads Chromium, WebKit and Firefox browsers into the OS-specific cache folders: Each version of Playwright needs specific versions of browser binaries to operate. By default Playwright downloads Chromium, WebKit and Firefox browsers into the OS-specific cache folders:

View File

@ -3,11 +3,13 @@
<!-- GEN:toc --> <!-- GEN:toc -->
- [Installation](#installation) - [Installation](#installation)
- [Usage](#usage) - [Usage](#usage)
- [Writing your first script](#writing-your-first-script) - [First script](#first-script)
- [System requirements](#system-requirements)
- [Debugging scripts](#debugging-scripts) - [Debugging scripts](#debugging-scripts)
- [Continuous Integration](#continuous-integration)
<!-- GEN:stop --> <!-- GEN:stop -->
<br>
## Installation ## Installation
Use npm or Yarn to install Playwright in your Node.js project. Playwright requires Node.js 10 or higher. Use npm or Yarn to install Playwright in your Node.js project. Playwright requires Node.js 10 or higher.
@ -16,7 +18,9 @@ Use npm or Yarn to install Playwright in your Node.js project. Playwright requir
npm i playwright npm i playwright
``` ```
During installation, Playwright downloads browser binaries for Chromium, Firefox and WebKit. This sets up your environment for browser automation with just one command. It is possible to modify this default behavior for monorepos and other scenarios. See [installation](installation.md). During installation, Playwright downloads browser binaries for Chromium, Firefox and WebKit. This sets up your environment for browser automation with just one command. It is possible to modify this default behavior for monorepos and other scenarios. See [installation parameters](installation.md) for mode details.
<br>
## Usage ## Usage
@ -41,7 +45,9 @@ Playwright APIs are asynchronous and return Promise objects. Our code examples u
})(); // End of the function and () to invoke itself })(); // End of the function and () to invoke itself
``` ```
## Writing your first script <br>
## First script
In our first script, we will navigate to `whatsmyuseragent.org` and take a screenshot in WebKit. In our first script, we will navigate to `whatsmyuseragent.org` and take a screenshot in WebKit.
@ -63,14 +69,28 @@ By default, Playwright runs the browsers in headless mode. To see the browser UI
firefox.launch({ headless: false, slowMo: 50 }); firefox.launch({ headless: false, slowMo: 50 });
``` ```
## Debugging scripts <br>
<a href="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png"><img src="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png" width="300" alt="Chromium Developer Tools" align="right"></a> ## System requirements
Playwright requires Node.js version 10.15 or above. The browser binaries for Chromium,
Firefox and WebKit work across the 3 platforms (Windows, macOS, Linux):
* **Windows**: Works with Windows and Windows Subsystem for Linux (WSL).
* **macOS**: Requires 10.14 or above.
* **Linux**: Depending on your Linux distribution, you might need to install additional
dependencies to run the browsers.
* For Ubuntu 18.04, the additional dependencies are defined in [our Docker image](docker/Dockerfile.bionic),
which is based on Ubuntu.
<br>
## Debugging scripts
Playwright scripts can be developed just like any other Node.js script. For example, you can use the [Node.js debugger](https://nodejs.org/api/debugger.html) or [VS Code debugging](https://code.visualstudio.com/docs/nodejs/nodejs-debugging) to set breakpoints and get fine grained control over execution. Playwright scripts can be developed just like any other Node.js script. For example, you can use the [Node.js debugger](https://nodejs.org/api/debugger.html) or [VS Code debugging](https://code.visualstudio.com/docs/nodejs/nodejs-debugging) to set breakpoints and get fine grained control over execution.
<a href="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png"><img src="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png" width="300" alt="Chromium Developer Tools"></a>
It is also possible to open **browser developer tools** during execution, to inspect the DOM tree or network activity. It is also possible to open **browser developer tools** during execution, to inspect the DOM tree or network activity.
## Continuous Integration <br>
Playwright tests can be executed on Continuous Integration (CI) environments. Learn about the Playwright GitHub Action and sample Docker configuration in [the Continuous Integration section](ci.md).