Not intercepting as expected

[mariush2]

Hi,

I've been trying to get msw+playwright + playwright-msw to work but can't figure out what I'm either doing wrong or what isn't working.

My setup is this:

• Vite.js build that is hosted with vite preview
• MSW handlers generated by using msw-auto-mock and a swagger.json Open API documentation file

Example of one of these handlers:

export const handlers = [
      http.get(`/api/v2/fields`, () => {
         return HttpResonse.json(mocked body response);
     })
]

• Playwright with custom fixture like you have in the README:

import { expect, test as base } from '@playwright/test';

import { handlers } from './mock';

import { http } from 'msw';
import type { MockServiceWorker } from 'playwright-msw';
import { createWorkerFixture } from 'playwright-msw';

const test = base.extend<{
  worker: MockServiceWorker;
  http: typeof http;
}>({
  worker: createWorkerFixture(handlers),
  http,
});

export { expect, test };

My playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

import dotenv from 'dotenv';
import path from 'path';

dotenv.config({ path: path.resolve(__dirname, '.env.e2e') });

const PORT = 3001;

export default defineConfig({
  testDir: './src/e2e',
  timeout: 1000 * 10,
  expect: {
    timeout: 10000,
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 1
  workers: undefined,
  reporter: 'html',
  use: {
    actionTimeout: 0,
    baseURL: `http://localhost:${PORT}`,
    trace: 'retain-on-failure',
  },
  projects: [
    /* Tried both chromium and firefox {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },*/
    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
      },
    },
  ],
  webServer: {
    command: `npm run build && vite preview --port ${PORT}`,
    url: `http://localhost:${PORT}`,
    reuseExistingServer: !process.env.CI,
  },
});

Here is an example of a basic test I have created:

import { expect, test } from 'src/test-utils/playwright';

test('Starting the app shows the search page and the tutorial pop up', async ({
  page,
}) => {
  await page.goto('/');
  await page.getByRole('button', { name: 'Skip' }).click();
  await expect(page.getByPlaceholder('Search')).toBeVisible();
  await expect(
    page.getByRole('button', { name: 'View options' })
  ).toBeVisible();
});

---

When ever I try to run a test MSW doesn't seem to be intercepting the calls as expected, any idea of why this isn't working? Seems like one of the more basic setups out there.

I have tried changing the URL in the handlers to include http://localhost:3001 (we're using a proxy for our API calls)

From what I can see my setup also looks basically identical to #72's example repo.

[mariush2]

I was able to figure out why it wasn't working today, issues caused by my MSAL react calls not being handled when we were in the playwright environment 😓