e2e-test-quest
@uuv/cypress
</picture>
Test as final user
A solution to facilitate the writing and execution of E2E tests understandable by any human being(English or French) using cucumber(BDD) and cypress or playwright.
What is @uuv/cypress?
The @uuv library (User centric Usecases Validator) is an ecosystem that simplifies the writing of End to End tests in a BDD approach and a user-centric way.
We can use the cypress engine(@uuv/cypress) to run test or playwright with @uuv/playwright
Benefits
- 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 of ready-to-use sentences
- @uuv/assistant that facilitates the writing of tests by suggesting the most accessible sentences
- JetBrains Plugin that helps you to write and execute your UUV E2E tests from JetBrains IDEs
- Integrates several runtime engines: Cypress / Playwright
- User friendly and standardized execution report([example](https://e2e-test-quest.github.io/kata-e2e-uuv/
Comparison
| Criteria | Cypress | Playwright | Testing library | UUV |
|:-: |:-: |:-: |:-: |:-: |
| User centrism | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Native accessibility | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Easy setup configuration for BDD test | :warning: | :warning: | :heavy_minus_sign: | :heavy_check_mark: |
| Understandable by everyone
(included non dev) | :x: | :x: | :x: | :heavy_check_mark: |
Syntax example
With this dom example :
<body>
<h1>Result<h1>
</body>we see that the sentence proposed by UUV is the most understandable of all | Library | Syntax | |:--|:--| | Cypress | cy.get('h1').contains('Result') | | Playwright| await expect(page.getByTitle('Result')).toHaveCount(1) | | Testing library | expect(screen.getByTitle(/Result/i)).toBeTruthy() | | UUV | Then I should see a title named "Result"|
Documentation
Demonstration
Demo in english
Demo in french
Installation
npm install --save-dev @uuv/cypressor
yarn add -D @uuv/cypressConfiguration (optional)
Usage
Scenarios example
You can find test examples here : weather-app.feature
Write test
To write your first test, create the file uuv/e2e/first-test.feature in the project root with the following content :
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"For more details, please go to the documentation:
Run test
browser mode
npx uuv openor
yarn uuv openheadless mode
Use for continuous integration(CI example) or headless execution.
without args
npx uuv e2eor
yarn uuv e2ewith args
npx uuv e2e --browser=edge --env="{'TAGS':'@mobile'}" --generateHtmlReport --targetTestFile=./uuv/e2e/first-test.featureor
yarn uuv e2e --browser=edge --env="{'TAGS':'@mobile'}" --generateHtmlReport --targetTestFile=./uuv/e2e/first-test.featureFor more details, please go to the documentation:
License
This project is licensed under the terms of the MIT license.
Support UUV through Open Collective
If you want to help UUV grow, you can fund the project directly via Open Collective.
Every contribution helps us dedicate more time and energy to improving this open-source tool.
Interested in becoming a sponsor?
We welcome sponsorships of all sizes!
Contact us via GitHub or through Open Collective to discuss opportunities.