02/03: improve readme

Author: kettanaito

exercises/02.vitest-browser-mode/03.solution.playwright/README.mdx

@@ -9,4 +9,60 @@ Problem: Using the default `preview` provider in Vitest is great to try things o
 
 ---
 
-// TODO: Mention `"types": ["@vitest/browser/providers/playwright"]` in `tsconfig.node.json` to have `.toBeVisible()` and other nice browser assertions!
+Let's start from installing `playwright`:
+
+```sh
+npm i -D playwright
+```
+
+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:
+
+```sh
+npx playwright install --with-dewps chromium
+```
+
+> 🦉 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.
+
+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'`:
+
+```ts filename=vite.config.ts add=11
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+	plugins: [react()],
+	test: {
+		globals: true,
+		browser: {
+			enabled: true,
+			provider: 'playwright',
+			instances: [
+				{
+					browser: 'chromium',
+				},
+			],
+		},
+	},
+})
+```
+
+And, finally, let's update the type definitions for the assertion matchers to be those from Playwright in `tsconfig.test.json`:
+
+```json filename=tsconfig.test.json remove=9 add=10
+{
+	"extends": "./tsconfig.base.json",
+	"include": ["vite.config.ts", "**/*.test.ts*"],
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "preserve",
+		"types": [
+			"vitest/globals",
+			"@vitest/browser/matchers",
+			"@vitest/browser/providers/playwright"
+		]
+	}
+}
+```
+
+This will make sure that the locators, user events, and matchers are correctly annotated.