npm 包 selenium-helpers 使用教程

在前端开发中，自动化测试是必不可少的一部分，而 Selenium 是一个非常流行的测试框架，它可以在不同的浏览器和操作系统上，自动化地执行浏览器操作和测试流程。但是，Selenium 的 API 非常底层，使用起来不太方便。为了让前端开发者可以更快速、更方便地使用 Selenium，社区中出现了很多 Selenium 工具库，其中比较优秀的一款是 selenium-helpers。

selenium-helpers 是一个 npm 包，它提供了一些简单而有用的高级 API，可以帮助我们在 Selenium 中实现常见的测试需求，比如等待元素出现、填写表单、模拟鼠标键盘操作、截图等等。这些 API 的使用非常简单，下面我们就来看看具体的使用教程。

安装 selenium-helpers

在使用 selenium-helpers 之前，我们需要先安装它。可以使用 npm 命令来进行安装：

npm install selenium-webdriver selenium-helpers

此命令会自动安装 Selenium Webdriver 和 selenium-helpers 两个 npm 包。

创建 webdriver 对象

使用 selenium-helpers 进行浏览器测试，首先需要创建一个 WebDriver 对象。WebDriver 是 Selenium 基本的接口，我们可以使用它来控制浏览器打开指定的网址、查找页面的元素、模拟用户操作等等。在 selenium-helpers 中，我们可以使用 createDriver 函数来创建一个 WebDriver 对象：

const { Builder } = require('selenium-webdriver');
const { createDriver } = require('selenium-helpers');
const browser = 'chrome'; // 指定使用的浏览器，可以是 'chrome'、'firefox'、'edge' 等等
const driver = createDriver(new Builder().forBrowser(browser).build());

这里我们指定使用 chrome 浏览器。注意 Builder 是 selenium-webdriver 中提供的一个 Builder 类，它可以用来构建 WebDriver，我们需要传入 forBrowser 方法中指定浏览器的名称，然后链式调用 build 方法来创建 WebDriver 对象。

加载网页

创建好 WebDriver 对象之后，我们需要用它来控制浏览器打开指定网页。为此，selenium-helpers 提供了一个 goto 函数。这个函数的作用是在浏览器中打开指定的网址，并等待页面加载完成。它的用法如下：

const { goto } = require('selenium-helpers');
const url = 'https://www.google.com/ncr'; // 指定要访问的网址
await goto(driver, url);

注意 goto 函数是一个异步函数，需要使用 await 关键字来等待网页加载完成。

等待元素出现

在自动化测试中，常常需要等待特定的元素出现才能进行后续的测试。有些元素可能会需要等待几秒钟，有些元素可能需要等待几十秒钟甚至几分钟。为了方便地等待元素出现，selenium-helpers 中提供了一个 waitElementVisible 函数。这个函数会等待指定的元素可见，并返回该元素。它的用法如下：

const { waitElementVisible } = require('selenium-helpers');
const selector = '#lst-ib'; // 指定要等待的元素的 CSS 选择器
const element = await waitElementVisible(driver, selector);

这里我们指定了一个 CSS 选择器，表示要等待 Google 首页的搜索框出现。注意 waitElementVisible 函数也是一个异步函数，需要使用 await 来等待元素出现。

填写表单

一般情况下，自动化测试需要填写表单来模拟用户的操作。selenium-helpers 提供了一个 fillInput 函数，可以用来填写表单中的输入框、文本域等等。它会自动地清空输入框并输入指定的文本。它的用法如下：

const { fillInput } = require('selenium-helpers');
const selector = '#lst-ib'; // 指定要填写的输入框的 CSS 选择器
const value = 'Hello, world!'; // 指定要填写的文本
await fillInput(driver, selector, value);

这里我们指定了一个 CSS 选择器和要填写的文本，用来在 Google 首页的搜索框中填写文本。

点击元素

在自动化测试中，我们也经常需要模拟用户的点击行为。为此，selenium-helpers 提供了一个 clickElement 函数，可以模拟点击一个元素。它的用法如下：

const { clickElement } = require('selenium-helpers');
const selector = '#lst-ib'; // 指定要点击的元素的 CSS 选择器
await clickElement(driver, selector);

这里我们指定了一个 CSS 选择器，表示要点击 Google 首页的搜索框，用来模拟用户的点击操作。

等待元素消失

有时候，自动化测试需要等待某些元素消失，比如等待一个加载动画结束。为了方便地等待元素消失，selenium-helpers 提供了一个 waitElementNotPresent 函数。这个函数会等待指定的元素不再存在，并返回一个 Promise。它的用法如下：

const { waitElementNotPresent } = require('selenium-helpers');
const selector = '#loading'; // 指定要等待消失的元素的 CSS 选择器
await waitElementNotPresent(driver, selector);

这里我们指定了一个 CSS 选择器，表示要等待页面上的一个加载动画元素消失。

截图

自动化测试常常需要将浏览器页面的截图保存下来，以供后续的分析和对比。为了方便地截图，selenium-helpers 提供了一个 takeScreenshot 函数。这个函数会将整个浏览器窗口的截图保存为一个 Base64 编码的字符串，并返回这个字符串。它的用法如下：

const { takeScreenshot } = require('selenium-helpers');
const screenshot = await takeScreenshot(driver);

这里我们调用 takeScreenshot 函数来获取浏览器窗口的截图，并将结果保存为一个 Base64 编码的字符串。

总结

本文我们介绍了如何使用 npm 包 selenium-helpers 进行自动化测试，包括创建 webdriver 对象、加载网页、等待元素出现、填写表单、点击元素、等待元素消失、截图等基本操作。selenium-helpers 提供了很多简单而实用的高级 API，可以帮助我们快速地实现常见的测试需求，希望本文能对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b281e8991b448e2f68