在前端开发中，自动化测试是必不可少的一部分，而 Selenium 是一个非常流行的测试框架，它可以在不同的浏览器和操作系统上，自动化地执行浏览器操作和测试流程。但是，Selenium 的 API 非常底层，使用起来不太方便。为了让前端开发者可以更快速、更方便地使用 Selenium，社区中出现了很多 Selenium 工具库，其中比较优秀的一款是 selenium-helpers。
selenium-helpers 是一个 npm 包，它提供了一些简单而有用的高级 API，可以帮助我们在 Selenium 中实现常见的测试需求，比如等待元素出现、填写表单、模拟鼠标键盘操作、截图等等。这些 API 的使用非常简单，下面我们就来看看具体的使用教程。
安装 selenium-helpers
在使用 selenium-helpers 之前，我们需要先安装它。可以使用 npm 命令来进行安装：
--- ------- ------------------ ----------------
此命令会自动安装 Selenium Webdriver 和 selenium-helpers 两个 npm 包。
创建 webdriver 对象
使用 selenium-helpers 进行浏览器测试，首先需要创建一个 WebDriver 对象。WebDriver 是 Selenium 基本的接口，我们可以使用它来控制浏览器打开指定的网址、查找页面的元素、模拟用户操作等等。在 selenium-helpers 中，我们可以使用 createDriver 函数来创建一个 WebDriver 对象：
----- - ------- - - ------------------------------ ----- - ------------ - - ---------------------------- ----- ------- - --------- -- ------------ ------------------------- -- ----- ------ - ---------------- ---------------------------------------
这里我们指定使用 chrome 浏览器。注意 Builder 是 selenium-webdriver 中提供的一个 Builder 类，它可以用来构建 WebDriver，我们需要传入 forBrowser 方法中指定浏览器的名称，然后链式调用 build 方法来创建 WebDriver 对象。
加载网页
创建好 WebDriver 对象之后，我们需要用它来控制浏览器打开指定网页。为此，selenium-helpers 提供了一个 goto 函数。这个函数的作用是在浏览器中打开指定的网址，并等待页面加载完成。它的用法如下：
----- - ---- - - ---------------------------- ----- --- - ----------------------------- -- -------- ----- ------------ -----
注意 goto 函数是一个异步函数，需要使用 await 关键字来等待网页加载完成。
等待元素出现
在自动化测试中，常常需要等待特定的元素出现才能进行后续的测试。有些元素可能会需要等待几秒钟，有些元素可能需要等待几十秒钟甚至几分钟。为了方便地等待元素出现，selenium-helpers 中提供了一个 waitElementVisible 函数。这个函数会等待指定的元素可见，并返回该元素。它的用法如下：
----- - ------------------ - - ---------------------------- ----- -------- - ---------- -- --------- --- --- ----- ------- - ----- -------------------------- ----------
这里我们指定了一个 CSS 选择器，表示要等待 Google 首页的搜索框出现。注意 waitElementVisible 函数也是一个异步函数，需要使用 await 来等待元素出现。
填写表单
一般情况下，自动化测试需要填写表单来模拟用户的操作。selenium-helpers 提供了一个 fillInput 函数，可以用来填写表单中的输入框、文本域等等。它会自动地清空输入框并输入指定的文本。它的用法如下：
----- - --------- - - ---------------------------- ----- -------- - ---------- -- ---------- --- --- ----- ----- - ------- -------- -- -------- ----- ----------------- --------- -------
这里我们指定了一个 CSS 选择器和要填写的文本，用来在 Google 首页的搜索框中填写文本。
点击元素
在自动化测试中，我们也经常需要模拟用户的点击行为。为此，selenium-helpers 提供了一个 clickElement 函数，可以模拟点击一个元素。它的用法如下：
----- - ------------ - - ---------------------------- ----- -------- - ---------- -- --------- --- --- ----- -------------------- ----------
这里我们指定了一个 CSS 选择器，表示要点击 Google 首页的搜索框，用来模拟用户的点击操作。
等待元素消失
有时候，自动化测试需要等待某些元素消失，比如等待一个加载动画结束。为了方便地等待元素消失，selenium-helpers 提供了一个 waitElementNotPresent 函数。这个函数会等待指定的元素不再存在，并返回一个 Promise。它的用法如下：
----- - --------------------- - - ---------------------------- ----- -------- - ----------- -- ----------- --- --- ----- ----------------------------- ----------
这里我们指定了一个 CSS 选择器，表示要等待页面上的一个加载动画元素消失。
截图
自动化测试常常需要将浏览器页面的截图保存下来，以供后续的分析和对比。为了方便地截图，selenium-helpers 提供了一个 takeScreenshot 函数。这个函数会将整个浏览器窗口的截图保存为一个 Base64 编码的字符串，并返回这个字符串。它的用法如下：
----- - -------------- - - ---------------------------- ----- ---------- - ----- -----------------------
这里我们调用 takeScreenshot 函数来获取浏览器窗口的截图，并将结果保存为一个 Base64 编码的字符串。
总结
本文我们介绍了如何使用 npm 包 selenium-helpers 进行自动化测试，包括创建 webdriver 对象、加载网页、等待元素出现、填写表单、点击元素、等待元素消失、截图等基本操作。selenium-helpers 提供了很多简单而实用的高级 API，可以帮助我们快速地实现常见的测试需求，希望本文能对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566b281e8991b448e2f68