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) ---来自腾讯云社区的---上海-悠悠