Use AskUI and Cucumber Together

April 29, 2024
Academy
AskUI Logo with text AskUI underneath on the left side. Cucumber Logo with text Cucumber on the right side of it. Both divided by a diagonal line. Left is turquoise and right side is rose.
linkedin icontwitter iconfacebook iconmail icon

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.

Gif showing the whole workflow. Open new tab in Google Chrome browser, typing in the AskUI Practice Page URL and pressing enter. Then the practice page is opened

Prerequisites

* AskUI installed and configured on your system: Windows, Linux, macOS

* Delete the file 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).

Important: Please make sure to install at least version 1.0.23 of the package @askui/jest-allure-circus.

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.

-- CODE language-ts line-numbers -- 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.

-- CODE language-ts line-numbers -- ... 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:

-- CODE language-bash line-numbers -- npm install --save-dev jest-cucumber

Create a Basic Features File

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

-- CODE language-bash line-numbers -- project_root/ ├─ askui_example/ ├─ features/ ├─ NavigateToWebsite.feature ├─ node_modules/ ├─ ...

Write the following basic Feature into this file:

-- CODE language-bash line-numbers -- 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.

-- CODE language-ts line-numbers -- 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:

-- CODE language-bash line-numbers -- 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.

Johannes Dienst
·
April 29, 2024
On this page