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.

‍

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.

More to explore

academy

Better AskUI Workflows with Convenience Methods in AskUI SDK (ADK)

AskUI interacts with your operating system like a real human user. This directly leads to code that specifies WHAT you have to do in a specific sequence to achieve a workflow. Unfortunately this also means a lot of repetitive code. This is why we implemented some convenience methods to help you ease these pain points.

academy

Use Playwright and AskUI Together

Playwright is the de facto standard when it comes to reliably testing browser applications across browsers and operating systems. But what if your workflow under test leaves your browser and requires you to automate on a desktop application? AskUI is not confined to a specific application because it uses visual selectors and real human-user-like input with keypresses and natural mouse movement. This makes it an ideal tool to accompany Playwright.

academy

Use Selenium and AskUI Together

When you automate browser applications there is no way around an automation tool as Selenium. It is optimized for browser interaction and executes blazingly fast. However sometimes you need to leave the confines of your browser to interact with another application or your operating system. This is not possible with Selenium alone.AskUI shines in this regard as it is not limited to a browser with its visual selectors and real input commands like keypresses and mouse movement.

Get in touch

For media queries, drop us a message at info@askui.com

Download Press Kit