How to set up BDD User-centric E2E tests
Tags: playwright, cypress, e2e, cucumber
Published: 2023-05-21 16:27:27

_In this article, we will see how to set up relevant and effortless end-to-end tests for your web application_


## The problem ?
End-to-End (E2E) testing for web application, is a comprehensive testing approach that aims to validate the functionality, performance, and reliability of a software system as a whole, simulating real-world user scenarios.

But if the generally recommended approach is to try to reproduce credible user scenarios, most of the popular tools (like [Cypress](Gherkin) and [Playwright](https://playwright.dev/)) invite to express these scenarios as development files (js, java, etc).

Using development language allows to write rich and advanced e2e test, but requires to translate our user scenarios into source code with the risk of corruption.

Therefore, it’s better to use BDD to express your scenarios. With Bdd, you write End-to-End tests in a natural language, which broadens the audience that can read and use them. This means your Product Management and Customer Success teams can read and comment on your tests without knowing any programming language.

Here’s an example of a BDD test written in Gherkin:

```gherkin
Feature: Login functionality
  As a usevbr
  I want to be able to log into the system
  So that I can access my account

  Scenario: Successful login
    Given I am on the login page
    When I enter valid credentials
    And I click the "Login" button
    Then I should be redirected to the home page
    And I should see a welcome message
```

[Cucumber](https://playwright.dev/) is the most popular testing framework for writing BDD test in Gherkin. Cucumber reads the Gherkin feature (usually stored in .feature files) and executes each step in the test.

But, and this is the big problem, you have to code your own step definition.

If it remains priomodial to create step definitions that are specific to your web application, writing step definitions for generic actions like checking the presence of a content in the dom, typing a text in a field or clicking on a button can be considered as boilerplate code in the same way that getter and setter were in java 8.

Just don’t do it, use [@uuv](https://orange-opensource.github.io/uuv/)

---

## A solution
![UUV Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybmowxxsxtxi7dnhssrx.png)
[@uuv](https://orange-opensource.github.io/uuv/) is a solution that helps you write user-centric end-to-end tests effortlessly by relying on a [set of known tools](https://orange-opensource.github.io/uuv/docs/intro#our-solution) such as cucumber, axe-core, cypress or playwright.

### How to use it ?
- Simply choose between [@uuv/cypress](https://www.npmjs.com/package/@uuv/cypress) or [@uuv/playwright](https://www.npmjs.com/package/@uuv/playwright) then install it with npm

- Write your first test, create the file `uuv/e2e/first-test.feature` in the project root with the following content :

```gherkin
Feature: Hello World
Scenario: Search - Successful case
  When I visit path "/"
  Then I should see an element with role "heading" and name "My app title"
```
You can find test examples here : [weather-app.feature](https://github.com/Orange-OpenSource/uuv/blob/main/example/weather-app.feature)

- Run your tests :
```bash
# browser mode
npx uuv open
# or for headless mode
npx uuv e2e
```

### Benefits of using uuv
- **User-centric approach** : your tests resemble the way your software is used
- If used correctly, integrates **accessibility **from the development stage
- A **living documentation** is possible because we propose an unified language for developers and non-developers with a [rich dictionary](https://orange-opensource.github.io/uuv/docs/category/step-definition) of ready-to-use sentences
![Syntax comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuwbjky2ee91ff0tftuv.png)
- A **Wizard**([@uuv/assistant](https://www.npmjs.com/package/@uuv/assistant)) that facilitates the writing of tests by suggesting the most accessible sentences
- Integrates several **runtime engines** : [@uuv/cypress](https://www.npmjs.com/package/@uuv/cypress) or [@uuv/playwright](https://www.npmjs.com/package/@uuv/playwright)
- User friendly and standardized execution **report**
![Html report example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9g80p7dmxw7dv1sj80r.jpg)