Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,150 @@ title: How to contribute to UI tests

# How to contribute to UI tests

## Introduction
## Overview

### Branches
Contributing to UI tests involves the following steps:

The first question to ask when making a contribution is "Which branch should I target?".
1. Selecting a scenario
2. Setting up your environment
3. Writing the test
4. Submitting a Pull Request (PR)
5. Getting it reviewed and merged

The rules are as follows:
* The development branch for UI testing is the current development branch.
* The branch changes as soon as the final release is out.
---

### Differences between scenarios & tests
## Introduction

Scenarios are the base of UI Tests. They are available on the [PrestaShop Tests Documentation](https://build.prestashop-project.org/test-scenarios/).
Scenarios are the basis of UI tests. They describe expected behaviors in a human-readable format and are available in the [PrestaShop Tests Documentation](https://build.prestashop-project.org/test-scenarios/).

Tests are the code based on scenarios. They are available on the main repository [in the tests/UI directory](https://github.com/PrestaShop/PrestaShop/tree/develop/tests/UI).
Tests are the automated implementations of these scenarios. They are located in the [tests/UI directory of the PrestaShop Core repository](https://github.com/PrestaShop/PrestaShop/tree/develop/tests/UI).

---

## Contribute to UI tests

### Choose a scenario to automate

_**This part is only available for PrestaShopCorp employees.**_
* Go to the PrestaShop Forge
* Access to the Test Repositoy
* Find a test in the directory `Core` or `Modules` with the state "TO BE AUTOMATED"

### Create the PR
* The contributor create a PR targetting the development branch for UI tests.
* The contributor can check that the PR works with the [Github Action `ga.tests.ui.pr`](https://github.com/PrestaShop/ga.tests.ui.pr).

### Review the PR
* The review is done by [Software Developers in Tests of the project](/project-organization/people-and-roles/#software-developers-in-test).
* Some checks are done :
* The PR complies with [contribution guidelines](https://devdocs.prestashop-project.org/9/contribute/contribution-guidelines/);
* The CI is green (lint, typescript check);
* The scenario is followed;
* The test is executed without errors in the [nightly](https://github.com/PrestaShop/ga.tests.ui.pr);
* The test use the Page Object Model pattern.

### Merge of the PR
* The merge is done after two approvals of [Software Developers in Tests of the project](/project-organization/people-and-roles/#software-developers-in-test) including a maintainer.
* After that, the contribution will be executed every night in the [nightly of the project](https://nightly.prestashop-project.org/) to ensure continuity and stability of the project.
### 1. Choose a scenario to automate

* Go to the [`test-scenarios` repository](https://github.com/PrestaShop/test-scenarios/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22STATE%20%3A%20To%20Be%20Automated%22)
* Find an open issue labeled **"STATE : To Be Automated"**
* Select a scenario from the `Core` or `Modules` scope

---

### 2. Setup your environment

#### Prerequisites

* Node.js (recommended LTS version)
* npm
* Git

#### Project setup

* Checkout your fork of PrestaShop on the `develop` branch
* Follow the [installation guide](https://devdocs.prestashop-project.org/9/basics/installation/)
* Install your shop with:

* Language: **English**
* Country: **France**

#### UI test setup

```bash
cd tests/UI/
npm install
cp .env.local .env
```

Update the `.env` file to match your local environment. Make sure to configure:

* `BASE_URL`
* Browser settings
* Credentials if required

#### Run a test

You can run a specific E2E test using:

```bash
TEST_PATH="functional/BO/00_login/02_login.ts" npm run test:specific:fast-fail
```

---

### 3. Create the test

You can now start writing your test.

* The directory structure mirrors the scenario structure
* Place your test in the corresponding folder
* Follow existing naming conventions

#### Tech stack

* **Mocha**: test framework
* **Playwright**: browser automation
* **@prestashop-core/ui-testing**: utilities and Page Object Models

#### Guidelines

* Follow the scenario strictly
* Use the Page Object Model pattern
* Reuse existing utilities and helpers
* Avoid hardcoded values
* Ensure your test is stable and deterministic

---

### 4. Create the Pull Request

Once your test runs successfully locally:

* Push your branch
* Open a Pull Request targeting the `develop` branch
* Trigger a run from your fork of the GitHub Action `ga.tests.ui.pr`

Make sure all checks pass before requesting a review.

---

### 5. Review process

The review is performed by [Software Developers in Test](/project-organization/people-and-roles/#software-developers-in-test).

During the review, the following checks are performed:

* Compliance with contribution guidelines
* CI status (lint, TypeScript checks, tests)
* Respect of the original scenario
* Test stability in CI
* Proper use of the Page Object Model pattern

---

### 6. Merge

The PR is merged after two approvals from [Software Developers in Test](/project-organization/people-and-roles/#software-developers-in-test), including at least one maintainer.

Once merged, the test is executed nightly to ensure ongoing stability of the project:

* [https://nightly.prestashop-project.org/](https://nightly.prestashop-project.org/)

---

## Best practices

* Keep tests independent
* Avoid shared state between tests
* Use Page Object Models consistently
* Prefer reusable helpers from `@prestashop-core/ui-testing`
* Keep tests readable and maintainable

---

## Troubleshooting

* Ensure your `.env` file is correctly configured
* Verify that your shop is properly installed
* Run tests in headed mode for debugging if needed
* Check CI logs if tests fail on the pipeline
Loading