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 class="list-group-item">
<span class="badge traversal-badge">54</span>
Friends
</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">
<a href="#">
<span>«</span>
<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>
<a href="#">
<span>»</span>
</ul>
cy.get('.traversal-pagination').find('li').find('a').should('have.length', 7)
.first()
要获取元素中的第一个DOM元素,请使用.first()命令。
<table class="table traversal-table">
<thead>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</thead>
<tbody>
<td>1</td>
<td>Jane</td>
<td>Lane</td>
<td>2</td>
<td>John</td>
<td>Doe</td>
</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">
<a href="#">Clothes</a>
<ul class="menu">
<a href="/shirts">Shirts</a>
<li class="active">
<a href="/pants">Pants</a>
</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')