一起使用 AskUI 和 Cucumber

一起使用 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)" ]
};
...

安装 jest-cucumber

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

npm install --save-dev jest-cucumber

创建基本特征文件

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

project_root/
├─ askui_example/
├─ features/
  ├─ NavigateToWebsite.feature
├─ node_modules/
├─ ...

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

Feature: Navigate to a website

Scenario: Entering the correct URL into the browser address bar
  Given I am on the Google search page
  When I type in the URL for AskUI practice page
  Then I will land on the webpage

创建步骤定义实施

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

import { defineFeature, loadFeature } from 'jest-cucumber';
import { aui } from './helpers/askui-helper';

// Load the feature file
const feature = loadFeature('features/NavigateToWebsite.feature');

defineFeature(feature, test => {

  // Maps to 'Scenario' in your feature file
  test('Entering the correct URL into the browser address bar', ({ given, when, then }) => {

    given('I am on the Google search page', async () => {
      await aui.moveMouse(500, 500).exec();
      await aui.mouseLeftClick().exec();
      await aui.pressTwoKeys('command', 't').exec();
    });

    when('I type in the URL for AskUI practice page', async () => {
      await aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec();
      await aui.pressKey('enter').exec();
    });

    then('I will land on the webpage', async () => {
      await aui.expect().text('Welcome to the AskUI Practice Page').exists().exec();
    });

  });
});

运行工作流程

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

npm run askui

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

结论

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

以上是一起使用 AskUI 和 Cucumber的详细内容。更多信息请关注PHP中文网其他相关文章！