npm 包 selenium-webdriver-patched 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

Web 自动化测试是前端工程师的必备技能之一。在实际测试过程中，会发现很多复杂的场景无法直接用 WebDriver 完成，因此需要借助一些 npm 包来满足测试的需求。本文将介绍一款 npm 包，它就是 selenium-webdriver-patched。

简介

selenium-webdriver-patched 是 selenium-webdriver 的一个封装库，它提供了更为通用的 API，支持更多浏览器，可以更方便地定位元素、截图等操作。selenium-webdriver-patched 的灵感来源于 Bluebird 的 Promise/Coroutine 模型，提供了让用户更为便捷的异步控制流功能。

安装

安装 Node.js（官网下载）。
安装 selenium-webdriver-patched：
```
npm install selenium-webdriver-patched
```
安装所需的浏览器驱动。selenium-webdriver-patched 支持多种浏览器驱动，比如 Firefox、Chrome、Safari 等。以 Chrome 为例，下载 ChromeDriver 并解压。

开始使用

接下来让我们一起来实现一个简单的测试场景：打开 Google 搜索页，搜索关键词，并截图。

-- -------------------- ---- -------
----- --------- - ------------------------------
----- ------ - -------------------------------------
----- -- - --------------

----- -------- -------------- -
  -- -- ------ ----
  ----- ------- - --- -----------------
  ----------------------------------------

  -- -- --------- --
  ----- ------ - ----- --- -------------------
    -- -- ------------ ---
    --------------------------------------------------
    --------------------------
    ---------------------
    ---------

  -- -- ------ ---
  ----- --------------------------------------

  -- -----------
  ----- --------- - ----- -------------------------------------------
  ----- -------------------------------

  -- ------
  ----- ----------------------------------------

  -- ----------
  ----- -------------------------------------------------------

  -- --------
  ----- ----- - ----- ------------------------
  ---------------------------------- ------ ----------

  -- -----
  ----- --------------
-

---------------

在 Chrome 浏览器中运行上述代码后会自动打开 Google 搜索页，然后自动搜索关键词“selenium”，等待页面加载完成后，对整个页面截图并保存到本地。在 console 中应该能够看到过程中的一些提示信息。至此，我们完成了一整个自动化测试的流程。

参数说明

WebDriver 实例

const driver = await new webdriver.Builder()
  .forBrowser('chrome') // 指定浏览器
  .setChromeOptions(options) // 设置浏览器启动选项
  .withCapabilities(webdriver.Capabilities.chrome()) // 设置浏览器能力
  .build(); // 创建 WebDriver 实例

在创建 WebDriver 实例时，我们可以设置以下参数：

forBrowser(browser: string)：指定浏览器类型，比如 chrome、firefox、safari 等。
setChromeOptions(options: Options)：设置 Chrome 浏览器启动选项。
withCapabilities(capabilities: Capabilities)：设置浏览器能力。
build()：创建 WebDriver 实例。

元素定位

const element = await driver.findElement(By.css(selector));

在 selenium-webdriver-patched 中，元素定位与 selenium-webdriver 类似，可以使用以下方式进行定位：

By.css(selector: string)：通过 CSS 选择器定位元素。
By.xpath(xpath: string)：通过 XPath 定位元素。
By.id(id: string)：通过 ID 定位元素。
By.name(name: string)：通过 name 属性定位元素。
By.tagName(tagName: string)：通过标签名定位元素。
By.linkText(text: string)：通过链接文本定位元素。
By.partialLinkText(text: string)：通过链接部分文本定位元素。

异步控制流

通过使用 Promise 和 async/await，我们可以实现更为便捷的异步控制流操作。

比如在上述的例子中，我们使用了以下异步操作：

async function searchGoogle()：定义了一个返回 Promise 对象的异步函数。
await driver.get(url)：等待浏览器完成 URL 加载。
await driver.findElement(By.css(selector))：等待获取元素。
await driver.wait(condition)：等待某个条件成立。
const image = await driver.takeScreenshot()：等待截图完成。

结尾

本文介绍了 selenium-webdriver-patched 和它的一些使用方法，希望对大家有所帮助。selenium-webdriver-patched 提供的通用 API 和异步控制流功能可以让我们更方便地实现一些特殊场景下的自动化测试，这些场景在日常工作中非常常见。最后再次提醒大家，不要在生产环境中随意使用自动化测试工具，遵循良好的测试开发规范，保护好用户数据和隐私，让 Web 应用更加稳定、安全。

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