docs(examples): setup get started with examples guide #1441
Conversation
docs/examples/README.md
Outdated
|
|
||
| It is also possible to open **browser dev tools** during execution, to inspect the DOM tree or network activity. | ||
|
|
||
| <p align="center"><a href="https://user-images.githubusercontent.com/284612/77158031-c18e7e80-6a5f-11ea-8a71-4a4bea54f879.png"><img src="https://user-images.githubusercontent.com/284612/77158031-c18e7e80-6a5f-11ea-8a71-4a4bea54f879.png" width="500" alt="WebKit dev tools"></a></p> |
There was a problem hiding this comment.
I'd rather use Chromium DevTools in the example as WebKit doesn't support multiple clients yet and once the user opens Web Inspector it will take over control of the page and kick playwright out.
nit: if you want to stick with WebKit, let's change the hint to 'WebKit Web Inspector'
docs/examples/README.md
Outdated
|
|
||
| ### [Authentication](authentication.js) | ||
|
|
||
| This scripts 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. |
docs/examples/authentication.js
Outdated
| })(); | ||
|
|
||
| const verifyIsLoggedIn = async (page) => { | ||
| await page.waitForSelector('"Create repository"'); |
There was a problem hiding this comment.
nit: for the verification purposes I wouldn't want to wait for the selector but rather bail out immediately, so I'd either rename the function or change its implementation to not wait depending on the scenario.
There was a problem hiding this comment.
Thanks! I moved to use page.$ but perhaps there is a better solution.
const verifyIsLoggedIn = async (page) => {
// Find element through text value and assert it exists.
assert(await page.$('text="Create repository"'));
}
docs/examples/README.md
Outdated
| Once installed, you can `require` Playwright in your Node.js scripts. | ||
|
|
||
| ```js | ||
| const playwright = require('playwright'); |
There was a problem hiding this comment.
We recommend destructuring everywhere: const { chromium } = require('playwright');.
docs/examples/README.md
Outdated
|
|
||
| ## Setup dev environment | ||
|
|
||
| Playwright scripts can be developed just like any other Node.js script. 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. |
There was a problem hiding this comment.
Let's say 'for example' to not imply we only work with these two debuggers.
docs/examples/README.md
Outdated
| 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 | ||
| playwright.firefox.launch({ headless: false, slowMo: 50 }); |
There was a problem hiding this comment.
chromium.launch(...)- Let's use chromium everywhere for consistency, and mention at the top that all examples use Chromium, but can be similarly run with Firefox/WebKit?
|
|
||
| <!-- | ||
| Other examples | ||
| * Page navigation and wait for load |
There was a problem hiding this comment.
- Filling a form
- Uploading a file
- Handling a popup, e.g. clicking "I accept" to close it
Follow up PRs to add more examples, add a section explaining core concepts (like browser contexts), and maybe elaborate on the dev environment.
Would love to get your feedback.
Related to #660