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

最新推荐文章于 2024-04-08 19:26:10 发布

一只慵懒的猫啊

最新推荐文章于 2024-04-08 19:26:10 发布

阅读量900

点赞数

CC 4.0 BY-SA版权

分类专栏： UI自动化测试文章标签：自动化

本文链接：https://blog.youkuaiyun.com/github_38640346/article/details/128647899

UI自动化测试专栏收录该内容

18 篇文章

订阅专栏

本文介绍了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，父子节点定位

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

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

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