[Network Interception] Network Interceptions for network requests with page.route() are ignored

[unlikelyzero]

The problem

I'm trying to add determinism to a test by intercepting a jpg with a page.route().

I have the test running successfully in playwright, but when the percy snapshots are taken, the original image appears.

Playwright image with page.route network interception:

Percy image:

Environment

• Node version: 18
• "@percy/cli": "1.27.4",
• "@percy/playwright": "1.0.4",
  • "@playwright/test": "1.39.0",
• Version of Percy SDK you’re using:
• If needed, a build or snapshot ID: https://percy.io/b2e34b17/openmct/builds/32303035/changed/1773620404?browser=chrome&browser_ids=48&subcategories=unreviewed%2Cchanges_requested&viewLayout=overlay&viewMode=new&width=1024&widths=1024

Debug logs

[percy:core:page] Page created (5ms)
[percy:core:page] Resize page to 1024x1440 @1x (83ms)
[percy:core:page] Navigate to: http://localhost:8080/#/browse/mine/ebdc8678-979e-429b-b91c-ba43c7d86074/83000a3e-3cf2-47f1-ba07-3a7a1a02b524?tc.mode=fixed&tc.startBound=1693592063607&tc.endBound=1693593893607&tc.timeSystem=utc (2ms)
[percy:core:discovery] Handling request: http://localhost:8080/ (3ms)
[percy:core:discovery] - Serving root resource (0ms)
[percy:client] Uploading resources for 32303189... (17ms)
[percy:client] Uploading resource: /percy.1706157393731.log... (0ms)
[percy:client] Uploading resource: http://localhost:8080/... (1ms)
[percy:core:discovery] Handling request: http://localhost:8080/dist/espressoTheme.css (6ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18739.jpg (12ms)
[percy:core:discovery] Handling request: http://render.percy.local/__serialized__/_ew6lo02u6.png (3ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18739.jpg?w=100&h=100 (0ms)
[percy:core:discovery] Handling request: https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18740.jpg?w=100&h=100 (0ms)

Code to reproduce issue

test.describe.only('Visual - Example Imagery', () => {
  let exampleImagery;
  let parentLayout;

  test.beforeEach(async ({ page }) => {
    // Intercept images from the Example Imagery Plugin to replace with local files
    await page.route(
      (url) =>
        url.href.startsWith('https://www.nasa.gov/wp-content/uploads/static/history/') &&
        url.href.endsWith('.jpg') &&
        !url.href.endsWith('.jpg?w=100&h=100'),
      (route) => {
        const localImageBuffer = readFileSync('e2e/test-data/rick.jpg');
        route.fulfill({
          status: 200,
          contentType: 'image/jpeg',
          body: localImageBuffer
        });
      }
    );

    // Intercept thumbnails
    await page.route(
      (url) =>
        url.href.match(
          'https://www.nasa.gov/wp-content/uploads/static/history/.+\\.jpg\\?w=100&h=100'
        ),
      (route) => {
        const thumbImageBuffer = readFileSync('e2e/test-data/rick-thumb.jpg');
        route.fulfill({
          status: 200,
          contentType: 'image/jpeg',
          body: thumbImageBuffer
        });
      }
    );

    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });

    parentLayout = await createDomainObjectWithDefaults(page, {
      type: 'Display Layout',
      name: 'Parent Layout'
    });

    exampleImagery = await createDomainObjectWithDefaults(page, {
      type: 'Example Imagery',
      name: 'Example Imagery Test',
      parent: parentLayout.uuid
    });
  });

  test('Example Imagery in Fixed Time', async ({ page, theme }) => {
    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });

    await expect(page.getByLabel('Image Wrapper')).toBeVisible();

    await percySnapshot(page, `Example Imagery in Fixed Time (theme: ${theme})`);

    await page.getByLabel('Image Wrapper').hover();

    await percySnapshot(page, `Example Imagery Hover in Fixed Time (theme: ${theme})`);
  });

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[unlikelyzero]

Bump

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[unlikelyzero]

Bump

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 28 days with no activity.