Skip to content

Commit

Permalink
docs(examples): update main readme to point to examples + add a file …
Browse files Browse the repository at this point in the history
…uploads example
  • Loading branch information
arjunattam committed Mar 23, 2020
1 parent 9826fd6 commit cb6c85b
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 15 deletions.
7 changes: 4 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,18 @@ Playwright is a Node library to automate the [Chromium](https://www.chromium.org

Our primary goal with Playwright is to improve automated UI testing by eliminating flakiness, improving the speed of execution and offering insights into the browser operation.

### Installation
### Usage

```
npm i playwright
```

This installs Playwright along with its dependencies and the browser binaries. Browser binaries are about 50-100MB each, so expect the installation network traffic to be substantial.

### Usage
Once installed, Playwright can be used to create a browser instance, open pages and then automate interactions.

Playwright can be used to create a browser instance, open pages, and then manipulate them. See [API docs](https://github.com/microsoft/playwright/blob/master/docs/api.md) for a comprehensive list.
* [Get started with examples](docs/examples/README.md)
* [API reference](docs/api.md)

### Examples

Expand Down
23 changes: 11 additions & 12 deletions docs/examples/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,28 +37,27 @@ It is also possible to open **browser developer tools** during execution, to ins

<p align="center"><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="500" alt="Chromium Developer Tools"></a></p>

## 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.

## Example recipes

### [Authentication](authentication.js)

This script logs in on github.com through Chromium, and then reuses the login cookies state in WebKit. This recipe can be used to speed up tests by logging in once and reusing login state.

<!--
## Core concepts
### [File uploads](upload.js)

* Browser
* Browser contexts
* Pages and frames
* Evaluate in page context
-->
This script uploads a file to an `input` element that accepts file uploads.

<!--
Other examples
* Page navigation and wait for load
* Request interception
* Request interception/server response stub/mock
* Geolocation and mobile emulation
* Uploading a file
* Handling a popup, eg, accept dialog
* Async page load (see #662)
* Page navigation and wait for load
* Async page load (see #662)
-->
34 changes: 34 additions & 0 deletions docs/examples/upload.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const { firefox } = require("playwright");

/**
* In this script, we will upload a file to a web page.
*
* Steps summary
* 1. Open the sample file upload at https://cgi-lib.berkeley.edu/ex/fup.html
* 2. Automate file upload with setInputFiles
*/

(async () => {
// Launch a headless browser instance of chromium, webkit or firefox
const browser = await firefox.launch();

// Use the default browser context to create a new tab and navigate to URL
const page = await browser.newPage();
await page.goto('https://cgi-lib.berkeley.edu/ex/fup.html');

// Get an element handle to the file upload input
const handle = await page.$('input[type="file"]');

// Use the setInputFiles API to upload this file. File paths are relative to
// the current working directory. It is also possible to upload multiple files
// or use base64 encoded data, instead of a file. See API docs.
// https://github.com/microsoft/playwright/blob/master/docs/api.md#elementhandlesetinputfilesfiles
await handle.setInputFiles('upload.js');

// Click on the form submit element
await page.click('input[type="submit"]');

// Take a screenshot of the uploaded state and close the browser
await page.screenshot({ path: 'uploaded.png' });
await browser.close();
})();

0 comments on commit cb6c85b

Please sign in to comment.