如何在 vue axios 中使用 Cypress 测试？

Question

我有一些 vue ant-design 代码

<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

通常的做法是：

用cy.intercept()
点击按钮
等待 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);

显然你可以在响应到达后检查 UI 上的其他内容，即在 3.

之后

对于某些特定情况，如果您想检查 UI 如何对某些后端数据做出反应而无需先实际设置后端数据，您可以“伪造”响应（以及状态代码等）在 cy.intercept()。这叫做stubbing.

如何在 vue axios 中使用 Cypress 测试？

How to use Cypress tests with vue axios?

vue.js

e2e-testing

cypress