feat(roll): roll to ToT Playwright (03-08-22) (microsoft#708)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
sand4rt · Aug 3, 2022 · c09d340 · c09d340
1 parent 25f790a
commit c09d340
Show file tree

Hide file tree

Showing 14 changed files with 559 additions and 151 deletions.
diff --git a/dotnet/docs/codegen.mdx b/dotnet/docs/codegen.mdx
@@ -13,24 +13,72 @@ pwsh bin\Debug\netX\playwright.ps1 codegen playwright.dev
 
 Run `codegen` and perform actions in the browser. Playwright will generate the code for the user interactions. `codegen` will attempt to generate resilient text-based selectors.
 
-<img width="1183" alt="Screenshot 2022-07-30 at 00 19 06" src="https://user-images.githubusercontent.com/13063165/181852815-971c10da-0b55-4e54-8a73-77e1e825193c.png" />
+<img width="1183" alt="Codegen generating code for tests for playwright.dev website" src="https://user-images.githubusercontent.com/13063165/181852815-971c10da-0b55-4e54-8a73-77e1e825193c.png" />
+
+## Emulate viewport size
+
+Playwright opens a browser window with it's viewport set to a specific width and height and is not responsive as tests need to be run under the same conditions. Use the `--viewport` option to generate tests with a different viewport size.
+
+```bash
+pwsh bin\Debug\netX\playwright.ps1 codegen --viewport-size=800,600 playwright.dev
+```
+
+<img width="1409" alt="Codegen generating code for tests for playwright.dev website with a specific viewport" src="https://user-images.githubusercontent.com/13063165/182360039-6db79ad6-fe82-4fd6-900a-b5e25f7f720f.png" />
+
+## Emulate devices
+
+Record scripts and tests while emulating a mobile device using the `--device` option which sets the viewport size and user agent among others.
+
+```bash
+pwsh bin\Debug\netX\playwright.ps1 codegen --device="iPhone 11" playwright.dev
+```
+
+<img width="1239" alt="Codegen generating code for tests for playwright.dev website emulated for iPhone 11" src="https://user-images.githubusercontent.com/13063165/182360089-9dc6d33d-480e-4bb2-86a3-fec51c1c228e.png" />
+
+## Emulate color scheme
+
+Record scripts and tests while emulating the color scheme with the `--color-scheme` option.
+
+```bash
+pwsh bin\Debug\netX\playwright.ps1 codegen --color-scheme=dark playwright.dev
+```
+
+<img width="1258" alt="Codegen generating code for tests for playwright.dev website in dark mode" src="https://user-images.githubusercontent.com/13063165/182359371-0bb4a7a2-abbb-4f73-8550-d67e0101f0ad.png" />
+
+## Emulate geolocation, language and timezone
+
+Record scripts and tests while emulating timezone, language & location using the `--timezone`, `--geolocation` and `--lang` options. Once page opens, click the "show your location" icon at them bottom right corner of the map to see geolocation in action.
+
+```bash
+pwsh bin\Debug\netX\playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
+```
+
+<img width="1276" alt="Codegen generating code for tests for google maps showing timezone, geoloation as Rome, Italy and in Italian language" src="https://user-images.githubusercontent.com/13063165/182394434-73e1c2a8-767e-411a-94e4-0912c1c50ecc.png" />
 
 ## Preserve authenticated state
 
-Run `codegen` with `--save-storage` to save [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) at the end of the session. This is useful to separately record authentication step and reuse it later in the tests.
+Run `codegen` with `--save-storage` to save [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) at the end of the session. This is useful to separately record an authentication step and reuse it later in the tests. 
+
+After performing authentication and closing the browser, `auth.json` will contain the storage state. 
 
 ```bash
 pwsh bin\Debug\netX\playwright.ps1 codegen --save-storage=auth.json
-# Perform authentication and exit.
-# auth.json will contain the storage state.
 ```
 
-Run with `--load-storage` to consume previously loaded storage. This way, all [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) will be restored, bringing most web apps to the authenticated state.
+<img width="1264" alt="Screenshot 2022-08-03 at 13 28 02" src="https://user-images.githubusercontent.com/13063165/182599605-df2fbd05-622b-4cd7-8a32-0abdfea7d38d.png" />
+
+Run with `--load-storage` to consume previously loaded storage. This way, all [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) will be restored, bringing most web apps to the authenticated state without the need to login again.
 
 ```bash
-pwsh bin\Debug\netX\playwright.ps1 open --load-storage=auth.json my.web.app
-pwsh bin\Debug\netX\playwright.ps1 codegen --load-storage=auth.json my.web.app
-# Perform actions in authenticated state.
+pwsh bin\Debug\netX\playwright.ps1 codegen --load-storage=auth.json github.com/microsoft/playwright
+```
+
+<img width="1261" alt="Screenshot 2022-08-03 at 13 33 40" src="https://user-images.githubusercontent.com/13063165/182599680-05297b4e-c258-4416-8daa-b8637c1db120.png" />
+
+Use the `open` command with `--load-storage` to open the saved `auth.json`.
+
+```bash
+pwsh bin\Debug\netX\playwright.ps1 open --load-storage=auth.json github.com/microsoft/playwright
 ```
 
 ## Record using custom setup
@@ -54,32 +102,8 @@ var page = await context.NewPageAsync();
 await page.PauseAsync();
 ```
 
-## Emulate devices
-
-You can record scripts and tests while emulating a device.
-
-```bash
-# Emulate iPhone 11.
-pwsh bin\Debug\netX\playwright.ps1 codegen --device="iPhone 11" wikipedia.org
-```
-
-## Emulate color scheme and viewport size
-
-You can also record scripts and tests while emulating various browser properties.
-
-```bash
-# Emulate screen size and color scheme.
-pwsh bin\Debug\netX\playwright.ps1 codegen --viewport-size=800,600 --color-scheme=dark twitter.com
-```
-
-## Emulate geolocation, language and timezone
-
-```bash
-# Emulate timezone, language & location
-# Once page opens, click the "my location" button to see geolocation in action
-pwsh bin\Debug\netX\playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
-```
-
+## What's Next
+- [See a trace of your tests](./trace-viewer.mdx)
 
 [Accessibility]: /api/class-accessibility.mdx "Accessibility"
 [APIRequest]: /api/class-apirequest.mdx "APIRequest"

diff --git a/dotnet/docs/docker.mdx b/dotnet/docs/docker.mdx
@@ -85,6 +85,7 @@ It is recommended to always pin your Docker image to a specific version if possi
 ### Base images
 
 We currently publish images based on the following [Ubuntu](https://hub.docker.com/_/ubuntu) versions:
+- **Ubuntu 22.04 LTS** (Jammy Jellyfish), image tags include `jammy` (not published for Java and .NET)
 - **Ubuntu 20.04 LTS** (Focal Fossa), image tags include `focal`
 - **Ubuntu 18.04 LTS** (Bionic Beaver), image tags include `bionic` (not published for Java and .NET)
 

diff --git a/dotnet/docs/intro.mdx b/dotnet/docs/intro.mdx
@@ -10,7 +10,7 @@ Playwright was created specifically to accommodate the needs of end-to-end testi
 You can choose to use [NUnit base classes](./test-runners.mdx#nunit) or [MSTest base classes](./test-runners.mdx#nunit) that Playwright provides to write end-to-end tests. These classes support running tests on multiple browser engines, parallelizing tests, adjusting launch/context options and getting a [Page]/[BrowserContext] instance per test out of the box. Alternatively you can use the [library](./library.mdx) to manually write the testing infrastructure.
 1. Start by creating a new project with `dotnet new`. This will create the `PlaywrightTests` directory which includes a `UnitTest1.cs` file:
 
-<Tabs defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
+<Tabs groupId="test-runners" defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
 
 <TabItem value="nunit">
 
@@ -34,7 +34,7 @@ cd PlaywrightTests
 
 2. Install the necessary Playwright dependencies:
 
-<Tabs defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
+<Tabs groupId="test-runners" defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
 
 <TabItem value="nunit">
 
@@ -70,7 +70,7 @@ pwsh bin\Debug\netX\playwright.ps1 install
 
 Edit the `UnitTest1.cs` file with the code below to create an example end-to-end test:
 
-<Tabs defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
+<Tabs groupId="test-runners" defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
 
 <TabItem value="nunit">
 
@@ -151,7 +151,7 @@ public class UnitTest1 : PageTest
 
 By default tests will be run on Chromium. This can be configured via the `BROWSER` environment variable, or by adjusting the [launch configuration options](./test-runners.mdx). Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal.
 
-<Tabs defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
+<Tabs groupId="test-runners" defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
 
 <TabItem value="nunit">
 

diff --git a/dotnet/docs/writing-tests.mdx b/dotnet/docs/writing-tests.mdx
@@ -9,7 +9,7 @@ Playwright assertions are created specifically for the dynamic web. Checks are a
 
 Take a look at the example test below to see how to write a test using web first assertions, locators and selectors.
 
-<Tabs defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
+<Tabs groupId="test-runners" defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
 
 <TabItem value="nunit">
 
@@ -113,7 +113,7 @@ await Expect(Page.Locator("text=Installation")).ToBeVisibleAsync();
 
 The Playwright NUnit and MSTest test framework base classes will isolate each test from each other by providing a separate `Page` instance. Pages are isolated between tests due to the Browser Context, which is equivalent to a brand new browser profile, where every test gets a fresh environment, even when multiple tests run in a single Browser.
 
-<Tabs defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
+<Tabs groupId="test-runners" defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
 
 <TabItem value="nunit">
 
@@ -162,7 +162,7 @@ public class UnitTest1 : PageTest
 
 You can use `SetUp`/`TearDown` in NUnit or `TestInitialize`/`TestCleanup` in MSTest to prepare and clean up your test environment:
 
-<Tabs defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
+<Tabs groupId="test-runners" defaultValue="nunit" values={[ {label: 'NUnit', value: 'nunit'}, {label: 'MSTest', value: 'mstest'} ] }>
 
 <TabItem value="nunit">