一起使用 AskUI 和 Cucumber

通过以 Gherkin 等结构化格式定义系统的行为，行为驱动开发 (BDD) 使团队能够弥合利益相关者、测试人员和开发人员之间的差距，避免误解并减少返工。作为一种协作方法，BDD 鼓励各方从一开始就共同努力，确保每个人都参与
同一页面并且准确捕获了需求。

在此过程中，Cucumber 是一种用于实现 BDD 的流行工具，使团队能够编写清晰、可执行的测试，以确保系统按预期运行。

在这篇博文中，我们将向您展示如何将 Cucumber 与 AskUI 结合设置，以使用 BDD 原则定义 AskUI 工作流程。

先决条件

• 在您的系统（Windows、Linux、macOS）上安装并配置了 AskUI

• 初始化后删除asgui_example/my-first-askui-test-suite.test.ts

准备设置

Cucumber 与 AskUI 的默认设置（版本 0.20.3）还不能很好地配合。为了让 AskUI 与 Cucumber 良好配合，您需要做两个小准备，因为 AskUI 使用 Jest 作为其运行器。

1.更改Jest的testEnvironmentOptions

在文件asgui_example/helpers/jest.config.ts中，您必须禁用运行报告中包含的代码。您可以通过添加 testEnvironmentOptions 属性并将 addCodeInReport 属性设置为 false 来实现此目的。

const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
};
...

2. 告诉 Jest 在哪里可以找到步骤定义的实现

另外，在asgui_example/helpers/jest.config.ts中，您需要扩展默认的testMatch属性。它必须包含以 step.ts 结尾的文件，因为我们将在那里存储实现。

...
const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
  testMatch: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ]
};
...

s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ] }; ...

安装 jest-cucumber

将 Jest 与 Cucumber 一起使用的最简单方法是 npm-package jest-cucumber。让我们使用以下命令安装它：

npm install --save-dev jest-cucumber

npm install --save-dev jest-cucumber

创建基本特征文件

创建一个文件夹 features，并在其中创建一个 Feature
文件 NavigateToWebsite.feature

npm install --save-dev jest-cucumber

project_root/ ├─asgui_example/ ├─ 特点/ ├─ NavigateToWebsite.feature ├─ 节点模块/ ├─ ...

将以下基本功能
写入此文件：

npm install --save-dev jest-cucumber

功能：导航到网站 场景：在浏览器地址栏中输入正确的URL 鉴于我在 Google 搜索页面上 当我输入 AskUI 练习页面的 URL 时 然后我就会登陆网页

创建步骤定义实施

创建步骤定义文件asgui_example/navigate-to-url.step.ts，其中每个测试映射到特定场景。

npm install --save-dev jest-cucumber

从'jest-cucumber'导入{defineFeature，loadFeature}； 从 './helpers/askui-helper' 导入 { aui } ； // 加载特征文件 const feature = loadFeature('features/NavigateToWebsite.feature'); 定义功能（功能，测试=> { // 映射到功能文件中的“场景” test('在浏览器地址栏中输入正确的 URL', ({给定, 当, 然后 }) => { Give('我在 Google 搜索页面', async () => { 等待 aui.moveMouse(500, 500).exec(); 等待 aui.mouseLeftClick().exec(); 等待 aui.pressTwoKeys('command', 't').exec(); }); when('我输入 AskUI 练习页面的 URL', async () => { 等待 aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); 等待 aui.pressKey('enter').exec(); }); then('我将登陆网页', async () => { wait aui.expect().text('欢迎来到AskUI练习页面').exists().exec(); }); }); });

运行工作流程

全屏打开浏览器并启动工作流程：

npm install --save-dev jest-cucumber

npm run asgui

您应该看到工作流程运行将打开一个新选项卡并导航到 AskUI 的练习页面。

结论

将 AskUI 与 Cucumber 相结合使您能够以 BDD 风格编写 AskUI 工作流程。像真正的人类用户一样执行测试将使测试对于每个利益相关者来说更加现实。