Issue 1:
System info

Playwright Version: v1.31.2

Operating System: macOS 13.2.1

Browser: All

Other info:

Source code

I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

https://github.com/chris13524/sentry-nextjs-playwright-broken

Steps

run npm run test-ct to reproduce error

edit pages/index.tsx and comment out the call to addBreadcrumb()

run npm run test-ct to reproduce no error

Expected

I should be able to use the @sentry/nextjs library in my component and in the helper files that my component calls.

Actual

Test times out while mounting the component.

chris13524@host sentry-nextjs-playwright-broken % npm run test-ct

> sentry-nextjs-playwright-broken@0.1.0 test-ct
> playwright test -c playwright-ct.config.ts

Running 3 tests using 3 workers
1) [webkit] › pages/index.spec.tsx:6:5 › should work ─────────────────────────────────────────────

Test timeout of 10000ms exceeded.

Target closed

5 |
6 | test('should work', async ({ mount }) => {
> 7 | const component = await mount(<Home />);
| ^
8 | await expect(component).toContainText('Get started');
9 | });
10 |

at /Users/chris13524/git/github.com/chris13524/sentry-nextjs-playwright-broken/pages/index.spec.tsx:7:27

2) [chromium] › pages/index.spec.tsx:6:5 › should work ───────────────────────────────────────────

Test timeout of 10000ms exceeded.

Target closed

5 |
6 | test('should work', async ({ mount }) => {
> 7 | const component = await mount(<Home />);
| ^
8 | await expect(component).toContainText('Get started');
9 | });
10 |

at /Users/chris13524/git/github.com/chris13524/sentry-nextjs-playwright-broken/pages/index.spec.tsx:7:27

3) [firefox] › pages/index.spec.tsx:6:5 › should work ────────────────────────────────────────────

Test timeout of 10000ms exceeded.

Target closed

5 |
6 | test('should work', async ({ mount }) => {
> 7 | const component = await mount(<Home />);
| ^
8 | await expect(component).toContainText('Get started');
9 | });
10 |

at /Users/chris13524/git/github.com/chris13524/sentry-nextjs-playwright-broken/pages/index.spec.tsx:7:27

3 failed
[chromium] › pages/index.spec.tsx:6:5 › should work ────────────────────────────────────────────
[firefox] › pages/index.spec.tsx:6:5 › should work ─────────────────────────────────────────────
[webkit] › pages/index.spec.tsx:6:5 › should work ──────────────────────────────────────────────

Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

Issue 2:
Context

Playwright Version: 1.33.0

Operating System: OS X

Node.js version: 16.20.0

MSW version: 1.2.1

We are currently migrating the E2E test suite of a React Native app from Cypress to Playwright. Both Playwright and msw work perfectly for us. We use MSW also in combination with our Jest test suite, as well as for local manual testing. We would like to intercept and mock network requests that are performed by browsers during Playwright tests. In Cypress we managed to achieve it like this:

cy.window().then((window) => {
const {worker, rest} = window.msw;
worker.use(
rest.post(`*${api.customName}`, (_, res, ctx) => {
const response = cloneDeep(responses.customName);
response.days = 5;

return res(ctx.status(200), ctx.json(response));
}),
);
});

Problem

We tried to achieve the same behavior in Playwright tests, but have not been successful yet.

What we tried

Use build-in modification of API responses (then realized that this build-in feature might not work for msw)

await page.route(`*/api/${api.statistics}`, async (route) => {
const response = await route.fetch();
const json = await response.json();
json.days = 5;

await route.fulfill({response, json});
});

Add option serviceWorkers: allow in config

Try using Experimental Service Worker Network Events (unsuccessful)

Try msw-playwright package, but the requests do not seem to get intercepted. The browser returns the original response that is defined in our msw environment (handlers.ts).

What could be the cause of the problem? What's the best way to intercept API requests in Playwright tests using MSW? Thanks in advance for your help!