Cucumber + Playwright 教程

工作流程：

---

目录

1. 项目设置与依赖安装

2. 项目结构

3. 编写 Gherkin 功能文件 (search.feature)

4. 实现步骤定义 (search.steps.js)

5. 配置 Cucumber (cucumber.config.js)

6. 运行测试

主要优势

总结

---

1. 项目设置与依赖安装

首先，你需要初始化一个 Node.js 项目并安装必要的依赖。

# 1. 创建项目目录并初始化
mkdir cucumber-playwright-project
cd cucumber-playwright-project
npm init -y# 2. 安装 Cucumber 相关依赖 (BDD 框架)
npm install @cucumber/cucumber @cucumber/pretty-formater --save-dev# 3. 安装 Playwright (浏览器自动化)
npm install @playwright/test --save-dev# 4. (可选) 安装断言库，让断言更易读
npm install chai --save-dev

​​关键依赖说明：​​

• @cucumber/cucumber: Cucumber 的核心库，用于解析 Gherkin 文件并运行测试。

• @playwright/test: Playwright 库，用于控制浏览器（如 Chrome、Firefox、Safari）进行自动化操作。

• chai: 一个流行的断言库，提供更自然、更丰富的断言语法（如 expect(result).to.equal(8)）。

---

2. 项目结构

推荐结构如下：

cucumber-playwright-project/
├── features/
│   ├── step-definitions/    # 步骤定义目录
│   │   └── search.steps.js
│   ├── support/             # 支持文件目录
│   │   └── world.js         # 全局上下文和钩子
│   └── search.feature        # Gherkin 功能文件
├── cucumber.config.js       # Cucumber 配置文件
└── package.json

---

3. 编写 Gherkin 功能文件 (search.feature)

这是 BDD 的起点，用自然语言描述测试场景。

# features/search.feature
Feature: Google SearchAs a userI want to search on GoogleSo that I can find information I needScenario: Successful search returns resultsGiven I am on the Google search pageWhen I search for "Playwright"Then I should see search results related to "Playwright"

---

4. 实现步骤定义 (search.steps.js)

步骤定义是连接 Gherkin 语句和 Playwright 代码的“胶水”。

// features/step-definitions/search.steps.js
const { Given, When, Then } = require('@cucumber/cucumber');
const { expect } = require('chai');
const { chromium } = require('playwright');// 使用 World 来共享浏览器和页面上下文
Given('I am on the Google search page', async function () {this.browser = await chromium.launch({ headless: false }); // 设置为 true 则无头运行this.context = await this.browser.newContext();this.page = await this.context.newPage();await this.page.goto('https://www.google.com');
});When('I search for {string}', async function (searchQuery) {// 定位搜索框并输入内容await this.page.fill('textarea[name="q"]', searchQuery);// 模拟按下回车键await this.page.keyboard.press('Enter');// 等待搜索结果页面加载await this.page.waitForNavigation();
});Then('I should see search results related to {string}', async function (expectedKeyword) {// 获取页面标题const pageTitle = await this.page.title();// 使用 Chai 进行断言：检查标题是否包含关键词expect(pageTitle).to.include(expectedKeyword);// 或者，检查搜索结果容器的存在const resultsContainer = await this.page.$('#search');expect(resultsContainer).to.exist;// 测试结束后关闭浏览器await this.browser.close();
});

---

5. 配置 Cucumber (cucumber.config.js)

创建一个配置文件来简化运行命令。

// cucumber.config.js
module.exports = {default: {require: ['features/step-definitions/*.js'], // 步骤定义路径format: ['progress-bar',          // 控制台进度条'html:cucumber-report.html', // HTML 报告'@cucumber/pretty-formatter' // 更漂亮的输出],publishQuiet: true,        // 减少冗余日志}
}

---

6. 运行测试

配置 package.json中的脚本，以便轻松运行测试。

{"scripts": {"test": "cucumber-js --config cucumber.config.js"}
}

在终端中运行：

npm test

主要优势

1. ​​清晰的沟通​​：非技术人员可以轻松理解 .feature文件中的测试场景。

2. ​​强大的自动化​​：Playwright 提供快速、可靠的浏览器自动化，支持现代 Web 功能。

3. ​​活文档​​：.feature文件本身就是最新、可执行的文档。

4. ​​高可维护性​​：将“做什么”（Gherkin）和“怎么做”（Playwright 代码）分离，使测试代码更易于维护。

总结

​​Cucumber + Playwright​​ 的组合非常适合需要​​团队协作、需求频繁变更、对软件质量要求高​​的项目。它确保了所有人对需求的理解一致，并通过自动化测试保证了最终产品的质量。