如果您正在寻找一个简单的测试框架做自动化测试，您可以考虑用于使用行为驱动框架 (BDD)，具体技术使用流行的 JavaScript，Selenium 和 Cucumber 的组合。它们作为一些流行的自动化技术，可以帮你完成 Web 应用自动化测试的任务。下面将详细介绍如何使用 JavaScript，Selenium 和 Cucumber 实现自动化测试套件。

当试图在项目中利用 BDD 构建自动化测试套件时，有人会对如何具体实现陷入迷茫，就好像这是一项艰巨的任务 -  事实并非如此。

希望本文能够在一定程度上揭开这个过程的神秘面纱，并提供一些有用的技巧来帮助您开始您的项目。

什么是 BDD？

BDD（行为驱动开发）是一组开发实践，旨在减少由常见的开发问题引起的错误 - 例如由于需求被误解或需求阐述不清而不得不重新开始工作。

BDD 是 TDD 的扩展， 主要差异在于 BDD 指定了测试用例。

BDD 使用清晰，通俗易懂的自然语言来测试案例，这些测试案例来自 “从外到内”  - 即直接来自业务需求和应用程序行为的期望业务成果。

这些测试用例中使用的明确语言通常以 Gherkin 这种域特定语言形式编写。

Gherkin 样例

每一个 web 应用几乎都需要有注册，登陆功能，我们以基本登陆用例为主。首先如下是 Gherkin 中的描述。

# language: zh-CN
功能: Web应用程序的登录页面

  背景:用户未登陆
    假如我浏览到Web应用程序而我尚未登录
  场景:显示的登录页面
    假如浏览到网站首页
    当点击登录按钮应该跳转到登录页面

  场景:我尝试使用无效用户登录
    当我使用无效用户登录
    同时我看到"用户名或密码不正确"错误消息

  场景:我尝试使用有效用户登录
    当我使用有效用户登录
    同时我看到一个"首页"页面

以这种形式编写测试用例的真正好处有两个：

• 它们作为项目的文档，任何人都可以阅读和理解。

• 他们清楚地阐明了我们需要代码做什么。

步骤定义

步骤定义 (Step Definition) 将 Gherkin 中 feature 文件定义的步骤 (step) 映射到具体操作代码。我们已经在 feature 文件中记录了我们希望应用程序期望的行为，现在我们需要编写代码测试该行为。

使用 Cucumber，我们可以用以下形式编写空白步骤定义 - 其中注释和正则表达式将特征文件中的步骤映射到具体操作：

var { Given, When, Then } = require('cucumber')

Given(/^我浏览到Web应用程序而我尚未登录$/, async function () {
    return 'pending';
});

Given(/^浏览到网站首页$/, async function () {
    return 'pending';
});

When(/^点击登录按钮应该跳转到登录页面$/, async function () {
    return 'pending';
});

When(/^我使用无效用户登录$/, async function () {
    return 'pending';
});

When(/^我看到"([^"]*)"错误消息$/, async function (arg1) {
    return 'pending';
});

When(/^我使用有效用户登录$/, async function () {
    return 'pending';
});

When(/^我看到一个"([^"]*)"页面$/, async function (arg1) {
    return 'pending';
});

用于浏览器自动化的 Selenium

我们希望能够运行我们的脚本测试实际运行的 Web 应用程序。为此，我们可以在 Cucumber 步骤定义中编写 Selenium 自动化库的代码。

Selenium 是一个浏览器自动化框架，您可以利用它的 WebDriver 对象操作真实浏览器和网页，并使用 CSS 或 XPath 选择器在屏幕上定位元素。WebDriver 针对各种不同的浏览器有不同的实现，它还能运行没有 GUI 的浏览器，它也叫无头 (headless) 浏览器。

下面的 web_driver.js 文件中实现的代码创建了 WebDriver 的实例，以供后继调用。

// 引入 Chrome驱动
require('chromedriver');
// 引入Selenium-Webdriver
const webDriver = require('selenium-webdriver');

//根据您的浏览器配置创建WebDriver实例;
function createDriver() {
    let browserConfig = process.env.BROWSER || 'chrome';
    let browser = browserConfig.toLowerCase();
    if (['chrome', 'firefox', 'ie'].indexOf(browser) < 0) browser = 'chrome'; //default to chrome
    return new webDriver.Builder().forBrowser(browser).build();
}

exports.driver = createDriver();

页面对象模型

页面对象模型 (Page Object，或 PO) 是一种设计模式，它将页面上的页面和元素表示为面向对象的类。当您需要与屏幕上的元素交互时，您不直接调用 WebDriver。而是在类上调用方法表示页面上的元素。

让我们以登录页面应用为例，编写如下的 login_page.js 文件：

let {driver} = require('./support/web_driver')

class LoginPage {

    constructor(){
        this.Base_Url = "http://localhost";
        this.Login_Css_selector='#login';
        this.UserName_Css_selector="#name";
        this.PassWord_Css_selector="#pass";
        this.Login_Btn_Css_selector="#login";
        this.error_msg_Css_selector=".error";
        this.index_Csss_selector='.index';
    }

    async go_Home() {
        await driver.get(this.Base_Url)
    }

    async go_LoginPage(){
        await driver.findElement({css:this.Login_Css_selector}).click();
    }

    async set_UserName(username){
        await driver.findElement({css:this.UserName_Css_selector}).sendKeys(username);
    }

    async set_PassWord(pass){
        await driver.findElement({css:this.PassWord_Css_selector}).sendKeys(pass)
    }

    async click_Login_btn(){
        await driver.findElement({css:this.Login_Btn_Css_selector}).click();
    }

    async action_login(username,passwd){
        await this.set_UserName(username);
        await this.set_PassWord(passwd);
        await this.click_Login_btn();
    }
}

module.exports = new LoginPage();

上面的类表示我们的登录页面 - 它定义了页面上的主要元素，并且实现了常用的操作。

实现步骤定义

根据上面定义的 PO 模型，在步骤定义 (definition.js) 中实现 feature 的代码：

var { Given, When, Then } = require('cucumber')
const assert = require('assert');
const LoginPage = require('./login_page')
const {driver} = require('./support/web_driver')

Given(/^我浏览到Web应用程序而我尚未登录$/, async function () {
    await LoginPage.go_Home()
});

Given(/^浏览到网站首页$/, async function () {
     await LoginPage.go_Home()
});

When(/^点击登录按钮应该跳转到登录页面$/, async function () {
    await LoginPage.click_Login_btn()
    let page_url = await driver.getCurrentUrl()
    assert.equal(page_url,'http://localhost/login')
});

When(/^我使用无效用户登录$/, async function () {
    await LoginPage.action_login('无效用户名','无效密码');

});

When(/^我看到"([^"]*)"错误消息$/, async function (msg) {
    let text = await driver.findElement({css:LoginPage.error_msg_Css_selector}).getText();
    assert.equal(text,msg)
});

When(/^我使用有效用户登录$/, async function () {
    await LoginPage.action_login('user','pass')
});

When(/^我看到一个"([^"]*)"页面$/, async function (arg1) {
    let text = await driver.findElement({ css: LoginPage.index_Css_selector }).getText();
    assert.equal(text, msg)
});

更多

在构建应用程序并添加更多功能时，会通过更多测试。为了确保测试通过，您只需要使用适当的选择器（在页面对象模型和元素中定义）选择元素，实现操作。

选用合适的测试工具会让你代码生成和调试事半功倍，例如在 CukeTest 中，可视化的显示了场景和相关步骤定义的关系并可即时跳转：

此外点击运行，也可快速得到报表：