docs: adds introduction.md (#1905)

* docs: adds introduction.md * elaborate on async/await pattern
microsoft · Apr 21, 2020 · 88366f3 · 88366f3
1 parent 0f338ec
commit 88366f3
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ This installs Playwright along with its dependencies and the browser binaries. B
 
 Once installed, Playwright can be used to create a browser instance, open pages and then automate interactions.
 
-* [Get started with examples](docs/examples/README.md)
+* [Documentation](docs/README.md)
 * [API reference](docs/api.md)
 
 ### Examples
@@ -122,10 +122,6 @@ const { webkit } = require('playwright');
 })();
 ```
 
-## Contributing
-
-Check out our [contributing guide](https://github.com/microsoft/playwright/blob/master/CONTRIBUTING.md).
-
 ## FAQ
 
 ### Q: Can I use a single API to automate different browsers?
@@ -178,9 +174,13 @@ Playwright is ready for your feedback. It respects [semver](https://semver.org/)
 
 Playwright is being actively developed as we get to the feature parity across Chromium, Firefox and WebKit. Progress on each browser can be tracked on the [Is Playwright Ready?](https://aslushnikov.github.io/isplaywrightready/) page, which shows currently failing tests per browser.
 
+## Contributing
+
+Check out our [contributing guide](https://github.com/microsoft/playwright/blob/master/CONTRIBUTING.md).
+
 ## Resources
 
-* [Get started with examples](docs/examples/README.md)
-* [API documentation](docs/api.md)
-* [Getting started on CI](docs/ci.md)
+* [Documentation](docs/README.md)
+* [Example recipes](docs/examples/README.md)
+* [API reference](docs/api.md)
 * [Community showcase](docs/showcase.md)
diff --git a/docs/README.md b/docs/README.md
@@ -1,5 +1,6 @@
 ### Table of contents
 
+1. [Introduction](./intro.md)
 1. [Core concepts](./core-concepts.md)
     - [Browser](./core-concepts.md#browser)
     - [Browser contexts](./core-concepts.md#browser-contexts)

diff --git a/docs/examples/README.md b/docs/examples/README.md
@@ -1,79 +1,4 @@
-# Get started with examples
-
-Learn how to install Playwright, set up your dev environment, and read through example recipes. Use the [API reference](../api.md) for more exhaustive documentation.
-
-## Installing Playwright
-
-Playwright is a Node.js library and can be acquired through the npm registry. Use npm or yarn to install Playwright in your Node.js project.
-
-```
-npm i playwright
-```
-
-Once installed, you can `require` Playwright in your Node.js scripts, and launch any of the 3 browsers (`chromium`, `firefox` and `webkit`).
-
-```js
-const { chromium } = require('playwright');
-
-(async () => {
-  const browser = await chromium.launch();
-  await browser.close();
-})();
-```
-
-## Setup dev environment
-
-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.
-
-#### Running browsers for debugging
-
-<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>
-
-By default, Playwright runs the browsers in headless mode. To see the browser UI, pass the `headless: false` flag while launching the browser. You can also use `slowMo` to slow down execution.
-
-```js
-chromium.launch({ headless: false, slowMo: 50 });
-```
-
-It is also possible to open **browser developer tools** during execution, to inspect the DOM tree or network activity. This is possible in Chromium, Firefox and WebKit.
-
-
-## Core concepts
-
-* A [`Browser`](../api.md#class-browser) refers to an instance of Chromium, Firefox or WebKit browsers.
-* A [`BrowserContext`](../api.md#class-browsercontext) is an isolated incognito session within a browser instance. Browser contexts are fast to create and can be used to parallelize isolated test executions.
-* A [`Page`](../api.md#class-page) refers to a single tab within a browser context, which includes one or more [`Frame`](../api.md#class-frame) objects.
-
-#### Working with elements
-
-* Selector engines: Playwright can query elements on a web page through [multiple selector engines](../selectors.md) like CSS, HTML attributes, XPath and text contents.
-* Actions on elements: Use methods like [`page.click`](../api.md#pageclickselector-options) or [`page.fill`](../api.md#pagefillselector-value-options) to execute actions on elements.
-  * **Auto-wait** for elements: These actions auto-wait for the element to be ready. If these actions result in page navigations, they are also awaited automatically.
-
-  ```js
-  // Wait for element to be ready, click it and wait for navigations (if any)
-  await page.click('text="Login"');
-  ```
-
-* Use the [`page.waitForSelector`](../api.md#pagewaitforselectorselector-options) method to explicitly wait for elements.
-
-  ```js
-  // Explicitly wait for the #search field to be present in the DOM
-  const search = await page.waitForSelector('#search');
-  // Retrieve the query value from the element
-  const query = await search.evaluate(element => element.value);
-  ```
-
-* Assertions on elements: Use [`page.$`](../api.md#pageselector) to get the element from the page and [`page.$eval`](../api.md#pageevalselector-pagefunction-arg-1) to run a JS function in the execution context of the page.
-  * These can be used to assert element properties, like visibility or text contents.
-  * These methods behave similar to the `$` operator in DevTools console or jQuery. They fetch the element from the page without waiting. If required, use `page.waitForSelector` and `evaluate` instead, as described above.
-
-  ```js
-  // Get value of the #search field
-  const query = await page.$eval('#search', element => element.value);
-  ```
-
-## Example recipes
+# Example recipes
 
 ### [Authentication](authentication.js)
 

diff --git a/docs/intro.md b/docs/intro.md
@@ -0,0 +1,84 @@
+# Introduction
+
+## What is Playwright?
+
+Playwright is a cross-browser automation driver for end-to-end testing. Playwright provides an API to launch web browsers, navigate to web pages and manipulate page contents in JavaScript.
+
+The Playwright API is cross-browser: it works across **Chromium** (used in Chrome, Edge, and many other browsers), **Firefox** and **WebKit** (used in Safari) engines.
+
+Playwright is free and open source. Playwright is also modular, and work with any JavaScript test runner framework.
+
+### Capabilities
+
+Playwright can run automation scenarios that span multiple tabs, domains and iframes. More specifically, Playwright can:
+
+* Auto-wait for elements to be ready before executing actions (like click, fill)
+* Intercept network activity for stubbing and mocking network requests
+* Emulate mobile devices, geolocation, permissions
+* Native input events for mouse and keyboard
+* Upload and download files
+
+## Getting started
+
+### Installation
+
+Use npm or Yarn to install Playwright in your Node.js project. Playwright requires Node.js 10 or higher.
+
+```
+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 through [environment variables](api.md#environment-variables).
+
+### Usage
+
+Once installed, you can `require` Playwright in a Node.js script, and launch any of the 3 browsers (`chromium`, `firefox` and `webkit`).
+
+```js
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch();
+  // Create pages, interact with UI elements, assert values
+  await browser.close();
+})();
+```
+
+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.
+
+```js
+(async () => { // Start of async arrow function
+  // Function code
+  // ...
+})(); // End of the function and () to invoke itself
+```
+
+### Writing your first script
+
+In our first script, we will navigate to `whatsmyuseragent.org` and take a screenshot in WebKit.
+
+```js
+const { webkit } = require('playwright');
+
+(async () => {
+  const browser = await webkit.launch();
+  const page = await browser.newPage();
+  await page.goto('http://whatsmyuseragent.org/');
+  await page.screenshot({ path: `example.png` });
+  await browser.close();
+})();
+```
+
+By default, Playwright runs the browsers in headless mode. To see the browser UI, pass the `headless: false` flag while launching the browser. You can also use `slowMo` to slow down execution.
+
+```js
+firefox.launch({ headless: false, slowMo: 50 });
+```
+
+### Debugging scripts
+
+<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>
+
+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.
+
+It is also possible to open **browser developer tools** during execution, to inspect the DOM tree or network activity.