循环等待
<p>[TOC]</p>
<h1>背景</h1>
<p>页面需要实时调用接口，根据接口变化更新页面，因此需要循环等待</p>
<h1>1. 解决的问题</h1>
<p>当页面持续请求接口，然后根据接口返回的数据进行页面更新，可以使用插件cypress-wait-until
举例：
页面状态更新从运行中->成功，那么接口返回成功后，页面会更新element为指定内容，从而在UI自动化中根据element值变化进行判断</p>
<h1>2. 安装</h1>
<pre><code>npm i cypress-wait-until</code></pre>
<h1>3. 配置</h1>
<p>在cypress/support/commands.js文件中添加以下，</p>
<pre><code class="language-javascript">import 'cypress-wait-until';</code></pre>
<h1>4. 使用</h1>
<h2>4.1 wait条件，不能使用大括号{}</h2>
<pre><code class="language-javascript">cy.waitUntil(() => cy.window().then(win => win.foo === "bar"));</code></pre>
<p>对比以上，<strong>不能</strong>按照如下设置（即不能有大括号)</p>
<pre><code class="language-javascript">cy.waitUntil(() => { cy.window().then(win => win.foo === "bar") } );
</code></pre>
<h2>4.2 更新频率设置, interval:xxx</h2>
<pre><code class="language-javascript">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
});</code></pre>
<h2>4.3 其他使用方式</h2>
<p>可参考Ref[1]中的内容</p>
<ul>
<li>一个判断input的value值的例子
<pre><code> cy.waitUntil(() => cy.get('[data-cy=deployment-create-page-cpu-limit]').then($el => $el.val()))
// ... then, check that it's valid string asserting about it
.then(sss => expect(sss).to.be.a("string").to.have.length.within(1, 1000));</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/031f255f2e63aada8a8d0a286dc891f9" alt="" /></p>
<h1>5.Reference</h1>
<p>[1]. <a href="https://github.com/NoriSte/cypress-wait-until">github link.</a>
[2]. <a href="https://snyk.io/advisor/npm-package/cypress-wait-until">cypress-wait-until npm intro.</a></p></li>
</ul>