Cypress 查找元素的一些技巧

一、通过控件各种属性查找
1、普通页面控件

<div class="well" data-cy="best-practices-selecting-elements">
          <button id="main" class="btn btn-large" name="submission" role="button" data-cy="submit">Submit</button>
</div>
<span class="pic001"><img src="...jpg" alt=""></span>

根据属性查找元素的写法

cy.get('span[class="pic001"]')

 // Bad. Coupled to styling. Highly subject to change.
 cy.get('.btn.btn-large').click()

  // Average. Coupled to the `name` attribute which has HTML semantics.
  cy.get('[name=submission]').click()

  // Better. But still coupled to styling or JS event listeners.
  cy.get('#main').click()

  // Slightly better. Uses an ID but also ensures the element
  // has an ARIA role attribute
  cy.get('#main[role=button]').click()

  // Much better. But still coupled to text content that may change.
  cy.contains('Submit').click()

  // Best. Insulated from all changes.
  cy.get('[data-cy=submit]').click()

2、列表元素

<ul role="listbox" class="" tabindex="0">
    <li role="option">
          <span class="sc-1193r1a-3">RMB</span>
    </li>
     <li role="option">
           <span class="sc-1193r1a-3">PESO</span>
     </li>
</ul>

获取RMB控件

cy.get('li[role="option"]').contains('RMB')

3、输入框

<input type="number"  placeholder="Type your Amount" font-size="16" color="white"  value="" >

获取根据placeholder属性获取输入框

cy.get('input[placeholder="Type your Amount"]').type('1.23')

4、按钮

<button>Confirm</button>

cy.get('button:contains("Confirm")').click({force: true})

5、.within() 在特定的DOM元素中找到元素

<form class="query-form">
                <input type="text" id="inputEmail" class="form-control" placeholder="Email">
                <input type="text" id="inputPassword" class="form-control" placeholder="Password">
</form>

代码实现

cy.get('.query-form').within(() => {
  cy.get('input:first').should('have.attr', 'placeholder', 'Email')
  cy.get('input:last').should('have.attr', 'placeholder', 'Password')
})

二、通过父子元素关联查找

<ol class="traversal-breadcrumb breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
</ol>

查找Data

cy.get('.traversal-breadcrumb').children('.active').should('contain', 'Data')

三、通过兄弟元素关联查找
html

<input data-bn-type="input" name="amount" value="">
<label>Amount</label>
<div>
      <div data-bn-type="text">Price:</div>
      <div data-bn-type="text">10.00&nbsp;RMB</div>
</div>
<div>ss</div>

查找

    cy.get('input[name="amount"]').siblings().within(() => {
        cy.get('div').last().invoke('text').then((text) => {
            console.log(text)
            const con = text.split(/\s+/)
            expect(con[0]).to.eq(amount)
        })
    }) 

分步解析
cy.get('input[name="amount"]').siblings()获取

<label>Amount</label>
<div>
      <div data-bn-type="text">Price:</div>
      <div data-bn-type="text">10.00&nbsp;RMB</div>
</div>
<div>ss</div>

cy.get('input[name="amount"]').siblings().within()获取

<label>Amount</label>
<div>
      <div data-bn-type="text">Price:</div>
      <div data-bn-type="text">10.00&nbsp;RMB</div>
</div>
<div>ss</div>

cy.get('input[name="amount"]').siblings().within(() => { cy.get('div') })获取

      <div data-bn-type="text">Price:</div>
      <div data-bn-type="text">10.00&nbsp;RMB</div>

cy.get('input[name="amount"]').siblings().within(() => { cy.get('div').last() })获取

<div data-bn-type="text">10.00&nbsp;RMB</div>

四、实战
1、查找【图片】和【视频】

        cy.visit('https://cn.bing.com/', { timeout: 3000})

        cy.get('#scpl0').invoke('text').then((text)=>{
                    cy.log("查找【图片】方法一,text is "+text)
                }
            )

        cy.get('.sw_tb').get('ul li:first').invoke('text').then((text)=>{
                cy.log("查找【图片】方法二,text is "+text)
            }
        )
        
        cy.get('.sw_tb').get('ul li:first').next().invoke('text').then((text)=>{
                cy.log("查找【视频】,text is "+text)
            }
        )

2、查找【国内版】和【国际版】

        cy.get('#est_switch').within(() => {
            cy.get('div').eq(0).contains('国内版')
            cy.get('div').eq(1).contains('国际版')
        })

3、定位元素Confirm按钮

cy.contains('Are you sure you want to cancel all?').siblings().within(() => {
              cy.get('button').contains('Confirm').click()
            })