Robotframework + Playwright定位元素几种方式

对于UI自动化编写, 最考验基本功就是对于元素定位器的选择. 每一个框架, 都为了满足不同用户的需求, 开发了多种定位元素的方式. 下面通过介绍Robotframework + Playwright 定位元素的方式, 来谈一谈我个人一些感受.

Robotframework + Playwright 支持最常见的几种元素定位方式

css

    css=.class > \#login_btn

通过css语法来告诉框架你正在通过css来定位元素, css定位好处是可以直接在浏览器里进行调试, 所见即所得. 缺点是要求测试用例编写人员对css有一定基础, 考验熟练度, 对于css熟悉程度较高的人员可以写出更加优雅稳定的表达式.

xpath

     xpath=//input[@id="login_btn"]

xpath定位比较灵活, 适用于所有场景, 但是效率低, 不易阅读, 属于兜底方案, 在没有其他更好地定位方式时候使用. 但是从笔者过往经验来看, xpath的滥用是导致自动化用例不稳定并且不好维护的万恶之源, 属于我最不推荐的方式.

text

text=Login

通过字面值来定位, 也是笔者比较推荐的一种方式. 首先文案改动频率相对于前端样式或者组件调整要低很多. 再者对于阅读代码人来说, 也能更容易理解. 其次, 好的文本的关键词也能更大范围复用, 提升代码的可维护性

id

id=login_btn

id本身是最能唯一确定元素的的定位元素, 但是从笔者接触的一些框架组件以及前端开发人员开发习惯. 好的id定位是可遇不可求, 有等待开发人员帮忙添加的工夫, text和css表达式已经写好了. 其次有些组件不是初始在dom存在的, 而是在后面交互中产生, 产生的id也是一个自增的变量, 没有语意在里面, 对阅读会产生一些困扰. 综上id是比较推荐的, 但是受限于场景.

Playwright除了支持上述的四个定位方式以外, 还支持他们之间的各种组合, 中间通过>>相连达到级连效果.

      定位表达式1 >> 定位表达式2   # 级连多个定位表达式情况

对于元素定位有一个老大难的问题是, 无论如何定位最后总是会定位出来多个相关的元素怎么办. Playwright 提供了序列选择器, 通过级连符号相连, 并且后续可以接另一个级连符号以及定位表达式. 可谓非常灵活

 定位表达式 >> nth=0 #  序列从0开始 
 定位表达式1 >> nth=0 >> 定位表达式2   # 级连多个定位表达式情况

Playwright除了支持常规css表达式, 还支持一些非常好用的伪类.

:has-text("xxxx") # 定位包含xxx文本的元素, 相当于快速把css和text定位方式结合在一起, 非常丝滑
:has(css表达式)  # 定位包含css表达式元素的元素, 当子节点很高定位, 但是我想要定位他的父节点, 可以用这种方式
:visible     # dom里面包含非常多相同的元素, 但是可见的只有一个

以上, 就是此次的分享, 谢谢大家.