Mocking Third-Party Scripts in Playwright

When testing modern web applications, you often rely on multiple third-party scripts such as analytics tools, chat widgets, ad services, or external APIs. While these scripts play a crucial role in production environments, they can introduce noise, slow down test execution, or even cause flaky tests during automation. To ensure your tests remain fast, reliable, and focused, mocking third-party scripts becomes essential—especially when using a powerful automation framework like Playwright.

In this blog, we'll explore how to mock third-party scripts in Playwright and why it’s a good practice in end-to-end (E2E) testing.

Why Mock Third-Party Scripts?

Third-party scripts are outside your control. They might:

• Load slowly or inconsistently
• Introduce UI changes that break tests
• Send data to external servers unnecessarily
• Create unpredictable test results

Mocking these scripts during automated testing helps:

• Improve test stability and speed
• Avoid hitting external services during test runs
• Focus tests only on what you can control
• Reduce data privacy risks

Introduction to Playwright

Playwright is an open-source E2E testing framework developed by Microsoft. It supports multiple browsers (Chromium, Firefox, and WebKit) and is known for its modern API and fast execution.

With Playwright, you can intercept and mock network requests easily using page.route(), which makes it perfect for replacing or blocking third-party resources.

• Common Third-Party Scripts to Mock
• Google Analytics (e.g., www.google-analytics.com/analytics.js)
• Facebook Pixel
• Intercom, Drift (live chat widgets)
• Ad scripts from ad networks
• External API calls

How to Mock Third-Party Scripts in Playwright

Here’s a basic example of how to intercept and mock a third-party script using Playwright:

javascript

const { test, expect } = require('@playwright/test');

test('should block Google Analytics script', async ({ page }) => {

  await page.route('https://www.google-analytics.com/**', route => {

    // Block or respond with empty script

    route.fulfill({

      status: 200,

      contentType: 'application/javascript',

      body: '// Mocked analytics script',

    });

  });

  await page.goto('https://your-website.com');

  // Continue with your test

  await expect(page).toHaveTitle(/Your Website/);

});

In this example, any request to a Google Analytics script is intercepted and replaced with a harmless mocked script.

Mocking API Responses from Third-Party Services

You can also mock network responses from third-party APIs your app may rely on:

javascript

await page.route('https://api.thirdparty.com/data', async route => {

  route.fulfill({

    status: 200,

    contentType: 'application/json',

    body: JSON.stringify({ message: 'Mocked data' }),

  });

});

This is particularly useful for testing different API scenarios like errors, timeouts, or unusual data formats.

Best Practices

1. Be selective: Mock only the scripts that are not critical to your tests.
2. Centralize your mocks: Store your route intercepts in a shared file or helper function to reuse across tests.
3. Use realistic mock data: Ensure your mocked responses match the structure expected by your application.
4. Don’t forget cleanup: Use page.unroute() if needed to remove mocks in between tests.

Conclusion

Mocking third-party scripts in Playwright allows you to isolate your test environment from external dependencies, resulting in faster and more reliable tests. By intercepting and simulating script responses, you ensure your tests focus solely on your application's behavior. Whether you're building a simple UI or a complex web app, mastering this Playwright feature is a smart way to enhance the stability and accuracy of your automation suite.

Learn Playwright Testing Training
Read More: Testing Large Data Grids with Playwright

Visit IHUB Talent Institute Hyderabad
Get Direction