Question

我正在尝试对imgur请求和响应进行存根。根据{{3}}，我可以进行如下匿名请求：

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();
});

此行cy.get('[data-cy=image-select-save]').click();触发了api调用。我想拦截它并将帖子发布到虚拟API，然后提供虚拟响应。我该怎么办？

Answer 1

如果cy.request()中的参数正确，则您已经设置为拦截该调用并模拟对json固定装置的响应。然后，您可以使用cy.wait()来获取包含请求和响应的http对象：

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'

赛普拉斯测试中的模拟图像请求/响应

1 个答案: