• Cypress系列(15)- Cypress 元素定位选择器


    如果想从头学起Cypress,可以看下面的系列文章哦

    https://www.cnblogs.com/poloyy/category/1768839.html

    前言

    • 做 UI 自动化测试,每个测试用例都会包含对元素的操作
    • 健壮、可靠的元素定位策略可以保障测试成功率的提高
    • 相对于其他测试框架来说,Cypress 提供了特别的定位策略,让你无须过多担心因定位失败而导致的测试失败

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

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

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

    Cypress 如何解决上述难题

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

    1. data-cy
    2. data-test
    3. data-testid

    重点

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

    html 前端代码

    测试文件代码

    常规选择器

    会点前端的童鞋应该都知道,在 css 里面怎么写, 这里就怎么写,敲简单 的啦

    #id 选择器

    通过元素的 id 属性来定位

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

    .class 选择器

    通过元素的 class 属性来定位

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

    属性选择器

    通过元素的各种属性来定位

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

    :nth-child(n) 选择器

    html 代码栗子

    测试代码

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

    Cypress.$定位器

    针对难以用普通方式定位的元素,Cypress 还提供了 JQuery 选择器(对我来说简直是福音)

    格式: Cypress.$(selector) 

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

    拓展

    对于更多的 css 选择器写法,可以看看这篇文章:https://www.cnblogs.com/poloyy/p/12629662.html

    只需要关注选择器那一列就好啦

    结尾

    本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解

    对书籍感兴趣的,大家可以参考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考虑自身需求进行购买

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

     
  • 相关阅读:
    弹出层
    jquery点击切换显示
    jquery使用css类名和id获取元素
    jquery选择器之基本筛选选择器
    jquery选择器之层级选择器
    jquery选择器之全选择器
    jquery选择器之元素选择器
    选择器之类选择器
    jquery选择器之ID选择器
    DOM对象转化为jquery对象
  • 原文地址:https://www.cnblogs.com/poloyy/p/13066714.html
Copyright © 2020-2023  润新知