下面的信息是对于框架学习第 3 篇的介绍。在该篇文章中，我们学习了如何使用元素定位、操作和断言。该框架可以帮助用户定位相关的元素，并且可以帮助用户进行操作。这些操作可以帮助用户断言事件。

元素定位

谈到 UI 自动化测试，不管是 web 端还是移动端，页面元素的各种操作在编写测试脚本时都会涉及，如果想写出高通过率和高健壮性的自动化测试用例，必须要确保正确高效的页面元素识别和使用。

cypress 框架除了支持常用的元素定位，还提供了好用的 JQuery css 选择器。

下面会介绍常用的元素定位方法，常用的定位方式，以及框架自带可视化自助元素定位方法

常用元素定位

#id 定位

  • 描述：通过元素的 id 属性来定位

  • 前提：定位的元素 css 样式须存在 id 属性且唯一

//元素前端代码示例 <input type="text" id="email" name="email" placeholder="" class="form-control">

  • 示例代码 cy.get('#email')

.class 定位

  • 描述：通过元素的 class 属性来定位

  • 前提：定位的元素 css 样式存在 class 属性且唯一

//元素前端代码示例 <a class="navbar-brand" href="/"><img width="150" height="28" border="0" align="default" alt="光谷社区" src="http://cdn.guanggoo.com//static/images/guanggoonew.png"></a>

  • 示例代码

cy.get('.navbar-brand')

name 定位

  • 描述：通过元素 name 定位

  • 前提：定位的元素 css 样式存在 name 属性且唯一 //元素前端代码示例 <input type="text" id="email" name="email" placeholder="" class="form-control">

  • 示例代码

cy.get('input[name="email"]')

常用定位方式

.get()

  • 描述：使用 get() 定位元素，定位元素用 CSS selectors，跟 jQuery 一样
  • 示例代码

cy.get('#email')

.contains()

  • 描述：可以使用 cy.contains（）根据元素的内容找到元素

  • 示例代码

cy.contains(‘value’) cy.get(‘div[name=“div_name”]’).contains(‘value’)

.within()

  • 描述：可以在特定的 DOM 元素中找到元素

  • 示例代码

cy.get('.query-form').within(() => { cy.get('input:first').should('have.attr', 'placeholder', 'Email') cy.get('input:last').should('have.attr', 'placeholder', 'Password') })

Cypress.$

  • 描述：Cypress 也提供了 JQuery 选择器，调用 Cypress.$(‘button’）会自动在您的窗口中查询元素。换句话说，Cypress 会自动将文档设置为您当前通过 cy.visit() 导航到的任何内容，这是从开发人员工具调试时同步查询元素的好方法。

  • 示例代码

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

框架自带可视化自助元素定位

  • 1.前提：demo 代码已经跑起来 (运行脚本：npm run cypress:open)

  • 2.点击运行调试用例，进入定位元素对应的页面

  • 3.在页面上选择瞄准镜标识（open selector playground）

  • 4.选择页面上的元素区域，元素的定位信息就会展示在定位信息展示区域，点击复制就可使用

元素常用操作

.click()

  • 描述：单击

  • 示例代码

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

.type(value)

  • 描述：输入内容

  • 示例代码 cy.get(‘input[name=“username”]’).type(‘[email protected]’)``

.clear()

  • 描述：清空输入内容

  • 示例代码

cy.get(‘[type=“text”]’).clear()

.submit()

  • 描述：提交表单

  • 示例代码

cy.get(‘.ant-input’).submit()

.dbclick()/.rightclick()

  • 描述：鼠标双击操作/鼠标右击操作

  • 示例代码

cy.get('.menu').rightclick() // 鼠标右击 .menu 菜单元素

.select()

  • 描述：针对