Cypress学习文档

沉淀cypress对常用html组件定位的文档


采用jquery语法进行定位

<p>1.Jquery基础语法</p> <ul> <li>基本选择器 A、标签选择器: $(&quot;html标签名&quot;) B、id选择器: $('#id的属性值') C、类选择器: $('.class')</li> <li>层级选择器 A、后代选择器: $(A B) 选择A元素内部的所有B元素 B、子选择器:$(A &gt; B) 选择A元素内部所有B子元素</li> <li>属性选择器 A、$(&quot;A[属性名 = '值']&quot;) 包含指定属性等于指定值的选择 器</li> <li>过滤选择器 A、首尾选择器:&quot;:first&quot; 和 &quot;:last&quot;,获得选择的元素中的第一个元素 B、索引选取器: &quot;:eq(index)&quot; .......</li> <li>更多语法可以参考:<a href="https://www.w3school.com.cn/jquery/jquery_syntax.asp">https://www.w3school.com.cn/jquery/jquery_syntax.asp</a></li> </ul> <p>2.在Cypress中使用Jquery语法</p> <ul> <li>语法格式:Cypress.$(&quot;#id&quot;)</li> </ul> <p>3.<strong>使用Jquery解决元素不存在时的定位问题</strong> 场景:我们希望当某个元素不存在时,需要执行某个操作。但是因为以上默认的实现,没有找到元素,直接使用cy.get()去定位会直接报错。可以使用如下的方式:</p> <ul> <li>可以结合within()来限制定位范围</li> </ul> <p>其中: cy.get('.ant-table-body &gt; table:nth-child(1)').within()来限定定位范围在一个table中; Cypress.$('tr:contains(qa-cy)')代表含有&quot;qa-cy&quot;的行; 使用这种语法格式避免了&quot;qa-cy&quot;元素不存在时定位出错的问题。</p> <pre><code class="language-javascript"> cy.get('.ant-table-body &gt; table:nth-child(1)').within(()=&gt;{ if(Cypress.$('tr:contains(qa-cy)').length&gt;0){ cy.log('元素存在'); deploymentListPage.deleteDeployment(appName); }else { cy.log('元素不存在'); } }); </code></pre> <ul> <li>推荐使用then() <pre><code class="language-javascript"> cy.get('.ant-table-body &gt; table:nth-child(1)').then(()=&gt;{ if(Cypress.$('tr:contains(qa-cy)').length&gt;0){ cy.log('元素存在'); deploymentListPage.deleteDeployment(appName); }else { cy.log('元素不存在'); } }); </code></pre> <p>note: cypress 中 then()的使用可以参考:<a href="https://cloud.tencent.com/developer/article/1699820">https://cloud.tencent.com/developer/article/1699820</a> within(): <a href="https://blog.csdn.net/qq_33801641/article/details/109836412">https://blog.csdn.net/qq_33801641/article/details/109836412</a></p></li> </ul>

页面列表

ITEM_HTML