mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
170 lines
7.2 KiB
Markdown
170 lines
7.2 KiB
Markdown
---
|
|
id: intro
|
|
title: "Getting Started"
|
|
---
|
|
|
|
- [Installation](#installation)
|
|
- [Usage](#usage)
|
|
- [First script](#first-script)
|
|
- [Record scripts](#record-scripts)
|
|
- [TypeScript support](#typescript-support)
|
|
- [System requirements](#system-requirements)
|
|
|
|
## Installation
|
|
|
|
Use npm or Yarn to install Playwright in your Node.js project. See [system requirements](#system-requirements).
|
|
|
|
```sh
|
|
npm i -D playwright
|
|
```
|
|
|
|
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
|
|
|
|
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 ease readability. 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
|
|
```
|
|
|
|
## 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 });
|
|
```
|
|
|
|
## Record scripts
|
|
|
|
[Playwright CLI](./cli.md) can be used to record user interactions and generate JavaScript code.
|
|
|
|
```sh
|
|
npx playwright 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.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).
|
|
* **macOS**: Requires 10.14 or above.
|
|
* **Linux**: Depending on your Linux distribution, you might need to install additional dependencies to run the browsers.
|
|
* Firefox requires Ubuntu 18.04+
|
|
* For Ubuntu 18.04, the additional dependencies are defined in [our Docker image](https://github.com/microsoft/playwright/blob/master/utils/docker/Dockerfile.bionic), which is based on Ubuntu.
|
|
|
|
[Playwright]: api/class-playwright.md "Playwright"
|
|
[Browser]: api/class-browser.md "Browser"
|
|
[BrowserContext]: api/class-browsercontext.md "BrowserContext"
|
|
[Page]: api/class-page.md "Page"
|
|
[Frame]: api/class-frame.md "Frame"
|
|
[ElementHandle]: api/class-elementhandle.md "ElementHandle"
|
|
[JSHandle]: api/class-jshandle.md "JSHandle"
|
|
[ConsoleMessage]: api/class-consolemessage.md "ConsoleMessage"
|
|
[Dialog]: api/class-dialog.md "Dialog"
|
|
[Download]: api/class-download.md "Download"
|
|
[Video]: api/class-video.md "Video"
|
|
[FileChooser]: api/class-filechooser.md "FileChooser"
|
|
[Keyboard]: api/class-keyboard.md "Keyboard"
|
|
[Mouse]: api/class-mouse.md "Mouse"
|
|
[Touchscreen]: api/class-touchscreen.md "Touchscreen"
|
|
[Request]: api/class-request.md "Request"
|
|
[Response]: api/class-response.md "Response"
|
|
[Selectors]: api/class-selectors.md "Selectors"
|
|
[Route]: api/class-route.md "Route"
|
|
[WebSocket]: api/class-websocket.md "WebSocket"
|
|
[TimeoutError]: api/class-timeouterror.md "TimeoutError"
|
|
[Accessibility]: api/class-accessibility.md "Accessibility"
|
|
[Worker]: api/class-worker.md "Worker"
|
|
[BrowserServer]: api/class-browserserver.md "BrowserServer"
|
|
[BrowserType]: api/class-browsertype.md "BrowserType"
|
|
[Logger]: api/class-logger.md "Logger"
|
|
[ChromiumBrowser]: api/class-chromiumbrowser.md "ChromiumBrowser"
|
|
[ChromiumBrowserContext]: api/class-chromiumbrowsercontext.md "ChromiumBrowserContext"
|
|
[ChromiumCoverage]: api/class-chromiumcoverage.md "ChromiumCoverage"
|
|
[CDPSession]: api/class-cdpsession.md "CDPSession"
|
|
[FirefoxBrowser]: api/class-firefoxbrowser.md "FirefoxBrowser"
|
|
[WebKitBrowser]: api/class-webkitbrowser.md "WebKitBrowser"
|
|
[Array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array"
|
|
[Buffer]: https://nodejs.org/api/buffer.html#buffer_class_buffer "Buffer"
|
|
[ChildProcess]: https://nodejs.org/api/child_process.html "ChildProcess"
|
|
[Element]: https://developer.mozilla.org/en-US/docs/Web/API/element "Element"
|
|
[Error]: https://nodejs.org/api/errors.html#errors_class_error "Error"
|
|
[Evaluation Argument]: ./core-concepts.md#evaluationargument "Evaluation Argument"
|
|
[Map]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map "Map"
|
|
[Object]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object"
|
|
[Promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise"
|
|
[RegExp]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp "RegExp"
|
|
[Serializable]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable"
|
|
[UIEvent.detail]: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail "UIEvent.detail"
|
|
[URL]: https://nodejs.org/api/url.html "URL"
|
|
[USKeyboardLayout]: ../src/usKeyboardLayout.ts "USKeyboardLayout"
|
|
[UnixTime]: https://en.wikipedia.org/wiki/Unix_time "Unix Time"
|
|
[boolean]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean"
|
|
[function]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function"
|
|
[iterator]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols "Iterator"
|
|
[null]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null "null"
|
|
[number]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number"
|
|
[origin]: https://developer.mozilla.org/en-US/docs/Glossary/Origin "Origin"
|
|
[selector]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors "selector"
|
|
[Readable]: https://nodejs.org/api/stream.html#stream_class_stream_readable "Readable"
|
|
[string]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "string"
|
|
[xpath]: https://developer.mozilla.org/en-US/docs/Web/XPath "xpath"
|