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