00:00 We'll be using Playwright as the browser automation tool for our component tests. And a good place to start is to install it as a dependency. So I'll run npm install Playwright. If you're wondering, there's actually two packages shipped by the Playwright team. The Playwright slash test package and just the Playwright package.

00:17 While the Playwright slash test package is an actual end-to-end framework that contains a bunch of utilities designed for testing things in the browser, while the standalone Playwright package that we're installing right now is just the bare bones browser automation. That's precisely what we're going to need, because we are going to use Vitest for the testing framework part.

00:35 So now that we have it installed, we'll need to install the browsers we need. So in our case, we just need Chromium browsers. So I will run player npx Playwright install with deps and the browser name Chromium. Providing explicit browser name is really great, especially on your continuous integration pipelines,

00:54 because it can shave off some of the unnecessary time you spend installing browser binaries you don't need. By default, Playwright will install, I believe, Chromium and Firefox, maybe even Safari. But if you only use one browser, specify it in the installation command and save yourself the trouble. So now that the Chrome binary is there,

01:11 I can head to our vitconfig.yes and set Playwright as an explicit provider. If I head to my test options over here, browser, provider, and set it to Playwright. This will tell Vitest to use Playwright as the actual browser automation tool.

01:27 And now the only thing left is to verify that it's working, and I will run npm test. And you can see that it spawned a special controlled Chromium instance. You can notice that by the dark color of the tab panel. And this is actual Playwright automation working hand in hand with Vitest to run the same test. Having an explicit dependency on Playwright is great,

01:49 but there is another reason why you would want to do so. When using proper browser automation tools, Vitest is able to tap into Chrome developer protocol, in this case, to properly work and automate the Chrome instance. Otherwise, when you're using the preview provider, Vitest relies on event simulation, which is not very reliable, but most importantly,

02:08 not something the user actually does on the page. So using the designated automation tool like Playwright will allow you to interact with your page elements more reliably. But there's one more thing that we can do to improve the setup. We can swap the type definitions that Vitest uses for our matchers in the test,

02:25 like to be visible, for example, to be more aligned with those from Playwright. To do that, go to our TypeScript config for test, tsconfig, test.json, and remove this Vitest slash browser matchers types. And instead, we're going to use Vitest slash browser providers slash Playwright types.

02:42 This is just a nice touch to make sure that the two tools work nicely together. Now that we're using actual Playwright, you can also customize it as you normally would through your Vitest configs. So I encourage you to explore the documentation on that provider and see everything that you can do with it.