Cypress学习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() ---来自腾讯云社区的---上海-悠悠