From 777689a96aa9507e637cc4b9b3f904e27a95d8da Mon Sep 17 00:00:00 2001
From: Arjun Attam <arjunattam@gmail.com>
Date: Wed, 9 Sep 2020 17:32:49 -0700
Subject: [PATCH] docs(intro): add cli to getting started (#3821)

* docs(intro): add cli to getting started

* fix doclint
---
 docs/README.md |  3 +-
 docs/intro.md  | 79 +++++++++++++++++++++++++-------------------------
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 9a84c84592..f16427141f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -19,8 +19,7 @@ Playwright is a library to automate [Chromium](https://www.chromium.org/Home), [
 
 1. Introduction
     - [Why Playwright?](./why-playwright.md)
-    - [Getting started](./intro.md)
-    - [First script](./intro.md#first-script)
+    - [Get started](./intro.md)
     - [Core concepts](./core-concepts.md)
     - [Debugging](./debug.md)
 1. Guides
diff --git a/docs/intro.md b/docs/intro.md
index d949b0f078..51fbe8c70c 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -1,26 +1,23 @@
 # Getting Started
 
-<!-- GEN:toc -->
+<!-- GEN:toc-top-level -->
 - [Installation](#installation)
 - [Usage](#usage)
 - [First script](#first-script)
+- [Record scripts](#record-scripts)
+- [TypeScript support](#typescript-support)
 - [System requirements](#system-requirements)
-- [TypeScript IDE support](#typescript-ide-support)
 <!-- GEN:stop -->
 
-<br>
-
 ## 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. See [system requirements](#system-requirements).
 
 ```sh
 npm i -D 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 parameters](installation.md) for mode details.
-
-<br>
+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).
 
 ## Usage
 
@@ -36,7 +33,7 @@ const { chromium } = require('playwright');
 })();
 ```
 
-Playwright APIs are asynchronous and return Promise objects. Our code examples use [the async/await pattern](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) to simplify comprehension. The code is wrapped in an unnamed async arrow function which is invoking itself.
+Playwright APIs are asynchronous and return Promise objects. Our code examples use [the async/await pattern](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) to ease readability. The code is wrapped in an unnamed async arrow function which is invoking itself.
 
 ```js
 (async () => { // Start of async arrow function
@@ -45,8 +42,6 @@ Playwright APIs are asynchronous and return Promise objects. Our code examples u
 })(); // End of the function and () to invoke itself
 ```
 
-<br>
-
 ## First script
 
 In our first script, we will navigate to `whatsmyuseragent.org` and take a screenshot in WebKit.
@@ -69,11 +64,43 @@ By default, Playwright runs the browsers in headless mode. To see the browser UI
 firefox.launch({ headless: false, slowMo: 50 });
 ```
 
-<br>
+## Record scripts
+
+[Playwright CLI](https://www.npmjs.com/package/playwright-cli) can be used to record user interactions and generate JavaScript code.
+
+```
+npx playwright-cli codegen wikipedia.org
+```
+
+## TypeScript support
+
+Playwright includes built-in support for TypeScript. Type definitions will be imported automatically. It is recommended to use type-checking to improve the IDE experience.
+
+### In JavaScript
+Add the following to the top of your JavaScript file to get type-checking in VS Code or WebStorm.
+
+```js
+//@ts-check
+// ...
+```
+
+Alternatively, you can use JSDoc to set types for variables.
+
+```js
+/** @type {import('playwright').Page} */
+let page;
+```
+
+### In TypeScript
+TypeScript support will work out-of-the-box. Types can also be imported explicitly.
+
+```ts
+let page: import('playwright').Page;
+```
 
 ## System requirements
 
-Playwright requires Node.js version 10.15 or above. The browser binaries for Chromium,
+Playwright requires Node.js version 10.17 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).
@@ -83,29 +110,3 @@ Firefox and WebKit work across the 3 platforms (Windows, macOS, Linux):
   * Firefox requires Ubuntu 18.04+
   * For Ubuntu 18.04, the additional dependencies are defined in [our Docker image](docker/Dockerfile.bionic),
     which is based on Ubuntu.
-
-<br>
-
-## TypeScript IDE support
-
-Playwright comes with built-in support for TypeScript. Playwright type definitions will be imported automatically.
-
-It is also possible to add these types to your variables manually. In TypeScript:
-
-```ts
-let page: import('playwright').Page;
-```
-
-If you use JavaScript, you can still use TypeScript definitions for improved auto-completions and warnings in Visual Studio Code or WebStorm. Add the following to the top of your JavaScript file:
-
-```js
-//@ts-check
-// ...
-```
-
-You can also use JSDoc to set types for variables.
-
-```js
-/** @type {import('playwright').Page} */
-let page;
-```