feat(fullPage): implement full page screenshot, improve README

README.md

@@ -1,14 +1,29 @@
-# playwright-cli
+# 🎭 Playwright CLI
 
-## Install
+[![npm version](https://img.shields.io/npm/v/playwright-cli.svg?style=flat)](https://www.npmjs.com/package/playwright) [![Join Slack](https://img.shields.io/badge/join-slack-infomational)](https://join.slack.com/t/playwright/shared_invite/enQtOTEyMTUxMzgxMjIwLThjMDUxZmIyNTRiMTJjNjIyMzdmZDA3MTQxZWUwZTFjZjQwNGYxZGM5MzRmNzZlMWI5ZWUyOTkzMjE5Njg1NDg)
 
-```
-$ npm install --save-dev playwright-cli
-```
+## [Usage](#usage) | [Examples](#examples)
+
+Playwright CLI is a CLI wrapper around the [Playwright](https://github.com/playwright) library.
+
+Playwright CLI is built to enable shell access to popular Playwright commands such as capturing screenshots, saving as PDF. But it is also useful if you want to see what your web page would look like in WebKit (Safari) while being on Window or Linux.
 
 ## Usage
 
-```bash
+
+Install CLI as follows:
+
+```
+$ npm install --D playwright-cli
+```
+
+Print Playwright CLI help
+
+```
+$ npx playwright-cli --help
+```
+
+```
 Usage: playwright-cli [options] [command]
 
 Options:
@@ -35,3 +50,83 @@ Commands:
   pdf [options] <url> <filename>         save page as pdf
   help [command]                         display help for command
 ```
+
+## Examples
+
+### Open page
+
+```sh
+# Open page in Chromium
+npx playwright-cli open example.com
+```
+
+```sh
+# Open page in WebKit
+npx playwright-cli wk example.com
+```
+
+```sh
+# Emulate screen size and color scheme.
+npx playwright-cli \
+  --viewport-size=800,600 \
+  --color-scheme=dark \
+  wk twitter.com/explore
+```
+
+```sh
+# Emulate timezone, language & location, color scheme.
+# Once page opens, click the "my location" button to see geolocation in action
+npx playwright-cli \
+  --timezone="Europe/Rome" \
+  --geolocation="41.890221,12.492348" \
+  --lang="it-IT" \
+  --color-scheme=dark \
+  open maps.google.com
+```
+
+```sh
+# Emulate iPhone 11.
+npx playwright-cli \
+  --device="iPhone 11" \
+  wk wikipedia.org
+```
+
+### Screenshot
+
+```sh
+# See command help
+$ npx playwright-cli screenshot --help
+```
+
+```sh
+# Wait 3 seconds before capturing a screenshot after page loads ('load' event fires)
+npx playwright-cli \
+  --device="iPhone 11" \
+  --color-scheme=dark \
+  screenshot \
+    --wait-for-timeout=3000 \
+    twitter.com/explore twitter-iphone.png
+```
+
+```sh
+# Capture a full page screenshot
+npx playwright-cli screenshot --full-page en.wikipedia.org wiki-full.png
+```
+
+### PDF
+
+> Note that PDF generation only works on Headless Chromium.
+
+```sh
+# See command help
+$ npx playwright-cli pdf https://en.wikipedia.org/wiki/PDF wiki.pdf
+```
+
+### Generate Playwright code
+
+```sh
+# Run the generator
+$ npx playwright-cli codegen wikipedia.org
+```
+
+  <img width="600px" src="https://user-images.githubusercontent.com/883973/92158503-dd54c980-ede0-11ea-95f0-0d8550818871.png">

src/cli.ts

@@ -86,6 +86,7 @@ program
     .description('capture a page screenshot')
     .option('--wait-for-selector <selector>', 'wait for selector before taking a screenshot')
     .option('--wait-for-timeout <timeout>', 'wait for timeout in milliseconds before taking a screenshot')
+    .option('--full-page', 'Whether to take a full page screenshot (entire scrollable area)')
     .action(function(url, filename, command) {
       screenshot(command.parent, command, url, filename);
     }).on('--help', function() {
@@ -112,21 +113,22 @@ program
 program.parse(process.argv);
 
 type Options = {
-  browser: string,
-  colorScheme: string | undefined,
-  device: string | undefined,
-  geolocation: string,
-  lang: string,
-  proxyServer: string,
-  timeout: string | undefined,
-  timezone: string,
-  viewportSize: string | undefined,
-  userAgent: string | undefined,
+  browser: string;
+  colorScheme: string | undefined;
+  device: string | undefined;
+  geolocation: string;
+  lang: string;
+  proxyServer: string;
+  timeout: string | undefined;
+  timezone: string;
+  viewportSize: string | undefined;
+  userAgent: string | undefined;
 };
 
 type CaptureOptions = {
-  waitForSelector: string | undefined,
-  waitForTimeout: string | undefined
+  waitForSelector: string | undefined;
+  waitForTimeout: string | undefined;
+  fullPage: boolean;
 };
 
 async function launchContext(options: Options, headless: boolean): Promise<{ browser: Browser, browserName: string, launchOptions: playwright.LaunchOptions, contextOptions: playwright.BrowserContextOptions, context: BrowserContext }> {
@@ -249,7 +251,7 @@ async function screenshot(options: Options, captureOptions: CaptureOptions, url:
   const page = await openPage(context, url);
   await waitForPage(page, captureOptions);
   console.log('Capturing screenshot into ' + path);
-  await page.screenshot({ path })
+  await page.screenshot({ path, fullPage: !!captureOptions.fullPage });
   await browser.close();
 }