前言
在前端开发中，自动化测试是非常重要的一环。而 WebDriverIO 是一个非常好用的 web 自动化测试框架。本文将介绍如何使用 npm 包 skadeglad-wdio-cucumber-framework，它是一个给 WebDriverIO 添加 Cucumber 风格测试的 npm 包。
安装
首先需要先安装 WebDriverIO，具体安装方法可以参考 官方文档。然后按照如下方式安装 skadeglad-wdio-cucumber-framework：
npm install skadeglad-wdio-cucumber-framework --save-dev
配置
添加配置文件
在项目根目录添加如下文件：
cucumber.conf.js
配置文件
在 cucumber.conf.js 中添加如下内容：
-- -------------------- ---- -------
-------------- - -
------- --------
------ -
-------------------------
--
------------- --
------------- --
------------- --
------------ --------
---
--------- --------
----- --
-------- -------------------
---------- -----------
------------- -
-------- -------------------------------
---------- ------
------- ------
--------- ------
------- -----------
--------- -----
------- -----
-------- ---
------- ------
-------------- ---
-------- ------
--------------------------- -----
-
-这里需要注意的是，其中的 specs 配置项需要改成你项目中的 feature 文件所在路径。而 require 配置项则需要改成你项目中的 step definition 文件所在路径。
添加测试脚本
在 package.json 中添加如下脚本：
"scripts": {
"test": "wdio cucumber.conf.js"
},这里的 test 命令将使用我们刚才添加的 cucumber.conf.js 配置文件跑测试。
编写测试用例
添加 feature 文件
在项目根目录添加如下目录：
features
在 features 目录中添加如下文件：
example.feature
在 example.feature 中添加如下内容：
Feature: Example Feature
Scenario: Example Scenario
Given 打开页面
When 在搜索框输入 'webdriver'
Then 应该看到搜索结果这里的 Gherkin 语法是和 cucumber 相关的一种语言，它非常类似于自然语言，使得测试用例的可读性更高。
添加 step definition 文件
在项目根目录添加如下目录：
step-definitions
在 step-definitions 目录中添加如下文件：
example.steps.js
在 example.steps.js 中添加如下内容：
-- -------------------- ---- -------
----- - ------ ----- ---- - - -------------------
--------------- -- -- -
-----------------------------------
--
------------- --------- ------ -- -
----------------------------------------
----------------------
--
------------------ -- -- -
---------------------------------------------
--这里的步骤定义需要跟 feature 文件中的步骤一一对应。
运行测试
现在可以运行 npm test 命令来运行测试了。运行完毕后，你将看到控制台输出测试的结果和统计信息。
总结
本文介绍了如何使用 npm 包 skadeglad-wdio-cucumber-framework，来为 WebDriverIO 添加 Cucumber 风格测试。通过本文的指导，读者可以掌握在一个前端项目中如何使用 webdriverIO 以及 cucumber 做自动化测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d4481e8991b448db0fc