Playwright 1.22: Component Tests (preview) Overview
In this video, Ross gives an overview of Playwright’s new Component Testing feature which is in preview! With it, you can now test your React, Svelte, Vue.js, etc. components in isolation directly with Playwright!
Documentation: https://aka.ms/playwright/components
Here’s an outline of what to expect in the video:
00:00 - Welcome
00:29 - Walking through the Demo App Under Test
02:41 - Initializing Playwright Component Test (CT) with npm init playwright@latest -- --ct!
06:19 - Writing our First Component Test: Using Playwright CT’s new mount fixture on a Component with Some Basic Props;
11:07 - Testing a Component with Interaction: A Component Test Using fill and click to Submit a Form; using non-primitive (e.g. functions) as props (i.e. blending the world between Node and the Browser)
13:32 - Under the Hood: How does some of the new magic work? Looking at the mount fixture under the hood (with slides!)
16:06 - Focus Test: As a user Tabs through a component, test that they end up in the correct place!
18:19 - Built in Request Interception and Mocking via page.route(…)
22:24 - Testing Responsive Components: Emulated Smaller Viewport and Dark Mode, Screenshot Tests
24:34 - Thanks and Links
#playwright #playwrightdev #playwrightweb
