refactor(playwright): use msw playwright binding

[kleinfreund]

In mswjs/playwright#21 (comment), I offered help with updating some msw examples and this is the first attempt at doing so.

Initial problem with the setup file being recognized as a test file

Now, at least on my system (Windows, PowerShell), the main problem with this pull request (which is why it's in draft) is that it doesn't work. Running pnpm run test in the playwright example always produces the following error:

Error: test file "example.test.ts" should not import test file "playwright.setup.ts"

   at example.test.ts:1

> 1 | import { expect } from '@playwright/test'
    | ^
  2 | import { test } from './playwright.setup.js'
  3 |
  4 | test('receives a mocked response to a REST API request', async ({ page }) => {

As far as I understand https://playwright.dev/docs/test-global-setup-teardown, this error shouldn't happen. The setup file and configuration is written in such a way that playwright.setup.ts shouldn't be considered a test file, but Playwright still thinks so. So far, I haven't found a configuration that would make this work.

Notes

• Updating msw became necessary because @msw/playwright has a peer dependency on msw@^2.10.3After a rebase with main, this became unnecessary as msw was updated in the meantime
• Updating playwright became necessary due to a TypeError: this[#page].routeWebSocket is not a function errors

Changes

Add @msw/playwright to the playwright example.

Update Playwright to avoid TypeError: this[#page].routeWebSocket is not a function errors when using @msw/playwright.

Use the @msw/playwright binding