Intercept API requests using Playwright

Playwright is a great browser testing framework with a lot of modern features such as auto-wait, and parallel testing. One of its most powerful features is the ability to intercept API requests. In this article, let’s see how you can intercept API requests using Playwright.

Photo by Tianshu Liu on Unsplash

Suppose you want to test an e-commerce web application with edge cases such as seeing how the app handle missing data or invalid data, or network error to the backend services. For such cases, you need to intercept the API requests using page.route .

Modify Response

By default, the products API return 9 product items. Let’s say you want to see how the UI would look like when there’s only 1 item returned. To do that, you would write the page.route as below:

const testData={
        "data": [
          {
            "id": "prod_RqEv5xLJd5Zz4j",
            "created": 1588262453,
            "updated": 1594409610,
            "active": true,
            "permalink"…