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

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

Create a Basic Features File

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

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

Write the following basic Feature into this file:

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.

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 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.