Question

我在应用程序中有一个端点。对于每个请求，我们在参数中使用相同的api进行不同的操作。

URL

/application/api

样品请求有效载荷1：

{
  "action":"CARD_TRANSACTION_HISTORY",
  "data":{"date_from":"2018-12-01","date_to":"2018-12-31","total":5},
  "meta":{}
}

样品请求有效载荷2：

{
  "action":"CARD_BALANCE",
  "data":{"date_from":"2018-12-01","date_to":"2018-12-31","total":5},
  "meta":{}
}

样品请求有效负载3：

{
  "action":"CURRENCY_RATES",
  "data":{"date_from":"2018-12-01","date_to":"2018-12-31","total":5},
  "meta":{}
}

上述请求中的操作针对不同的请求而改变。

加载仪表板页面后，我们会触发3个并发 AJAX POST请求，并执行不同的操作。

赛普拉斯的问题是您只能为一条路线指定一个响应，而处理此问题的另一种方法是发出顺序请求（我们不能这样做）

即使我们将response作为函数编写，它也只会被调用一次。

关于如何根据有效载荷模拟数据的任何想法？

Answer 1

我遇到了完全相同的问题，并发现@Richard Matsen的答案非常有用，但是，当使用whitelist选项时，无法访问proxy.request，它返回undefined。但是，如果您使用onRequest而不是whitelist，则可以访问该请求并根据该请求的主体执行任何操作。

所以这应该起作用：

cy.server({
  onRequest: (xhr) => {
    xhr.url = xhr.url + 
      xhr.request.body.action  == 'CARD_TRANSACTION_HISTORY' ? '?transactionHistory'
      : xhr.request.body.action  == 'CARD_BALANCE' ? '?balance'
      : xhr.request.body.action  == 'CURRENCY_RATES' ? '?currencyRates'
      : ''
  }
})

Answer 2

我做了一个肮脏的工作，我不喜欢它，但是我没有选择。

我只是将所有响应合并在一个响应中。

我的模拟响应

{
  balance: {..},
  transactionHistory: {..},
  currencyRates: {..}
}

每个响应处理程序仅处理其感兴趣的部分，如果响应之一是数组，则需要将其更改为对象。

我会寻找更好的解决方法。

Answer 3

这是另一个技巧。它依靠您的api忽略url参数，并在发出请求之前调用cy.server白名单功能。

cy.server({
  whitelist: (proxy) => {
    proxy.url = proxy.url + 
      proxy.request.body.action  == 'CARD_TRANSACTION_HISTORY' ? '?transactionHistory'
      : proxy.request.body.action  == 'CARD_BALANCE' ? '?balance'
      : proxy.request.body.action  == 'CURRENCY_RATES' ? '?currencyRates'
      : ''
  }
})

const apiMocks = {
  balance: {..},
  transactionHistory: {..},
  currencyRates: {..}
}
cy.route('/application/api?balance', apiMocks.balance).as('balance')
cy.route('/application/api?transactionHistory', apiMocks.transactionHistory)
  .as('transactionHistory')
cy.route('/application/api?currencyRates', apiMocks.currencyRates).as('currencyRates')

cy.visit(...)

cy.wait('@balance').then(xhr => //should see correct mock here )

Answer 4

如果有人遇到这个问题，我可能会发现另一个对我有用的hack（我正在使用unfetch polyfill来处理fetch请求和cypress）-这是一条路由的代码。

cy.route({
  url: '/api/ngfw/devices/search',
  method: 'POST',

  // Default response, when parametrs doesn't match
  response: [],

  onResponse: (xhr) => {
    xhr.response = { body: [] };
    const { body } = xhr.request;

    if (body.groupBy) {
      const [groupBy] = body.groupBy;
      if (groupBy === 'overallColor') {
        Object.defineProperty(xhr.xhr, 'responseText', {

          // Putting response inside
          value: JSON.stringify(mockData.totalsResult),

          enumerable: true
        });
      }
    }
  },
});

赛普拉斯（Cypress）：同一路由的Stub响应具有三个不同的响应

4 个答案: