e2e-test-quest / e2e-test-quest/uuv

UUV Enable variables in tests

Open
#299 0 comments 0 reactions 1 assignee Claimed by @luifr10 View on GitHub
enhancement
Dominant language
TypeScript
Stars
157
Forks
16
Avg merge
3d 1h
Merged PRs (30d)
21

Description

It should be pointed out that some of the labels are repeated several times in test files.

This is not a problem in itself, but it can be an issue when writing and maintaining end to end tests in the following cases :
- a large number of tests
- the tested application is multilingual

## Problem : Repeating labels in tests
The image on the following page shows a complete test file, and although the tests are quite clear and easy to read, it should be pointed out that some of the labels are repeated several times (for example “Get Started”).

This is not a problem in itself, but it can be an issue when writing and maintaining end to end tests in the following cases :
- a large number of tests
- the tested application is multilingual

So the big challenge here is to implement a solution to reduce duplication of wording in test files while maintaining readability.

![Full test file](https://github.com/user-attachments/assets/b179b9be-58b3-40fb-a8d7-46a8c338e1d0)

## Desired solution
The desired solution must meet at least the following requirements:

- consider variables during test execution
- test writing assistance

### Consider variables during test execution
When developing their applications, developers are used to manage translation files for the displayed labels. These translations are usually stored in json files, here are two examples for an application available in English and French

![en.json file](https://github.com/user-attachments/assets/daffefde-6054-4c2e-b141-adfad489de01)

![fr.json file](https://github.com/user-attachments/assets/b0f0ea90-c16e-4e4b-b3d0-fc8123632055)

The idea would be to consider a translation file given as a parameter to replace variables at runtime. Thus, for the translation files indicated above, the following variables would be available :

|Variable name|Value for english|Value for french|
| :- | :- | :- |
|***homepage.headline***|Welcome to Weather App|Bienvenu sur Weather App|
|***homepage.primaryButton***|Get started|Démarrer|

And they can be used in test files as follows :
![Test file with variables](https://github.com/user-attachments/assets/61d4a7bc-b61b-4b94-bf42-5c05a83ba6fa)

This feature should be available for cypress and playwright runners, but if we stop there, we can see that we've reduced the readability of the test files, because to understand the test file, it's currently necessary to have the translation file in hand at the same time.

The next requirement aims to resolve this issue.
### Test writing assistance
Currently, the UUV solution simplifies the writing and execution of end-to-end tests for developers by providing a [Jetbrains plugin](https://plugins.jetbrains.com/plugin/22437-uuv) and a [Vs Code extension](https://marketplace.visualstudio.com/items?itemName=e2e-test-quest.uuv-vscode-extension), and it's through these elements that we'll be able to keep our test files readable.

This can be achieved by adding **inlay hints** exposing translation to the [Jetbrains plugin](https://plugins.jetbrains.com/plugin/22437-uuv) and the [Vs Code extension](https://marketplace.visualstudio.com/items?itemName=e2e-test-quest.uuv-vscode-extension). [Inlay hints](https://www.jetbrains.com/help/idea/inlay-hints.html) are special markers that appear in the editor and provide developer with additional information about their code, like the names of the parameters that a called method expects. This answers the problem very well, and here's what a test file with this feature might look like :

![Test file with inlay hints](https://github.com/user-attachments/assets/7d5653e0-b263-463b-80a7-87bcedaf3474)
Blocks in purple are inlay hints, which cannot be modified by developers and are updated dynamically.

## Task list
- [ ] Define variable format
- [ ] Set up a configuration file for the translation file option
- [ ] Support for variables for cypress runner
- [ ] Support for variables for playwright runner
- [ ] Create an inlay hint for the Jetbrains plugin
- [ ] Create an inlay hint for the Vs Code extension
- [ ] Add online documentation

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.