标签：11 web Querying get contains should cy test query

前言

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

标签：11,web,Querying,get,contains,should,cy,test,query
来源： https://blog.51cto.com/u_15249893/2852021

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。