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(/^bw+/).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()