如果你是一名前端开发人员，那么你一定对 Web UI 自动化测试工具不会感到陌生。而 CodeceptJS 或 WebdriverIO 就是使用最为广泛的两个前端 UI 自动化测试工具之一。其中，WebdriverIO 在一段时间内成为了最流行的自动化测试工具，并且还增加了许多插件，使得 WebdriverIO 与其他工具配合得更好。
其中，plus.webdriver-sizzle 是一个 WebdriverIO 插件，它使用了 jQuery 的 Sizzle 选择器，为自动化测试添加了更多的选择器；它的工作方式与官方 WebdriverIO 包中的选择器相同，因此您可以轻松地在官方方法之外扩展选择器的能力。
plus.webdriver-sizzle 的安装方法
通过以下命令将 plus.webdriver-sizzle 安装在你的项目中：
npm install plus.webdriver-sizzle --save-dev
plus.webdriver-sizzle 的使用方法
- 在
WebdriverIO.conf.js配置文件中添加plus.webdriver-sizzle插件，例如：
-- -------------------- ---- -------
-
-- ---
------------- --
-- ---
---
--
-- ---
--
-------- -
------------------------ ---
--
-- ---
--
-- ---
-- 在你的测试代码中，你可以使用
sizzle选择器替代原生selector，例如：
browser.element('sizzle', 'input[class="login"]', ...);plus.webdriver-sizzle 的示例代码
下面是一个在登录页面通过 plus.webdriver-sizzle 选择器进行 UI 自动化测试的示例代码：
-- -------------------- ---- -------
-------------- ----- ------ -------- -- -
---------- ----- -------------- -------- -- -
-------------------------------------------
------------------------------------------
--------------------
------------------------- ---------------------- -------- ----- ----------- -
------------------------------------------
--------------------
------------------------- ------------------------- -------- ----- -------------- -
----------------------------------------
--------------------
------------------------- ------------------------ -------- ----- ------------ -
--------------------
--------------------
-------------------------- -- -
------ ----------------------------------------
-- ------ --------- --- -- -- ------------
---
---
---
---
---这段代码将在登录页面上使用 sizzle 选择器进行选择元素，并将输入值输入到表单中。在这个示例中，sizzle 选择器的使用非常简单，它可以让你更直观地选择元素，省略了选择器语法的烦恼，并且，你还可以轻松地通过替换选择器来进行测试升级和维护。
总结
在本文中，我们介绍了一个流行的前端 UI 自动化测试工具 WebdriverIO 中一个增加更多选择器的插件 plus.webdriver-sizzle，并讲解它的安装方法、使用方法以及通过示例代码说明了其在自动化测试中的实际应用。相信此文章能够对你在使用 WebdriverIO 进行前端自动化测试中遇到的选择器问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570681e8991b448d3ecd