如何等待 api 调用完成，然后使用 cypress 检查元素是否存在？答案

【问题标题】：How to wait for the api call to finish and then check if element present using cypress?如何等待 api 调用完成，然后使用 cypress 检查元素是否存在？
【发布时间】：2021-01-07 22:10:06
【问题描述】：

我是 cypress 的新手，我正在尝试在 api 调用完成后检查该元素是否存在于页面上。

我在 url 'things/thing1' 上发布了一个 http 帖子，一旦这个 api 完成，我想检查页面上是否存在 span 元素。

我尝试过类似下面的方法。

const setUp = () => {
    cy.apiPatchSomethings(something1)
        .then(() => {
            cy.reload();
        });
}

describe('Suite name', () => {
    before(() => {
        setUp();
    });
    it('test case', () => {
        cy.contains('span');
    }
});

上面的代码不起作用。即使在页面上看到 span 元素之前，它也会检查 span 元素。

如果我像下面这样使用 cy.wait(10000) 就可以了

it('test case', () => {
    cy.wait(10000);
    cy.contains('span');
});

但我不想使用 cy.wait。有没有其他方法可以解决这个问题。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

cy.apiPatchSomethings 是否返回承诺？

标签： cypress

【解决方案1】：

Cypress 命令cy.contains() 使用单个参数调用时正在寻找内容，

语法
cy.contains(内容)
cy.contains（内容，选项）
cy.contains（选择器，内容）
cy.contains(选择器、内容、选项)

但我猜你正在寻找一个 span 元素，所以使用

cy.get('span')

或

cy.contains('span', 'my-content-in-span')

假设这不是问题，只是一些任意示例代码...

您可以修改 setup 函数以返回一个 promise，以等待重新加载。

const setUp = () => {
  return cy.apiPatchSomethings(something1)     // need a return here
    .then(() => {
      return new Cypress.Promise(resolve => {  // inner return also
        cy.reload()
        resolve(true)                          // resolve will signal reload is finished
      })
    });
}

因为在before() 内部调用了setup()，赛普拉斯将等待承诺解决后再继续。

请不要添加额外的等待或超时，这是经常被建议的。这只会导致不稳定的测试。

注意如果你不介意放弃setup()函数，它会变得简单很多

describe('Suite name', () => {

  before(() => {
    cy.apiPatchSomethings(something1)
      .then(() => cy.reload() );      // all commands here will be completed
                                      // before the tests start
  });

  it('test case', () => {
    cy.contains('span', 'my-content-in-span');
  }
});

【讨论】：

【解决方案2】：

1.您可以等待span 可见。 cypress 提供的默认超时时间是 4 秒。

cy.contains('span').should('be.visible')

2.如果你想给这个命令一个自定义的超时时间（例如10秒），你可以使用：

cy.contains('span', { timeout: 10000 }).should('be.visible')

3.如果您想在全局范围内增加超时，请在您的 cypress.json 文件中提及：

"defaultCommandTimeout": 10000

然后，只需使用：

cy.contains('span').should('be.visible')

现在，您的所有命令都会有 10 秒的默认超时时间。

【讨论】：