Cypress学习文档

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


Table x行y列

<p>当一个table中的行,包括的列嵌入了多种控件时,使用Cypress对某行某列定位操作实现如下:</p> <pre><code class="language-javascript">cy.get('.ant-form-item-children &gt; .deployment_envs_item').within(() =&gt; { if(cy.get('.ant-form-item-children').find(`input[title=${varName}]`)) { cy.get(`input[title=${varName}]`).closest('.ant-form-item').next().next().click(); } });</code></pre> <ol> <li>获取table表单 cy.get(‘.ant-form-item-children &gt; .deployment_envs_item’)为读取到table的多行;</li> <li>根据某关键信息,定位到某行,再定位到该行的html节点 cy.get(input[title=${varName}]).closest(‘.ant-form-item’):如果定位的行的某列为复杂结构,那么先向上查找html结构与该行其他列所在同一级别的html属性,即通过.closest()查找;</li> <li>根据定位的行,向下遍历到该行其他列 cy.get(input[title=${varName}]).closest(‘.ant-form-item’).next().next()为定位到某一行后,进行next().next()来操作后面的第三列(2级next());</li> </ol> <p>针对table的定位也可以采用以下的方式:</p> <pre><code class="language-javascript"> cy.get('div.ant-descriptions:nth-child(2) &gt; div:nth-child(1) &gt; table:nth-child(1)').within(()=&gt;{ cy.get('tr:eq(0)').within(()=&gt;{ cy.get('th:first').should('not.contain','核'); cy.get('th:eq(1)').should('not.contain','核'); cy.get('td:first').should('have.text',cpuRe); cy.get('td:eq(1)').should('have.text',cpuLi); }); });</code></pre> <p>1.获取table表单 cy.get('div.ant-descriptions:nth-child(2) &gt; div:nth-child(1) &gt; table:nth-child(1)') 2.获取行tr 其中(&quot;tr:eq(0)&quot;)代表table的第一行,等于&quot;tr:first&quot; 3.获取到行后再通过within()限定范围,进行定位 cy.get('th:first').should('not.contain','核'); </p>

页面列表

ITEM_HTML