前端自动化测试框架Cypress（十六）--- 等待元素出现cypress-wait-until

安装插件cypress-wait-until

cmd进入项目根目录

npm i -D cypress-wait-until
# or
yarn add -D cypress-wait-until

导入插件
cypress/support/commands.js文件添加如下命令

import 'cypress-wait-until';

样例：

// 等待，直到cookie设置成功
cy.waitUntil(() => cy.getCookie('token').then(cookie => Boolean(cookie && cookie.value)));

// 等待，直到全局变量有一个期望值
cy.waitUntil(() => cy.window().then(win => win.foo === "bar"));

// sync function works too!
cy.waitUntil(() => true);

// 所有可用的选项
cy.waitUntil(() => cy.window().then(win => win.foo === "bar"), {
  errorMsg: 'This is a custom error message', // overrides the default error message
  timeout: 2000, // waits up to 2000 ms, default to 5000
  interval: 500 // performs the check every 500 ms, default to 200
});

等待，直到令牌被添加到指定字段

// 等待token被添加到指定字段
cy.waitUntil(() => cy.get("input[type=hidden]#recaptchatoken").then($el => $el.val()))
  // ... then, check that it's valid string asserting about it
  .then(token => expect(token).to.be.a("string").to.have.length.within(1, 1000));

waitUntil命令也可以链接到其他命令

cy.waitUntil(() => cy.getCookie('token').then(cookie => cookie.value === '<EXPECTED_VALUE>'));
// is equivalent to
cy.wrap('<EXPECTED_VALUE>')
  .waitUntil((subject) => cy.getCookie('token').then(cookie => cookie.value === subject));

只重试代码内的内容

cy.getCookie('token') // will not be retried
  .waitUntil(cookie => cookie.value === '<EXPECTED_VALUE>');

等待，直到元素出现点击

cy.waitUntil(() => cy.get('#login_button'))

更多系列文章：https://blog.csdn.net/qq_33676825