playwright-poc

Installation:

npm install
npm run browsers:update

Static testing in our code

We use this ones:
- eslint: We can see the file .eslintrc.js.
- TypeScript: We can find the tsconfig.json.

Create new tests

There is a testCreation.md file where we have all the fields that can be set for create an smartphoto.
This creation is typed too so whn you create a new test the structure will be checked.

Run tests:

Locally

First of all run: 'npm run pretest'. This command should be run when we make any changes in the repository.
- Admin: npm run local-test:admin
- Smartphoto: npn run local-test:smartphoto
- Admin + smartphoto: npm run local-test:admin-smartphoto
- Login + admin + smartphoto: npm run local-test:all

Note: For test the backend locally (in the UI) we need to run the admin or the smartphoto locally so we need to use one of the commands before but with the backend up too.

With default configuration

By default, runs agains test environment with a default user ([email protected]) and password.

Command:
npm test

Custom configuration

- ENV_NAME: Name of the environment where we want to run the tests.
- AWS_PROFILE: It should be the same environment set in ENV_NAME.
- COMPANY_NAME: We can use another company different from the default one since we need to test more than one configuration in some cases.
- USER_NAME: We can user different users.
Password is automatically fetched from .env file (secret).
Company should be name in the 'companies' field of the corresponding environment. For example, in pre: 'demoPropertyEs'.
User should be the name in the field 'users' of the corresponding company. For example, in demoPropertyEs: 'test_jaime'.

Command:
ENV_NAME=test AWS_PROFILE=test npm test
Note: COMPANY_NAME and USER_NAME could be deleted when we start creating company per test files with the factory.

Run tests using Docker:

Firstly, make sure to have the .npmrc file in the repository, the AWS credentials for the different environments in the /root/.aws/credentials path, and Docker running (on Windows, simply run Docker Desktop).
Then, run:
docker/buildImage.sh // It is possible it does not work. In this case, go to the startup.sh file located inside the scripts folder and change the line ending type from CRLF to LF and re-build the image.
docker run -it e2e-property test:<enviro>.

Generate snapshots using Docker:

Like before, make sure to have the .npmrc file in the repository, the AWS credentials for the different environments in the /root/.aws/credentials path, and Docker running (on Windows, simply run Docker Desktop).
Then, run:
docker/buildImage.sh
docker run -it e2e-property genscr:<enviro> // By adding -it, we will make the container not stop until we press a key.
Open beside a new terminal and run:
docker ps
docker cp <id>:/tests/test/fixtures/snapshots ./test/fixtures // Here, <id> should be the first three letters of the CONTAINER ID from the last step.
Now, you can finish the Docker container by pressing the enter key in the first terminal.

Test folder structure

views (Folder)

We have divided the project in folders per view. Inside the different folders we can find all the actions that can be made in this view.
This folders have three files:
- <view>POM
- <view>AOM
- <view>LOC

POM (File)

POM = Page Object Model
Name: <page>POM
Purpose: Individual actions that can be performed on the specific <page>.
Example: Fill in an input field.

AOM (File)

AOM = Action Object Model
Name: <page>AOM
Purpose: Group of actions that can be performed on the specific <page>.
Example: Fill in all the inputs in the claim creation process.

LOC (File)

We have saved here all the selectors of the different actions.
We have implemented a data-test-id for all the components.
Example: If we want to click a button we use the selector of the button.

dataValidation (FOLDER)

Purpose: In this folder, we have all the information that the tests should return.
In summary, we use this files to compare with the bodies of the tests' results.
Note: We have this information divided per tests' name.
Example: For test the "Water filtration" inference, we have the body that should be return.

Fixtures (FOLDER)

Purpose: Here we save all the data needed for some tests.
Example: For test the "Water filtration" inference, we need specific data that is saved here.
Other example: The photos of every tests.

environments (FOLDER)

Purpose: In this folder, we store all the data related to the environments that the tests can run into.
Example: We store the different companies that are registered in that particular environment, users and URLs.

Spec (FOLDER)

Purpose: In this folder, there are all the tests. They are divided by functionalities.
Each files have a .ts file where we save all the test steps and information (Data Driven Testing)
Example: "dataInference.spec.ts" test the data inference.

Utils (FOLDER)

Purpose: In utils' folder we can find all the general functions.
Example: All the before and after test functions.
Other example: The functions that are used in different views.
Other example: The typing of data structure.