Use AskUI and Cucumber Together

By defining the behavior of a system in a structured format like Gherkin, Behavior-Driven Development (BDD) enables teams to bridge the gap between stakeholders, testers, and developers, avoiding misunderstandings and reducing rework. As a collaborative approach, BDD encourages all parties to work together from the outset, ensuring that everyone is on
the same page and that requirements are accurately captured.

In this process, Cucumber is a popular tool used to implement BDD, enabling teams to write clear, executable tests that ensure the system behaves as expected.

In this blog post, we'll show you how to set up Cucumber in conjunction with AskUI to define AskUI workflows using BDD principles.

Prerequisites

• AskUI installed and configured on your system (Windows, Linux, macOS)

• Delete askui_example/my-first-askui-test-suite.test.ts after initialization

Prepare Setup

Cucumber does not play nice with AskUI's default setup yet (Version 0.20.3). For AskUI to play nice with Cucumber you need to do two small preparations as AskUI uses Jest as its runner.

1. Change Jest's testEnvironmentOptions

In the file askui_example/helpers/jest.config.ts you have to disable that code is included in the run report. You achieve this by adding a testEnvironmentOptions property with the addCodeInReport property set to false.

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

2. Tell Jest Where to Find the Implementation for The Step Definitions

Also in askui_example/helpers/jest.config.ts you need to expand the default testMatch property. It must include files ending in step.ts because we will store the implementation there.

...
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)" ] }; ...

Install jest-cucumber

The easiest way to use Jest together with Cucumber is the npm-package jest-cucumber. Let's install it with the following command:

npm install --save-dev jest-cucumber

npm install --save-dev jest-cucumber

Create a Basic Features File

Create a folder features and in there a Feature
file NavigateToWebsite.feature

npm install --save-dev jest-cucumber

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

Write the following basic Feature
into this file:

npm install --save-dev jest-cucumber

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

Create the Step Definitions Implementations

Create the step definition file askui_example/navigate-to-url.step.ts where each test maps to a specific scenario.

npm install --save-dev jest-cucumber

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(); }); }); });

Run The Workflow

Open your browser in full screen and start the workflow with:

npm install --save-dev jest-cucumber

npm run askui

You should see that the workflow run will open a new tab and navigate to AskUI's practice page.

Conclusion

Combining AskUI with Cucumber enables you to write AskUI workflows in BDD style. Executing your tests like a real human-user will make them more realistic for every stakeholder.