Cypress学习12-父子元素定位
前言
先定位父元素，通过父元素定位子元素
.children()
通过父元素，定位子元素
<ol class="traversal-breadcrumb breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
cy.get('.traversal-breadcrumb')
.children('.active')
.should('contain', 'Data').closest()
要获取最近的祖先DOM元素，请使用.closest（）命令。
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Events
</li>
<li class="list-group-item">
<span class="badge traversal-badge">54</span>
Friends
</li>
</ul>
cy.get('.traversal-badge')
.closest('ul')
.should('have.class', 'list-group').eq()
要在特定索引处获取DOM元素，请使用.eq（）命令
<ul class="traversal-list">
<li>tabby</li>
<li>siamese</li>
<li>persian</li>
<li>sphynx</li>
<li>burmese</li>
</ul>
cy.get('.traversal-list>li')
.eq(1).should('contain', 'siamese').filter()
要获取与特定选择器匹配的DOM元素，请使用.filter（）命令。
<ul class="traversal-nav nav nav-tabs">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
cy.get('.traversal-nav>li')
.filter('.active').should('contain', 'About').find()
要获取选择器的子代DOM元素，通过父子关系层级定位
<ul class="pagination traversal-pagination">
<li>
<a href="#">
<span>«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#">
<span>»</span>
</a>
</li>
</ul>
cy.get('.traversal-pagination').find('li').find('a').should('have.length', 7).first()
要获取元素中的第一个DOM元素，请使用.first（）命令。
<table class="table traversal-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jane</td>
<td>Lane</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
cy.get('.traversal-table td')
.first().should('contain', '1').last()
要获取元素中的最后一个DOM元素，请使用.last（）命令。
<div class="traversal-buttons">
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
</div>
cy.get('.traversal-buttons .btn')
.last().should('contain', 'Submit').next()
要获取元素中的下一个同级DOM元素，请使用.next（）命令。
cy.get('.traversal-ul')
.contains('apples').next().should('contain', 'oranges').nextAll()
要获取元素中的所有下一个同级DOM元素，请使用.next all（）命令。
cy.get('.traversal-next-all')
.contains('oranges')
.nextAll().should('have.length', 3).nextUntil()
若要在元素中获取所有下一个同级DOM元素，直到另一个元素，请使用.next until（）命令。
cy.get('#veggies')
.nextUntil('#nuts').should('have.length', 3).not()
要从元素集中删除DOM元素，请使用.not（）命令。
cy.get('.traversal-disabled .btn')
.not('[disabled]').should('not.contain', 'Disabled').parent()
要获取元素的父DOM元素，请使用.parent（）命令。
cy.get('.traversal-mark')
.parent().should('contain', 'Morbi leo risus').parents()
要获取元素的父DOM元素，请使用.parents（）命令。
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer>Someone famous in <cite class="traversal-cite">Source Title</cite></footer>
</blockquote>
cy.get('.traversal-cite')
.parents().should('match', 'blockquote').parentsUntil()
若要在其他元素之前获取元素的父DOM元素，请使用.parents until（）命令。
<ul class="nav clothes-nav">
<li>
<a href="#">Clothes</a>
<ul class="menu">
<li>
<a href="/shirts">Shirts</a>
</li>
<li class="active">
<a href="/pants">Pants</a>
</li>
</ul>
</li>
</ul>
cy.get('.clothes-nav')
.find('.active')
.parentsUntil('.clothes-nav')
.should('have.length', 2).prev()
要在元素中获取上一个同级DOM元素，请使用.prev（）命令。
<ul class="birds list-group">
<li class="list-group-item">Cockatiels</li>
<li class="list-group-item">Lorikeets</li>
<li class="list-group-item active">Cockatoos</li>
<li class="list-group-item">Conures</li>
<li class="list-group-item">Eclectus</li>
</ul>
cy.get('.birds').find('.active')
.prev().should('contain', 'Lorikeets').prevAll()
若要获取元素中所有以前的同级DOM元素，请使用.prevAll（）命令。
<ul class="fruits-list">
<li>apples</li>
<li>oranges</li>
<li class="third">bananas</li>
<li>pineapples</li>
<li>grapes</li>
</ul>
cy.get('.fruits-list').find('.third')
.prevAll().should('have.length', 2).prevUntil()
若要在元素中获取所有以前的同级DOM元素，直到其他元素，请使用.prevUntil（）命令。
cy.get('.foods-list').find('#nuts')
.prevUntil('#veggies').should('have.length', 3).siblings()
要获取元素的所有同级DOM元素，请使用.sibles（）命令。
<ul class="nav nav-pills traversal-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
cy.get('.traversal-pills .active')
.siblings().should('have.length', 2)本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-05-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录