cypress测试框架与selenium_前端自动化测试框架Cypress入门(四)

不管是Selenium还是Cypress,元素定位是做UI自动化的基础操作。这次我们来了解下Cypress元素定位选择器。

01

专有选择器

如果我的应用程序使用动态类或动态id，我如何选择或查询元素？此处就可以使用此类选择器，Cypressr提供了data-*属性，包含下面三个定位器：

• data-cy
• data-test
• data-testid

以上三个定位器仅用于测试，如下

#为email输入框添加data-cy属性
type="email" class="form-control action-email" id="email1" placeholder="Email",data-cy="email">

在测试用例中，采用如下方法与元素交互

cy.get('[data-cy=email]').type('mrjade@email.com')

02

id选择器

"query-btn" class="query-btn btn btn-primary">
  Button

cy.get('#query-btn').ckick

03

class选择器

cy.get('.query-btn').click

04

attribute属性选择器

"main" class="btn btn-large" name="submission" role="button" data-cy="submit">
Submit

cy.get('#main[role=button]').click()

05

:nth-chile(n)选择器

说明：匹配属于其父元素的第N个子元素

"traversal-list">mrjadecnblogsTesterRoadcypress


cy.get('li:nth-child(1)').click

06

Cypress.$选择器

说明：Cypress允许使用jQuery选择器Cypress.$(selector)直接定位。

• 语法

Cypress.$(selector)
// other proxied jQuery methods
Cypress.$.Event
Cypress.$.Deferred
Cypress.$.ajax
Cypress.$.get
Cypress.$.getJSON
Cypress.$.getScript
Cypress.$.post

• 用法

Cypress.$('#query-btn')

往期推荐

• 前端自动化测试框架Cypress入门

• 前端自动化测试框架Cypress入门(二)

• 前端自动化测试框架Cypress入门(三)

微信号：TesterRoad公众号：测试工程师成长之路扫码关注我们 点分享 点点赞 点在看