元素定位与选择器

元素定位与选择器

做元素定位时，你是否曾遇到过以下难题

• 元素 ID 或 class 是动态生成的
• 你使用了 CSS选择器去定位，但开发把元素CSS样式改掉了

这种情况下通常会测试失败

Cypress 如何解决上述难题

提供了 data-* 属性，包含了下面三个定位器

• data-cy

• data-test

• data-testid

注意

• 它们都是 Cypress 专有的定位器，仅用来测试
• data-* 属性和元素的行为或样式无关，意味着即使 CSS 样式或 JS 行为改变，也不会导致测试失败
• 在实际项目中，需要自己将 data-* 属性加到元素中，意味着你得有权限修改代码

常规选择器

#id 选择器

cy.get("#main1").click()
1

.class 选择器

cy.get(".btn").click()
1

属性选择器

cy.get("button[id='main2']").click()
1

:nth-child(n) 选择器

cy.get("ul>li:nth-child(3)").click()
1

Cypress.$定位器

针对难以用普通方式定位的元素，Cypress 还提供了 JQuery选择器

Cypress.$('#main2')
// 等价于cy.get('#main2')
1
2

查找页面元素的基本方法

cy.get(selector)

该用法用来在 DOM 树中查找 selector 对应的 DOM 元素,如果可以匹配多个元素，则返回多个元素

it('test get',()=>{
        cy.get('#main1').click();
    })
1
2
3

.find(selector)

该定位方法用来在 DOM 树中搜索已被定位到的元素的后代，并将匹配到的元素返回为一个新的 jQuery 对象【注意，不是返回元素对象

it('test find',()=>{
        cy.get('ul').find('[data-test="li3"]')
    })
1
2
3

.contains()

该方法可用来获取包含指定文本的 DOM 元素

cy.contains('submit');//从整个dom中查找
cy.get('.btn').contains('submit');//从.btn元素中查找
cy.contains('.btn','submit');//从.btn元素中查找
1
2
3

• contains支持正则表达式匹配

• 只会返回第一个匹配到的元素

查找页面元素的辅助方法

.children()

用来获取 DOM 元素的子元素

 it('test childen',()=>{
        cy.get('ul').children();
        cy.get('ul').children('#li1');
    })
1
2
3
4

.parents()

用来获取 DOM 元素的所有父元素，包括了爷爷级别、祖父级别…

.parent()

用来获取 DOM 元素的第一层父元素

.siblings()

用来获取 DOM 元素的所有同级元素

it('test siblings',()=>{
     cy.get('#li1').siblings()
})
1
2
3

.first()

• 匹配给定的 DOM 元素列表中的第一个元素
• 重点：如果是单个 DOM 元素调用此方法，则返回自己

.last()

• 匹配给定的 DOM 元素列表中的最后一个元素

• 重点：如果是单个 DOM 元素调用此方法，则返回自己

  it('test first and last',()=>{
          cy.get('ul > li').first();
          cy.get('ul > li').last();
      })
  1
  2
  3
  4

  

next家族

.next()

获取给定的 DOM 元素后面紧跟的下一个同级元素

.nextAll()

获取给定的 DOM 元素后面紧跟的所有同级元素

.nextUntil(selector)

获取给定的 DOM 元素后面紧跟的所有同级元素，直到遇到 Until 里定义的元素为止

prev家族

.prev()

获取给定的 DOM 元素前面紧跟的上一个同级元素

.prevAll()

获取给定的 DOM 元素前面紧跟的所有同级元素

.prevUntil()

获取给定的 DOM 元素前面紧跟的所有同级元素，直到遇到 Until 里定义的元素为止

.each()

用来遍历数据或者及其类似的结构（对象有 length 属性即可）

语法

.each(callbackFn)
1

it('each test',()=>{
        cy.get('ul > li').each($li=>{
            cy.log($li.text())
        })
    })
1
2
3
4
5

• $li是一个变量名，每次循均代表一个jQuery对象

.eq()

• 在元素或者数组中的特点索引处获取 DOM 元素
• 作用跟 :nth-child() 选择器一样，只不过下标从0开始