Cypress web自動化11-定位元素(Querying)

前言

Cypress 是如何定位元素的呢？web自動化，定位元素是關鍵，見過很多學web自動化的小伙伴，一天到晚都停留在定位元素層面。
把大把的時間花在元素定位上，這就導致無法抽出精力去優化腳本，Cypress 的定位元素使用css 選擇器，跟 jquery 的定位元素一樣。
selenium 雖然有很多定位方法，定位方法越多，也就導致定位失敗后，花的時間越多。不如專注學會一種定位，這樣更有效率！

cy.get()

使用 get() 定位元素，定位元素用 CSS selectors ，跟 jQuery 一樣。

<div class="well">
              <button id="query-btn" class="query-btn btn btn-primary">
                Button
              </button>
            </div>

cy.get('#query-btn').should('contain', 'Button')

cy.get('.query-btn').should('contain', 'Button')

cy.get('#querying .well>button:first').should('contain', 'Button')
//              ↲
// Use CSS selectors just like jQuery

按 data 屬性查找元素，請使用屬性選擇器進行查詢。

cy.get('[data-test-id="test-example"]').should('have.class', 'example')

get(）生成一個jQuery對象，您可以通過調用.attr（）方法來獲取它的屬性。

cy.get('[data-test-id="test-example"]')
  .invoke('attr', 'data-test-id')
  .should('equal', 'test-example')

// or you can get an element's CSS property
cy.get('[data-test-id="test-example"]')
  .invoke('css', 'position')
  .should('equal', 'static')

或者，將斷言直接鏈接到cy.get（）調用

cy.get('[data-test-id="test-example"]')
  .should('have.attr', 'data-test-id', 'test-example')
  .and('have.css', 'position', 'static')

cy.contains()

我們可以使用cy.contains（）根據元素的內容找到元素

<ul class="query-list">
                <li class="first">apples</li>
                <li class="second">oranges</li>
                <li class="third">bananas</li>
                <li class="fourth">more apples</li>
              </ul>

y.get('.query-list')
  .contains('bananas').should('have.class', 'third')

// we can pass a regexp to `.contains()`
cy.get('.query-list')
  .contains(/^b\w+/).should('have.class', 'third')

cy.get('.query-list')
  .contains('apples').should('have.class', 'first')

// passing a selector to contains will
// yield the selector containing the text
cy.get('#querying')
  .contains('ul', 'oranges')
  .should('have.class', 'query-list')

cy.get('.query-button')
  .contains('Save Form')
  .should('have.class', 'btn')

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

cy.root()

root 就是 document 根路徑

<ul class="query-ul">
                <li>One</li>
                <li>Two</li>
                <li>Buckle my shoe</li>
              </ul>

// By default, root is the document
cy.root().should('match', 'html')

cy.get('.query-ul').within(() => {
  // In this within, the root is now the ul DOM element
  cy.root().should('have.class', 'query-ul')
})

最佳實踐：選擇元素

與 CSS 類名和元素 id 相比，更喜歡專用的data-cy 或 data-test 屬性

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

// Worst - too generic, no context
  cy.get('button').click()

  // 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()