前端自动化测试框架Cypress（四）--元素定位

<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')

更多系列文章：https://blog.csdn.net/qq_33676825