Mock Api Response
Hi team, I have a question about mocking the api response. I am looking to use the playwright framework for an api testing project, and I want to use the mock functions (route, unroute etc.) that are available in the page fixture. However, I don’t think it makes sense to use the page fixture for api testing, since I don’t need to interact with any web pages. Is there a way to mock the api response without using the page fixture, but only using the request fixture? I appreciate any suggestions. Thanks. cc @mxschmitt
This thread is trying to answer question "Is there a way to mock the api response without using the page fixture, but only using the request fixture in Playwright?"
Hi, features in Playwright for mocking API responses are only for testing the frontend, using the page fixture.
When doing API tests, you don't want to mock the API, because then you're testing the mocks. I suppose you want to mock some third-party API which the backend is using. But that is beyond the control of Playwright.
I think that's what things like WireMock are intended for. Such service needs to be deployed and configured in the testing environment, so your system under test will use the mock API server. You can probably integrate WireMock or similar service with Playwright test, so that you can remotely configure the mock responses dynamically, from your tests/test fixtures.
Hi, no I don't because I never used it. But WireMock is not Playwright specific. I think it has a JS client, which you can use together with Playwright like any other npm module. https://wiremock.org/docs/solutions/nodejs/#wiremock-rest-client
To understand WireMock itself, head to https://wiremock.org/
Related Ask AI answer for "How do I mock API responses using the request fixture in Playwright?".
Answer
Sure, you can mock API responses in Playwright using only the request fixture. Playwright's page.route() method is your friend here. It intercepts and modifies network requests made by a page. You can match requests to intercept using a URL pattern or a regular expression.
Here's how you can fulfill a request with a custom response using route.fulfill(). You can provide a JSON object as the response body or modify an existing response.
await page.route('*/**/api/v1/fruits', async (route) => {
const json = [{ name: 'Strawberry', id: 21 }];
await route.fulfill({ json });
});In this example, all calls to */**/api/v1/fruits will be intercepted and fulfilled with a custom JSON response.
Now, navigate to your URL that makes API calls and check that the mocked data is present on the page.
await page.goto('https://ray.run/api-mocking');
await expect(page.getByText('Strawberry')).toBeVisible();This code navigates to https://ray.run/api-mocking and checks that the fruit "Strawberry" is visible on the page.
By using page.route() and route.fulfill(), you can mock API responses without relying on specific fixtures like page. This gives you more flexibility in mocking responses during testing scenarios.
For more details on mocking HTTP traffic in Playwright tests, check out this blog post.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].