如何将 Cypress 测试与 vue axios 一起使用？

Question

我有一些 vue ant 设计代码

<a-form...>
  <button @click="submit"
</a-form>
<script>
...
methods: {
 submit() {
   return this.axios({
     method: "POST",
     data: this.form
   }).then(...)
 }
}

我想创建 e2e 测试，输入表单并通过单击按钮提交。

...
cy.get("[data-testid=submit-form").click();

但是当提交 axios 会调用 then-callback 时我如何等待？cy.wait() 对此来说是一个糟糕的解决方案。

使用 cy.request 它不是 100% 用户案例，它的 javascript 触发器

Answer 1

通常的方法是：

1. 定义一条路线cy.intercept()
2. 单击按钮
3. cy.wait()等待来自 1 的路由的响应。

用一个例子来展示它：

cy // 1.
  .intercept('POST', '/change-ad')
  .as('changeAd');

cy // 2.
  .get('#save-button')
  .click();

cy // 3.
  .wait('@changeAd')
  .its('response.statusCode')
  .should('eq', 201);

显然，您可以在响应到达后（即 3 之后）检查 UI 上的其他内容。

对于某些特定情况，您想要检查 UI 对某些后端数据的反应，而不首先实际设置后端数据，您可以在cy.intercept(). 这称为存根。