Cypress：如何为<img>元素模拟响应中的图片URL？

Here's a scalable approach that keeps your API fixtures clean and dynamically maps virtual image URLs to Cypress fixtures:

1. Organize Your Fixtures & Mapping #

• API Response Fixture: Keep your mock API data as pure JSON/TS, using virtual placeholder URLs for images.
  Example (cypress/fixtures/api/user-profile.json):

  {
    "username": "test-user",
    "avatar": "https://virtual-s3.example.com/avatar.jpg",
    "media": [
      "https://virtual-s3.example.com/post-1.jpg",
      "https://virtual-s3.example.com/post-2.png"
    ]
  }
  

• Image Mapping File: Create a separate file to map virtual URLs to their corresponding fixture image paths. This acts as a single source of truth.
  Example (cypress/support/image-mappings.ts):

  export const imageMappings = {
    "https://virtual-s3.example.com/avatar.jpg": "images/avatar.png",
    "https://virtual-s3.example.com/post-1.jpg": "images/post-1.jpg",
    "https://virtual-s3.example.com/post-2.png": "images/post-2.png"
  };
  

2. Preload Fixture Images (Optional but Efficient) #

Preload all images into a cache before tests run to avoid repeated fixture reads:

// In cypress/support/e2e.js or your test file
import { imageMappings } from './image-mappings';

let imageCache = {};

before(() => {
  Object.entries(imageMappings).forEach(([virtualUrl, fixturePath]) => {
    cy.fixture(fixturePath, 'base64').then((base64Data) => {
      imageCache[virtualUrl] = {
        base64: base64Data,
        contentType: fixturePath.endsWith('.png') ? 'image/png' : 'image/jpeg'
      };
    });
  });
});

3. Set Up Interceptors #

• Intercept API Request: Return your clean API fixture without modifying the virtual URLs:

  cy.intercept('GET', '/api/user/profile', { fixture: 'api/user-profile.json' });
  

• Intercept Image Requests: Map each virtual URL to its preloaded fixture image, ensuring correct content type headers:

  Object.entries(imageMappings).forEach(([virtualUrl]) => {
    cy.intercept('GET', virtualUrl, (req) => {
      const imgData = imageCache[virtualUrl];
      req.reply({
        headers: {
          'Content-Type': imgData.contentType
        },
        body: Buffer.from(imgData.base64, 'base64')
      });
    });
  });
  

Why This Works #

• Clean Separation: Your API fixtures remain independent of Cypress logic, making them easy to update or reuse.
• Scalable: Adding new images only requires updating the imageMappings file and adding the fixture—no changes to test code.
• Proper Image Rendering: By setting the correct Content-Type header and serving the raw image buffer, the browser will render the image correctly.

Notes for Dynamic URLs #

If your virtual URLs include dynamic parts (e.g., unique IDs), use a regex pattern in the intercept:

// Match any URL under https://virtual-s3.example.com/images/
cy.intercept('GET', /https:\/\/virtual-s3\.example\.com\/images\/.+/, (req) => {
  // Extract the image name from the URL to look up in the mapping
  const imageName = req.url.split('/').pop();
  const fixturePath = `images/${imageName}`;
  // Load and reply with the fixture (or use cache if preloaded)
  cy.fixture(fixturePath, 'base64').then((base64) => {
    const contentType = fixturePath.endsWith('.png') ? 'image/png' : 'image/jpeg';
    req.reply({
      headers: { 'Content-Type': contentType },
      body: Buffer.from(base64, 'base64')
    });
  });
});

内容的提问来源于stack exchange，提问作者systems_n_systems