賽普拉斯測試中的模擬 imgur 請求/響應

Question

我正在嘗試存根 imgur 請求和響應。 根據API 文檔，我可以提出如下匿名請求：

curl --location --request POST 'https://api.imgur.com/3/image' \
--header 'Authorization: Client-ID {{clientId}}' \
--form 'image=R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

並且響應如下（我已經為其創建了一個夾具，如navbar-logo-image.json ）

{
  "data": {
    "id": "orunSTu",
    "title": null,
    "description": null,
    "datetime": 1587998106,
    "type": "image/png",
    "animated": false,
    "width": 2100,
    "height": 1709,
    "size": 138557,
    "views": 0,
    "bandwidth": 0,
    "vote": null,
    "favorite": false,
    "nsfw": null,
    "section": null,
    "account_url": null,
    "account_id": 0,
    "is_ad": false,
    "in_most_viral": false,
    "tags": [],
    "ad_type": 0,
    "ad_url": "",
    "in_gallery": false,
    "deletehash": "N9YaI4CIkq3rIar",
    "name": "",
    "link": "https://i.imgur.com/12gZbNU.png"
  },
  "success": true,
  "status": 200
}

我的測試場景如下：

it('should allow the user to select a navbar component and replace a logo', () => {
  cy.server();
  cy.route({
    url: '/3/image',
    method: 'POST',
    response: "fixture:navbar-logo-image.json",
  }).as('imgurRequest');
  cy.getIframeBody('builder-showcase').find('[data-cy="navbar-component"]').eq(0).click();
  cy.getIframeBody('builder-showcase').find('[data-cy="navbar-logo-image"]').eq(0).click();
  cy.get('[data-cy="builder-sidebar-menu-select-image-navbar"]').eq(0).click();
  const navbarLogoImage = 'images/navbar-logo-image.png';
  cy.get('[data-cy="image-file-input"]').attachFile(navbarLogoImage);
  cy.get('[data-cy="image-alt-text"]')
    .clear()
    .type('Twitter logo image');
  cy.get('.source-image').invoke('attr', 'src')
    .then(uploadedLogoImage => {
      expect(uploadedLogoImage).to.contain('iVBORw0KGgoAAAANSUhEUgAACDQAAAatCAYAAAAmAogfAAAgAElEQVR4XuzdC5icdXn38');
    });
  cy.get('[data-cy=image-select-save]').click();
});

api 調用在這一行觸發cy.get('[data-cy=image-select-save]').click(); . 我想攔截它並將其發布到虛擬 API，然后提供虛擬響應。 我該怎么做 go 呢？

Answer 1

如果您在cy.request()中的參數是正確的，那么您已經准備好攔截呼叫，並且 mocking 是對 json 夾具的響應。 然后，您可以使用cy.wait()獲取包含請求和響應的 http object：

cy.get('[data-cy=image-select-save]').click();
cy.wait('@imgurRequest').then(xhr => {
    // do something with the xhr object
});

確保您的請求不是fetch類型，因為 cypress 還無法捕獲fetch請求。 另外，我建議在cy.request()中的 url 參數中使用全局模式，例如url: '*/3/image'