You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: exercises/02.vitest-browser-mode/03.solution.playwright/README.mdx
+5-10Lines changed: 5 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,10 @@
1
1
# Playwright
2
2
3
-
Problem: Using the default `preview` provider in Vitest is great to try things out, but it relies on Chromium being installed in your system (and also isn't that powerful). To have a proper setup, and be able to run it in CI, we need to define an explicit provider. Let's use Playwright.
4
-
5
-
0. Explain why we want `playwright` and not the default `preview` browser provider (works better for CI, more powerful since it taps into the Chrome DevTools Protocol).
6
-
1. Install `playwright`.
7
-
1. Run `npx playwright install --with-deps chromium` and configure your repo so this runs automatically (this can be quite annoying). Also, install just the browsers we need, not all of them, to save time on CI.
8
-
1. Update the Vitest configuration to use `playwright` as the browser automation tool.
3
+
Problem: Using the default `preview` provider in Vitest is great to try things out, but it relies on Chromium being installed on your system (and also isn't that powerful). To have a proper setup, and be able to run it in CI, we need to define an explicit provider. Let's use Playwright.
9
4
10
5
---
11
6
12
-
Let's start from installing `playwright`:
7
+
Let's start by installing `playwright`:
13
8
14
9
```sh nonumber
15
10
npm i -D playwright
@@ -18,10 +13,10 @@ npm i -D playwright
18
13
Playwright needs browser executables to be present on your machine to run. In this workshop, I am using Chromium as my browser of choice, so I can install just that particular browser by running the following command:
19
14
20
15
```sh nonumber
21
-
npx playwright install --with-dewps chromium
16
+
npx playwright install --with-deps chromium
22
17
```
23
18
24
-
> 🦉 You can provide the Playwright CLI with the explicit browsers you want to be installed. This reduces its footprint in the system by fetching only the browsers you need.
19
+
> 🦉 You can provide the Playwright CLI with a specific browser you want to be installed. This reduces its footprint in the system by fetching only the browsers you need.
25
20
26
21
The next step is to tell Vitest to use Playwright as the browser provider for component tests. In `vite.config.ts`, set the `test.browser.provider` option to `'playwright'`:
27
22
@@ -65,4 +60,4 @@ And, finally, let's update the type definitions for the assertion matchers to be
65
60
}
66
61
```
67
62
68
-
This will make sure that the locators, user events, and matchers are correctly annotated.
63
+
This will make sure that the locators, user events, and matchers are correctly typed.
0 commit comments