Skip to main content

Add custom step definitions

Cypress

Install dependencies

From powershell or cmd terminal :

npm install --save-dev ts-loader

Add Typescript types

warning

This step is only necessary if you plan to add your own step_definitions.

Add a new file tsconfig.e2e.json to include the necessary types :

tsconfig.e2e.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"cypress",
"@testing-library/cypress",
"@uuv/cypress"
]
},
"files": [
"uuv/cypress.config.ts"
],
"include": [
"src/**/*.cy.ts"
]
}

Create custom step definition

Create new .ts or .js file in the uuv/cucumber/step_definitions/ folder.
Here is an example :

uuv/cucumber/step_definitions/my-custom-step-definitions.ts
import {Given, When, Then} from "@badeball/cypress-cucumber-preprocessor";

Given('My first custom step definition', () => {
const myVar = 'foo';
expect(myVar).to.eq('a foo');
});

Then('My second custom step definition', () => {
// Your verification
expect(true).to.eq(true);
});

For more information on setting up custom step definition, see this documentation

(Optionnel) Utilisation des commandes Cypress UUV

When writing your own sentences, you can use :

uuvGetContext(): Cypress.Chainable<Context>

Returns the current UUV context (selected Dom element & timeout)


uuvCheckContextFocusedElement(): Cypress.Chainable<Context>

Returns Dom element selected in UUV context


uuvPatchContext(partOfContext: any): Chainable<Context>

Update of UUV context


uuvFindByText(textToSearch: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>

Look for an element from its textual content


uuvFindByTestId(testId: string): Cypress.Chainable<JQuery<HTMLElement>>

Look for an element from its data-testid attribute


uuvFindByRole(role: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>

Look for an element from its accessible role


uuvFindByLabelText(labelTextToSearch: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>

Look for an element from its label (ideal for form fields)


uuvFindAllByRole(role: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>

Look for all items matching an accessible role


uuvFoundedElement(): Cypress.Chainable<JQuery<HTMLElement>>

Returns the item found when a query has been performed

Use your custom step definition

uuv/e2e/first-test.feature
Feature: Hello World

Scenario: Search - Successful case
When I visit path "https://e2e-test-quest.github.io/weather-app/"
Then I should see a title named "Welcome to Weather App"
And My second custom step definition

Playwright

Add Typescript types

warning

This step is only necessary if you plan to add your own step_definitions.

Add a new file tsconfig.e2e.json to include the necessary types :

tsconfig.e2e.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"@uuv/playwright"
]
},
"include": [
"uuv/cucumber/step_definitions/**/*.ts"
]
}

Create custom step definition

Create new .ts or .js file in the uuv/cucumber/step_definitions/ folder.
Here is an example :

uuv/cucumber/step_definitions/my-custom-step-definitions.ts
import {Given, When, Then} from "@cucumber/cucumber";
import { expect } from "@playwright/test";
import { World } from "@uuv/playwright";

Given('My first custom step definition', async function () {
const myVar = 'foo';
expect(myVar).toBe('a foo');
});

Then('My second custom step definition', async function (this: World) {
// Your verification
expect(this.page.getByRole('heading', { name: 'Mon titre de page' })).toBeVisible();
});

For more information on setting up custom step definition, see this documentation

Use your custom step definition

uuv/e2e/first-test.feature
Feature: Hello World

Scenario: Search - Successful case
When I visit path "https://e2e-test-quest.github.io/weather-app/"
Then I should see a title named "Welcome to Weather App"
And My second custom step definition