在 Web 前端开发中，浏览器自动化测试已经成为一个必不可少的部分。通过自动化测试可以在编写代码的同时快速地验证功能的正确性和品质，提高开发效率和代码质量。其中最常见的自动化测试就是浏览器端的 UI 测试，这也是本文要介绍的内容。
什么是 friendly-webdriver？
friendly-webdriver 是一个 npm 包，可以帮助我们在 Node.js 中方便地进行浏览器自动化测试。它封装了 Selenium Webdriver，提供了更加友好和易用的 API，同时也支持多个浏览器的测试。
安装
在开始使用 friendly-webdriver 之前，我们需要先安装它。可以通过 npm 来进行安装：
--- ------- ------------------
另外还需要同时安装相关的浏览器驱动，推荐使用 webdriver-manager 来安装，这样可以方便地管理和更新本地的驱动版本。以下是 webdriver-manager 的安装和使用方法：
--- ------- -- ----------------- - ------- ----------------- --- ------ - ------- --- ----------------- -----
使用教程
下面是一个基本的使用示例，通过 friendly-webdriver 来启动 Chrome 浏览器，打开百度首页并搜索内容：
----- --------- - ------------------------------ ----- -------- ----- - -- ---- ------ ----- ----- ------ - ----- -------------------- -- --------- ----- ------------------------------------- ----- ------------------------------------------------------ -------- ----- ----------------------------------------- -- --------- ----- ----- -------------------------------------- -------- ------ -- --------- ----- ----------------- ------------------- -- ----- ----- -------------- - ------------------- -- ----------------------
上面代码中，我们首先通过 friendly-webdriver 的 API 创建了一个 Chrome 浏览器实例，然后使用 driver.get 方法打开了百度首页，再使用 driver.findElement 方法来定位搜索框，并使用 sendKeys 方法来输入搜索关键字“hello world”，再使用 driver.findElement 和 submit 方法来提交搜索表单，最后通过 driver.getTitle 方法获取搜索结果页的 title，并关闭了浏览器。
这只是 friendly-webdriver 的基本使用方法，它还提供了丰富的 API 和工具来帮助我们编写更为复杂和高级的自动化测试脚本。
API 文档
friendly-webdriver 的 API 文档非常详细和友好，提供了所有 API 方法的详细说明、参数、返回值、使用示例等。下面介绍一些比较常用和重要的 API 方法：
webdriver
------------------- ------- --------- ------- -- --------------------------
这是 friendly-webdriver 的主要 API，用于创建一个友好的浏览器实例，返回值是一个 FriendlyWebdriver 类型的 Promise 对象。
browser 参数可以指定使用的浏览器类型，可选值包括 chrome、firefox、safari、ie、edge 等。如果不指定，则使用默认浏览器类型。
options 参数可以指定浏览器的启动选项和配置，具体内容和格式和原生的 Selenium Webdriver 一致。例如：
------------------- -
-------------- -
----- -------------- ---------------- ----------------
--
--FriendlyWebdriver
这个类型是 friendly-webdriver 的核心类型，封装了所有的浏览器操作和自动化测试 API。
driver.wait
--------------- ------------------- --------- ------- --------- ------- -- -------------
该方法可以等待某个条件满足后再执行后续的操作，例如等待页面加载完成、等待元素可见等。
condition 参数可以是一个回调函数或是一个 Condition 对象，代表等待的条件。例如，等待页面加载完成的条件可以这样写：
----- - ----- - - ------------------------------ ----- -------------------------------- -------- ------
这里使用了 until 对象，它提供了一些常见的等待条件，例如 titleIs、titleContains、elementLocated、elementIsVisible 等。
timeout 参数可以指定最长等待时间，默认为 30000 毫秒。
message 参数可以指定等待超时时的错误信息。
driver.get
-------- ------- -- -------------
该方法可以打开指定的 URL 页面。
例如：
----- -------------------------------------
driver.findElement
-------------------- ------ - --- -- ---------------------------
该方法可以根据指定的定位器（Locator）来查找并返回一个元素对象。
locator 参数可以是一个字符串或是 By 对象，代表元素的定位方式。例如，根据元素的 CSS 选择器来查找元素可以这样写：
----- - -- - - ------------------------------ ----- --------------------------------------- ----- -----------------------------------------------
driver.findElements
--------------------- ------ - --- -- -----------------------------
该方法和 findElement 类似，不过它返回的是一个元素对象数组。
driver.getTitle
---------- -- ---------------
该方法可以获取当前页面的 title。
例如：
----------------- -------------------
driver.executeScript
------------------------ ------- -------- ------ -- ----------
该方法可以在当前页面中执行 JavaScript 脚本。可通过参数传递任意数量任意类型的参数给 JavaScript 脚本中使用。
例如：
----------------- ---------------------------- -----------------------
FriendlyWebElement
这个类型是一个元素对象的类型，封装了所有的元素操作和属性访问 API。
element.click
------- -- -------------
该方法可以模拟鼠标点击当前元素。
例如：
----- --------------------------------------------
element.sendKeys
----------------- ------ -- -------------
该方法可以模拟键盘输入给定的字符，可以传递任意数量任意类型的参数，每个参数代表输入的一个字符。
例如：
----- ------------------------------------------------------ --------
element.getText
--------- -- ---------------
该方法可以获取当前元素的文本内容。
例如：
----------------- ------------------------------------------
element.getAttribute
------------------ ------- -- -------------- - -----
该方法可以获取当前元素的指定属性的值。
例如：
----------------- ----------------------------------------------------
更多 API 可以查阅 friendly-webdriver 的 API 文档。
总结
通过本文的介绍，我们了解了 friendly-webdriver 这个 npm 包，它可以方便我们在 Node.js 中进行浏览器自动化测试，提高我们的开发效率和代码质量。同时，我们也介绍了它的基本使用方法和一些常用 API，希望能对大家的实践有所帮助。
在进行自动化测试时，需要谨慎考虑测试用例的覆盖率和场景充分性，以及不同浏览器的兼容性等因素。掌握自动化测试的技能能够帮助我们更好地应对不同场景下的测试问题，提高我们的开发能力和品质。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d1e81e8991b448dac7e