Skip to content

Commit

Permalink
feat(roll): roll to ToT Playwright (08-07-22) (microsoft#637)
Browse files Browse the repository at this point in the history
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
playwrightmachine and github-actions[bot] authored Jul 8, 2022
1 parent cef564c commit d85a8ef
Show file tree
Hide file tree
Showing 10 changed files with 105 additions and 21 deletions.
2 changes: 1 addition & 1 deletion dotnet/docs/inspector.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ If actionability can't be reached, it'll show action as pending:

<img width="712" alt="Pending action" src="https://user-images.githubusercontent.com/883973/108614840-e6e3e500-73b2-11eb-998f-0cf31b2aa9a2.png"></img>

You can step over each action using the "Step over" action or resume script without further pauses:
You can step over each action using the "Step over" action (keyboard shortcut: `F10`) or resume script without further pauses (`F8`):

<center><img width="98" alt="Stepping toolbar" src="https://user-images.githubusercontent.com/883973/108614389-f9f4b600-73ae-11eb-8df2-8d9ce9da5d5c.png"></img></center>

Expand Down
2 changes: 1 addition & 1 deletion java/docs/inspector.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ If actionability can't be reached, it'll show action as pending:

<img width="712" alt="Pending action" src="https://user-images.githubusercontent.com/883973/108614840-e6e3e500-73b2-11eb-998f-0cf31b2aa9a2.png"></img>

You can step over each action using the "Step over" action or resume script without further pauses:
You can step over each action using the "Step over" action (keyboard shortcut: `F10`) or resume script without further pauses (`F8`):

<center><img width="98" alt="Stepping toolbar" src="https://user-images.githubusercontent.com/883973/108614389-f9f4b600-73ae-11eb-8df2-8d9ce9da5d5c.png"></img></center>

Expand Down
77 changes: 73 additions & 4 deletions nodejs/docs/api/class-testconfig.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -949,7 +949,7 @@ module.exports = config;

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.10</font>

- type: &#60;[Object]&#62;
- type: &#60;[Object]|[Array]<[Object]>&#62;
- `command` &#60;[string]&#62; Shell command to start. For example `npm run start`..
- `port?` &#60;[number]&#62; The port that your http server is expected to appear on. It does wait until it accepts connections. Exactly one of `port` or `url` is required.
- `url?` &#60;[string]&#62; The url on your http server that is expected to return a 2xx, 3xx, 400, 401, 402, or 403 status code when the server is ready to accept connections. Exactly one of `port` or `url` is required.
Expand All @@ -959,13 +959,13 @@ module.exports = config;
- `cwd?` &#60;[string]&#62; Current working directory of the spawned process, defaults to the directory of the configuration file.
- `env?` &#60;[Object]<[string], [string]>&#62; Environment variables to set for the command, `process.env` by default.

Launch a development web server during the tests.
Launch a development web server (or multiple) during the tests.

If the port is specified, the server will wait for it to be available on `127.0.0.1` or `::1`, before running the tests. If the url is specified, the server will wait for the URL to return a 2xx status code before running the tests.
If the port is specified, Playwright Test will wait for it to be available on `127.0.0.1` or `::1`, before running the tests. If the url is specified, Playwright Test will wait for the URL to return a 2xx, 3xx, 400, 401, 402, or 403 status code before running the tests.

For continuous integration, you may want to use the `reuseExistingServer: !process.env.CI` option which does not use an existing server on the CI. To see the stdout, you can set the `DEBUG=pw:webserver` environment variable.

The `port` (but not the `url`) gets passed over to Playwright as a [testOptions.baseURL](./api/class-testoptions.mdx#test-options-base-url). For example port `8080` produces `baseURL` equal `http://localhost:8080`.
The `port` (but not the `url`) gets passed over to Playwright as a [testOptions.baseURL](./api/class-testoptions.mdx#test-options-base-url). For example port `8080` produces `baseURL` equal `http://localhost:8080`. If `webServer` is specified as an array, you must explicitly configure the `baseURL` (even if it only has one entry).

:::note
It is also recommended to specify [testOptions.baseURL](./api/class-testoptions.mdx#test-options-base-url) in the config, so that tests could use relative urls.
Expand Down Expand Up @@ -1060,6 +1060,75 @@ test('test', async ({ page }) => {
</TabItem>
</Tabs>

Multiple web servers (or background processes) can be launched:

<Tabs
groupId="js-flavor"
defaultValue="ts"
values={[
{label: 'TypeScript', value: 'ts'},
{label: 'JavaScript', value: 'js'}
]
}>
<TabItem value="ts">

```js
// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
webServer: [
{
command: 'npm run start',
port: 3000,
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
},
{
command: 'npm run backend',
port: 3333,
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
}
],
use: {
baseURL: 'http://localhost:3000/',
},
};
export default config;
```

</TabItem>
<TabItem value="js">

```js
// playwright.config.js
// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
webServer: [
{
command: 'npm run start',
port: 3000,
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
},
{
command: 'npm run backend',
port: 3333,
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
}
],
use: {
baseURL: 'http://localhost:3000/',
},
};
module.exports = config;
```

</TabItem>
</Tabs>

## testConfig.workers {#test-config-workers}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.10</font>
Expand Down
3 changes: 3 additions & 0 deletions nodejs/docs/chrome-extensions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ const { chromium } = require('playwright');
})();
```

## Testing

To have the extension loaded when running tests you can use a test fixture to set the context. You can also dynamically retrieve the extension id and use it that to load and test the popup page for example.

[Accessibility]: ./api/class-accessibility.mdx "Accessibility"
[Android]: ./api/class-android.mdx "Android"
Expand Down
2 changes: 1 addition & 1 deletion nodejs/docs/inspector.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ If actionability can't be reached, it'll show action as pending:

<img width="712" alt="Pending action" src="https://user-images.githubusercontent.com/883973/108614840-e6e3e500-73b2-11eb-998f-0cf31b2aa9a2.png"></img>

You can step over each action using the "Step over" action or resume script without further pauses:
You can step over each action using the "Step over" action (keyboard shortcut: `F10`) or resume script without further pauses (`F8`):

<center><img width="98" alt="Stepping toolbar" src="https://user-images.githubusercontent.com/883973/108614389-f9f4b600-73ae-11eb-8df2-8d9ce9da5d5c.png"></img></center>

Expand Down
24 changes: 15 additions & 9 deletions nodejs/docs/release-notes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ import TabItem from '@theme/TabItem';

## Version 1.23

<div className="embed-youtube">

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/NRGOV46P3kU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

### Network Replay

Now you can record network traffic into a HAR file and re-use this traffic in your tests.
Expand Down Expand Up @@ -137,7 +143,7 @@ WebServer is now considered "ready" if request to the specified port has any of

<div className="embed-youtube">

<iframe width="560" height="315" src="https://www.youtube.com/embed/keV2CIgtBlg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/keV2CIgtBlg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Expand Down Expand Up @@ -203,7 +209,7 @@ WebServer is now considered "ready" if request to the specified port has any of

<div className="embed-youtube">

<iframe width="560" height="315" src="https://www.youtube.com/embed/45HZdbmgEw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/45HZdbmgEw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Expand Down Expand Up @@ -248,7 +254,7 @@ This version was also tested against the following stable channels:

<div className="embed-youtube">

<iframe width="560" height="315" src="https://www.youtube.com/embed/6vV-XXKsrbA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6vV-XXKsrbA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Expand Down Expand Up @@ -314,7 +320,7 @@ This version was also tested against the following stable channels:

<div className="embed-youtube">

<iframe width="560" height="315" src="https://www.youtube.com/embed/z0EOFvlf14U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/z0EOFvlf14U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Expand Down Expand Up @@ -396,7 +402,7 @@ This version was also tested against the following stable channels:
<div className="embed-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ABLYpw2BN_g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ABLYpw2BN_g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Expand Down Expand Up @@ -497,7 +503,7 @@ This version was also tested against the following stable channels:
<div className="embed-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7iyIdeoAP04" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/7iyIdeoAP04" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Expand Down Expand Up @@ -557,7 +563,7 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright.
<div className="embed-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/OQKwFDmY64g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/OQKwFDmY64g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Expand Down Expand Up @@ -684,7 +690,7 @@ This version of Playwright was also tested against the following stable channels
<div className="embed-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6RwzsDeEj7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6RwzsDeEj7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Expand Down Expand Up @@ -744,7 +750,7 @@ By using `npx playwright test --debug` it will enable the [Playwright Inspector]
<div className="embed-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LczBDR0gOhk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LczBDR0gOhk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Expand Down
2 changes: 2 additions & 0 deletions nodejs/docs/test-advanced.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,8 @@ test('test', async ({ page }) => {
</TabItem>
</Tabs>

Multiple web servers (or background processes) can be launched simultaneously by providing an array of `webServer` configurations. See [testConfig.webServer](./api/class-testconfig.mdx#test-config-web-server) for additional examples and documentation.

## Global setup and teardown

To set something up once before running all tests, use `globalSetup` option in the [configuration file](#configuration-object). Global setup file must export a single function that takes a config object. This function will be run once before all the tests.
Expand Down
8 changes: 4 additions & 4 deletions nodejs/docs/test-auth.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ class AdminPage {
this.page = page;
}

async create(browser: Browser) {
static async create(browser: Browser) {
const context = await browser.newContext({ storageState: 'adminStorageState.json' });
const page = await context.newPage();
return new AdminPage(page);
Expand All @@ -589,7 +589,7 @@ class UserPage {
this.greeting = page.locator('#greeting');
}

async create(browser: Browser) {
static async create(browser: Browser) {
const context = await browser.newContext({ storageState: 'userStorageState.json' });
const page = await context.newPage();
return new UserPage(page);
Expand Down Expand Up @@ -641,7 +641,7 @@ class AdminPage {
this.page = page;
}

async create(browser) {
static async create(browser) {
const context = await browser.newContext({ storageState: 'adminStorageState.json' });
const page = await context.newPage();
return new AdminPage(page);
Expand All @@ -658,7 +658,7 @@ class UserPage {
this.greeting = page.locator('#greeting');
}

async create(browser) {
static async create(browser) {
const context = await browser.newContext({ storageState: 'userStorageState.json' });
const page = await context.newPage();
return new UserPage(page);
Expand Down
4 changes: 4 additions & 0 deletions python/docs/chrome-extensions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,10 @@ asyncio.run(main())
</TabItem>
</Tabs>

## Testing

To have the extension loaded when running tests you can use a test fixture to set the context. You can also dynamically retrieve the extension id and use it that to load and test the popup page for example.

[Accessibility]: ./api/class-accessibility.mdx "Accessibility"
[APIRequest]: ./api/class-apirequest.mdx "APIRequest"
[APIRequestContext]: ./api/class-apirequestcontext.mdx "APIRequestContext"
Expand Down
2 changes: 1 addition & 1 deletion python/docs/inspector.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ If actionability can't be reached, it'll show action as pending:

<img width="712" alt="Pending action" src="https://user-images.githubusercontent.com/883973/108614840-e6e3e500-73b2-11eb-998f-0cf31b2aa9a2.png"></img>

You can step over each action using the "Step over" action or resume script without further pauses:
You can step over each action using the "Step over" action (keyboard shortcut: `F10`) or resume script without further pauses (`F8`):

<center><img width="98" alt="Stepping toolbar" src="https://user-images.githubusercontent.com/883973/108614389-f9f4b600-73ae-11eb-8df2-8d9ce9da5d5c.png"></img></center>

Expand Down

0 comments on commit d85a8ef

Please sign in to comment.