e2e-test-quest / e2e-test-quest/uuv
UUV Enable variables in tests
- 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.

## 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


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 :

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 :

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
Assessment
This issue has not been assessed yet.