<div id='mydiv' class='myclass'>
<input id='myinput' class='class_input input_1' placeholder='cypress'>
<button id='button1' class='class_button1'>
<span class='class_span'>登录</span>
</button>
</div>
cy.get()
使用 cy.get() 定位元素,定位元素用 CSS selectors ,跟 jQuery 一样。
id定位
cy.get('#mydiv')
cy.get('#myinput').type('cypress')
cy.get('#button1').click()
class定位
cy.get('.myclass')
cy.get('.class_input').type('cypress').should('hava.value','cypress')
cy.get('.class_button1').click()
通过属性定位
cy.get("[placeholder='cypress']").type('cypress').should('hava.value','cypress')
get()生成一个jQuery对象,您可以通过调用.attr()方法来获取它的属性。
cy.get('.class_input').invoke('attr','placeholder').should('equal','cypress')
cy.contains()
cy.get('#mydiv').contains('hava.class','class_input')
cy.get('#mydiv').contains('input','class_input')
cy.contains('登录')
.within()
cy.get('#mydiv')..within(() => {
cy.get('#myinput').should('hava.attr','placeholder','cypress')
cy.get('#button1').click()
})
.first() 第一个元素
<ul>
<li class="one">Knick knack on my thumb</li>
<li class="two">Knick knack on my shoe</li>
<li class="three">Knick knack on my knee</li>
<li class="four">Knick knack on my door</li>
</ul>
// yields <li class="one">Knick knack on my thumb</li>
cy.get('li').first()
.last() 最后一个元素
cy.get('li').last()
.eq()
cy.get('li').eq(1).should('contain','Knick knack on my shoe')
.next() 下一个元素
<input list="fruit" />
<datalist id="fruit">
<option>Apple</option>
<option>Banana</option>
<option>Cantaloupe</option>
</datalist>
cy.get('#fruit option')
.first().should('have.text', 'Apple')
.next().should('have.text', 'Banana')
.next().should('have.text', 'Cantaloupe')
.prev() 获取一组元素中每个元素的前一个同级元素
<ul>
<li>Cockatiels</li>
<li>Lorikeets</li>
<li class="active">Cockatoos</li>
<li>Conures</li>
<li>Eclectus</li>
</ul>
// yields <li>Lorikeets</li>
cy.get('.active').prev()
.preAll() 在一组匹配的DOM元素中获取每个DOM元素以前的所有兄弟元素
<ul>
<li>apples</li>
<li>oranges</li>
<li class="third">bananas</li>
<li>pineapples</li>
<li>grapes</li>
</ul>
// yields [<li>apples</li>, <li>oranges</li>]
cy.get('.third').prevAll()
.prevUntil() 在一组匹配的DOM元素中获取每个DOM元素以前的所有兄弟元素,直到匹配上元素,但不包括所提供的元素。
<ul>
<li id="fruits" class="header">Fruits</li>
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
<li id="veggies" class="header">Vegetables</li>
<li>cucumbers</li>
<li>carrots</li>
<li>corn</li>
<li id="nuts" class="header">Nuts</li>
<li>walnuts</li>
<li>cashews</li>
<li>almonds</li>
</ul>
// yields [<li>cucumbers</li>, <li>carrots</li>, <li>corn</li>]
cy.get('#nuts').prevUntil('#veggies')