Placeholder Images for Cypress End-to-End Tests

Published March 11, 2026

Cypress end-to-end tests that depend on external image URLs are inherently fragile. The remote server can be slow, return different content, or go down entirely — all of which cause test failures unrelated to your application code. Committed placeholder fixtures solve this by removing the network dependency and giving every test run identical image data.

Why external images break Cypress tests

Cypress runs in a real browser and loads every resource the page references. When an <img> tag points to an external CDN, the test waits for that request to complete. If the CDN is slow, the test times out. If it returns a different image, screenshot comparisons fail.

These failures are infrastructure noise — they tell you nothing about whether your application works correctly. The fix is to remove the external dependency entirely by serving committed fixture images.

Setting up fixture images in Cypress

Generate a placeholder pack in PlacePack with the exact dimensions your application uses. Download the ZIP and extract the files into `cypress/fixtures/images/`. Reference them in your test setup by intercepting image requests with `cy.intercept()` and responding with the fixture file.

This approach works for any image source: REST APIs, CDN URLs, or CMS-hosted assets. The intercept replaces the real URL with local fixture data before the browser ever makes the network request.

cy.intercept("GET", "/api/images/*", { fixture: "images/product_600x600.png" });
cy.visit("/products/1");
cy.get("[data-testid=product-image]").should("be.visible");

Visual testing with Cypress and Percy

Percy integrates with Cypress to capture visual snapshots. When the page contains deterministic fixture images, Percy baselines remain stable across builds. Only genuine UI changes trigger diffs.

Without fixtures, every Percy snapshot that includes an image is at risk of producing a false positive. With fixtures, the image layer of the page is frozen — you review only the changes your code introduced.

Generating fixtures that match your data model

Audit your application for every image size it renders. Common categories include product images, user avatars, hero banners, and thumbnails. Enter each size into PlacePack with a descriptive label so filenames are self-documenting.

A well-organized fixture directory might look like:

- `cypress/fixtures/images/product_600x600.png` - `cypress/fixtures/images/avatar_96x96.png` - `cypress/fixtures/images/hero_1440x600.png` - `cypress/fixtures/images/thumb_320x180.png`

Keeping fixtures up to date

When your design changes — new aspect ratios, new image slots — regenerate the affected fixtures from PlacePack. Store the share URL in your project docs so any team member can reopen the exact configuration. Commit the updated files and let Percy capture new approved baselines.

FAQ — Frequently asked questions

Can I use PlacePack fixtures with Cypress component testing?

Yes. Place fixture files in the Cypress fixtures directory and reference them via cy.fixture() or by setting image src attributes directly in your component mount.

How do I handle responsive images in Cypress tests?

Generate multiple sizes in one PlacePack session (e.g., 320x180, 768x432, 1440x810). Intercept each breakpoint's image request with the matching fixture file.

Do fixture images slow down Cypress test runs?

No. Serving local files via cy.intercept() is faster than fetching from a remote server. Fixture images are typically under 10 KB each.

Related guides

• Consistent Placeholder Images for QA and Staging →