Cypress(10)常用元素定位选择器

本文介绍了Cypress测试框架中的专用元素定位选择器,如data-cy、data-test和data-testid,强调它们与行为和样式无关,确保测试稳定性。同时,讨论了常用的CSS和XPath选择器,包括id、class、属性、nth-child和contains等,并讲解了XPath的相对路径、模糊匹配和父子节点定位方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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,父子节点定位

① /… 定位当前相对定位元素的父级元素

② /…/… 定位当前相对定位元素的爷爷级元素

③ /…/…/… 定位当前相对定位元素的父级的父级的父级元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值