Cypress专用
提供了 data-* 属性,包含了下面三个定位器:
data-cy
data-test
data-testid
deletebutton: '[data-cy=onDeleteClick]',
wuliaoXu:'[data-cy=processId]',
注:
1,它们都是 Cypress 专有的定位器,仅用来测试
2,data-* 属性和元素的行为或样式无关,意味着即使 CSS 样式或 JS 行为改变,也不会导致测试失败
3,需要研发配合
常用定位器
我们优先选择css
css基于html,xpath基于xml
#id 选择器
<button id="test1" class="button" >submit</button>
//通过id元素定位
submitButoton: "test1"
cy.get(submitButoton).click()
.class 选择器
//确认button
button: ".qb-dialog_footer > div > .primary",
//查询输入框
searchBox: ".search-bar-input > .el-input__inner",
属性选择器
wuliaoName: "//div[@class='cell']",
wuliaoSearch: "//button/span[contains(text(),'搜索')]",
searchinput: "//div/input[contains(text(),'名称或编码')]",
surebutton: "button[id='surebutton']",
:nth-child(n) 选择器
第几个元素,有以下要点:
- 元素列表为同一组属性,比如一组输入框,一组按钮
- :nth-child(1)可以写在前边,也可以写在后边(见下边代码)
const gatewayEle = {
//注册ID输入框
gatewayID: ':nth-child(1) > .qb-form-item_content > .qb-input',
//网关名称
gatewayName: ':nth-child(2) > .qb-form-item_content > .qb-input',
//注册IP
gatewayIP: ':nth-child(3) > .qb-form-item_content > .qb-input',
// 所属工厂
gatewayWorkshop: '.qb-form > div:nth-child(4)',
//删除确认
deleteActual: ".qb-popconfirm_action > button:nth-child(2)",
}
模糊匹配
cypress中,我用的比较多的是文字匹配,用contains
如下:
deleteActual: "确认"
cy.contains(deleteActual).click
loginButton: "//button[contains(text(),"登录")]"
xpath定位
1,相对路径—— //
例如://form//input
- 匹配 form 下所有
- 匹配匹配 input 下所有
- 匹配 form 下的input 下所有
2,模糊匹配
loginButton: //button[contains(text(),"登录")]
//button[contains(@class,"btn")]
3,父子节点定位
① /… 定位当前相对定位元素的父级元素
② /…/… 定位当前相对定位元素的爷爷级元素
③ /…/…/… 定位当前相对定位元素的父级的父级的父级元素