From cb6c85b36b9b8f80e0910a7761836cdc6e0dfc82 Mon Sep 17 00:00:00 2001 From: Arjun Attam Date: Mon, 23 Mar 2020 10:09:51 -0700 Subject: [PATCH] docs(examples): update main readme to point to examples + add a file uploads example --- README.md | 7 ++++--- docs/examples/README.md | 23 +++++++++++------------ docs/examples/upload.js | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+), 15 deletions(-) create mode 100644 docs/examples/upload.js diff --git a/README.md b/README.md index 17a1c1c3929ad..8579373a17e9a 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ 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 @@ -24,9 +24,10 @@ 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 diff --git a/docs/examples/README.md b/docs/examples/README.md index f7819e7cd1c5f..051a6cff30308 100644 --- a/docs/examples/README.md +++ b/docs/examples/README.md @@ -37,28 +37,27 @@ It is also possible to open **browser developer tools** during execution, to ins

Chromium Developer Tools

+## 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. - +This script uploads a file to an `input` element that accepts file uploads. \ No newline at end of file diff --git a/docs/examples/upload.js b/docs/examples/upload.js new file mode 100644 index 0000000000000..d0346cd207e93 --- /dev/null +++ b/docs/examples/upload.js @@ -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(); +})();