-16

docs/guide/browser/commands.md

Reviewed

··· 148 148 } 149 149 ``` 150 150 151 151 - ::: tip 152 152 - If you are using TypeScript, don't forget to reference `@vitest/browser/providers/playwright` in your [setup file](/config/#setupfile) or a [config file](/config/) to get autocompletion in the config and in `userEvent` and `page` options: 153 153 - 154 154 - ```ts 155 155 - /// <reference types="@vitest/browser/providers/playwright" /> 156 156 - ``` 157 157 - ::: 158 158 - 159 151 ### Custom `webdriverio` commands 160 152 161 153 Vitest exposes some `webdriverio` specific properties on the context object. ··· 163 155 - `browser` is the `WebdriverIO.Browser` API. 164 156 165 157 Vitest automatically switches the `webdriver` context to the test iframe by calling `browser.switchFrame` before the command is called, so `$` and `$$` methods refer to the elements inside the iframe, not in the orchestrator, but non-webdriver APIs will still refer to the parent frame context. 166 166 - 167 167 - ::: tip 168 168 - If you are using TypeScript, don't forget to reference `@vitest/browser/providers/webdriverio` in your [setup file](/config/#setupfile) or a [config file](/config/) to get autocompletion: 169 169 - 170 170 - ```ts 171 171 - /// <reference types="@vitest/browser/providers/webdriverio" /> 172 172 - ``` 173 173 - :::

-11

docs/guide/browser/config.md

Reviewed

··· 455 455 resolveDiffPath: ({ arg, attachmentsDir, browserName, ext, root, testFileName }) => 456 456 `${root}/${attachmentsDir}/screenshot-diffs/${testFileName}/${arg}-${browserName}${ext}` 457 457 ``` 458 458 - 459 459 - ::: tip 460 460 - To have a better type safety when using built-in providers, you should reference 461 461 - one of these types (for provider that you are using) in your 462 462 - [config file](/config/): 463 463 - 464 464 - ```ts 465 465 - /// <reference types="@vitest/browser/providers/playwright" /> 466 466 - /// <reference types="@vitest/browser/providers/webdriverio" /> 467 467 - ``` 468 468 - :::

-42

docs/guide/browser/index.md

Reviewed

··· 293 293 - `webkit` 294 294 - `chromium` 295 295 296 296 - ## TypeScript 297 297 - 298 298 - By default, TypeScript doesn't recognize providers options and extra `expect` properties. If you don't use any providers, make sure the `@vitest/browser/matchers` is referenced somewhere in your tests, [setup file](/config/#setupfiles) or a [config file](/config/) to pick up the extra `expect` definitions. If you are using custom providers, make sure to add `@vitest/browser/providers/playwright` or `@vitest/browser/providers/webdriverio` to the same file so TypeScript can pick up definitions for custom options: 299 299 - 300 300 - ::: code-group 301 301 - ```ts [default] 302 302 - /// <reference types="@vitest/browser/matchers" /> 303 303 - ``` 304 304 - ```ts [playwright] 305 305 - /// <reference types="@vitest/browser/providers/playwright" /> 306 306 - ``` 307 307 - ```ts [webdriverio] 308 308 - /// <reference types="@vitest/browser/providers/webdriverio" /> 309 309 - ``` 310 310 - ::: 311 311 - 312 312 - Alternatively, you can also add them to `compilerOptions.types` field in your `tsconfig.json` file. Note that specifying anything in this field will disable [auto loading](https://www.typescriptlang.org/tsconfig/#types) of `@types/*` packages. 313 313 - 314 314 - ::: code-group 315 315 - ```json [default] 316 316 - { 317 317 - "compilerOptions": { 318 318 - "types": ["@vitest/browser/matchers"] 319 319 - } 320 320 - } 321 321 - ``` 322 322 - ```json [playwright] 323 323 - { 324 324 - "compilerOptions": { 325 325 - "types": ["@vitest/browser/providers/playwright"] 326 326 - } 327 327 - } 328 328 - ``` 329 329 - ```json [webdriverio] 330 330 - { 331 331 - "compilerOptions": { 332 332 - "types": ["@vitest/browser/providers/webdriverio"] 333 333 - } 334 334 - } 335 335 - ``` 336 336 - ::: 337 337 - 338 296 ## Browser Compatibility 339 297 340 298 Vitest uses [Vite dev server](https://vitejs.dev/guide/#browser-support) to run your tests, so we only support features specified in the [`esbuild.target`](https://vitejs.dev/config/shared-options.html#esbuild) option (`esnext` by default).

+1 -10

docs/guide/browser/interactivity-api.md

Reviewed

··· 12 12 await userEvent.click(document.querySelector('.button')) 13 13 ``` 14 14 15 15 - Almost every `userEvent` method inherits its provider options. To see all available options in your IDE, add `webdriver` or `playwright` types (depending on your provider) to your [setup file](/config/#setupfile) or a [config file](/config/) (depending on what is in `included` in your `tsconfig.json`): 16 16 - 17 17 - ::: code-group 18 18 - ```ts [playwright] 19 19 - /// <reference types="@vitest/browser/providers/playwright" /> 20 20 - ``` 21 21 - ```ts [webdriverio] 22 22 - /// <reference types="@vitest/browser/providers/webdriverio" /> 23 23 - ``` 24 24 - ::: 15 15 + Almost every `userEvent` method inherits its provider options. 25 16 26 17 ## userEvent.setup 27 18