Skip to content

Commit 7be9f1e

Browse files
rwood-mozrwood-moz
authored
Enable E2E tests to run against local dev env and stage env (at branch/PR level) (#870)
* Enable E2E tests to run against local dev env and against stage at the branch/PR level * Post-review updates
1 parent 8b71f3f commit 7be9f1e

17 files changed

+322
-88
lines changed

‎.github/workflows/deploy-production.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ jobs:
244244
APPT_LOGIN_PWORD: ${{ secrets.E2E_APPT_PROD_LOGIN_PASSWORD }}
245245
APPT_DISPLAY_NAME: ${{ secrets.E2E_APPT_PROD_DISPLAY_NAME }}
246246
APPT_MY_SHARE_LINK: ${{ secrets.E2E_APPT_PROD_MY_SHARE_LINK }}
247-
APPT_BOOKING_REQUESTER_EMAIL: ${{ secrets.E2E_APPT_PROD_BOOKING_REQUESTER_EMAIL }}
247+
APPT_BOOKEE_EMAIL: ${{ secrets.E2E_APPT_PROD_BOOKEE_EMAIL }}
248248
steps:
249249
- uses: actions/checkout@v4
250250

‎.github/workflows/nightly-tests.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ jobs:
2424
APPT_LOGIN_PWORD: ${{ secrets.E2E_APPT_PROD_LOGIN_PASSWORD }}
2525
APPT_DISPLAY_NAME: ${{ secrets.E2E_APPT_PROD_DISPLAY_NAME }}
2626
APPT_MY_SHARE_LINK: ${{ secrets.E2E_APPT_PROD_MY_SHARE_LINK }}
27-
APPT_BOOKING_REQUESTER_EMAIL: ${{ secrets.E2E_APPT_PROD_BOOKING_REQUESTER_EMAIL }}
27+
APPT_BOOKEE_EMAIL: ${{ secrets.E2E_APPT_PROD_BOOKEE_EMAIL }}
2828
steps:
2929
- uses: actions/checkout@v4
3030

‎.github/workflows/validate.yml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,3 +192,43 @@ jobs:
192192
- name: Test with vitest
193193
run: |
194194
cd ./frontend && npm run test -- --run
195+
196+
e2e-tests-browserstack:
197+
name: e2e-tests-browserstack
198+
needs: detect-changes
199+
if: needs.detect-changes.outputs.validate-frontend == 'true' || needs.detect-changes.outputs.validate-backend == 'true'
200+
runs-on: ubuntu-latest
201+
environment: staging
202+
env:
203+
APPT_LOGIN_EMAIL: ${{ secrets.E2E_APPT_STAGE_LOGIN_EMAIL }}
204+
APPT_LOGIN_PWORD: ${{ secrets.E2E_APPT_STAGE_LOGIN_PASSWORD }}
205+
APPT_DISPLAY_NAME: ${{ secrets.E2E_APPT_STAGE_DISPLAY_NAME }}
206+
APPT_MY_SHARE_LINK: ${{ secrets.E2E_APPT_STAGE_MY_SHARE_LINK }}
207+
APPT_BOOKEE_EMAIL: ${{ secrets.E2E_APPT_STAGE_BOOKEE_EMAIL }}
208+
steps:
209+
- uses: actions/checkout@v4
210+
211+
- uses: actions/setup-node@v4
212+
with:
213+
node-version: 20
214+
cache: 'npm'
215+
cache-dependency-path: 'test/e2e/package-lock.json'
216+
217+
- name: Install dependencies
218+
run: |
219+
cd ./test/e2e
220+
npm install
221+
222+
- name: BrowserStack Env Setup
223+
uses: browserstack/github-actions/setup-env@master
224+
with:
225+
username: ${{ secrets.BROWSERSTACK_USERNAME }}
226+
access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
227+
project-name: 'Thunderbird Appointment'
228+
build-name: 'E2E Tests: BUILD_INFO'
229+
230+
- name: Run E2E Tests on Browserstack
231+
run: |
232+
cd ./test/e2e
233+
cp .env.stage.example .env
234+
npm run e2e-test-browserstack-gha

‎test/e2e/.env.dev.example‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Appointment E2E Test Configuration
2+
APPT_TARGET_ENV=dev
3+
4+
# URLs
5+
APPT_URL=http://localhost:8080/
6+
7+
# Local sign-in credentials
8+
APPT_LOGIN_EMAIL=
9+
APPT_LOGIN_PWORD=
10+
11+
# Local Appointment user display name (settings => account => display name) for above user
12+
APPT_DISPLAY_NAME=
13+
14+
# Booking share link for the existing local user above (settings => account => my link)
15+
APPT_MY_SHARE_LINK=
16+
17+
# Booking requester's name and email address (used when a booking slot is requested via the
18+
# share link). Important: real appointment booking emails will be sent to the provided email.
19+
APPT_BOOKEE_NAME='Automated-Test-Bot-Dev'
20+
APPT_BOOKEE_EMAIL=

‎test/e2e/.env.prod.example‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Appointment E2E Test Configuration
2+
APPT_TARGET_ENV=prod
23

34
# URLs
45
APPT_URL=https://appointment.day/
@@ -17,5 +18,5 @@ APPT_MY_SHARE_LINK=
1718

1819
# Booking requester's name and email address (used when a booking slot is requested via the
1920
# share link). Important: real appointment booking emails will be sent to the provided email.
20-
APPT_BOOKING_REQUESTER_NAME='Automated-Test-Bot'
21-
APPT_BOOKING_REQUESTER_EMAIL=
21+
APPT_BOOKEE_NAME='Automated-Test-Bot-Prod'
22+
APPT_BOOKEE_EMAIL=

‎test/e2e/.env.stage.example‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Appointment E2E Test Configuration
2+
APPT_TARGET_ENV=stage
3+
4+
# URLs
5+
APPT_URL=https://stage.appointment.day/
6+
APPT_SHORT_SHARE_LINK_PREFIX=https://stage.apmt.day/
7+
APPT_LONG_SHARE_LINK_PREFIX=https://stage.appointment.day/user/
8+
9+
# Sign-in (FxA) credentials
10+
APPT_LOGIN_EMAIL=
11+
APPT_LOGIN_PWORD=
12+
13+
# Appointment user display name (settings => account => display name) for above user
14+
APPT_DISPLAY_NAME=
15+
16+
# Booking share link for the existing user above (settings => account => my link)
17+
APPT_MY_SHARE_LINK=
18+
19+
# Booking requester's name and email address (used when a booking slot is requested via the
20+
# share link). Important: real appointment booking emails will be sent to the provided email.
21+
APPT_BOOKEE_NAME='Automated-Test-Bot-Stage'
22+
APPT_BOOKEE_EMAIL=

‎test/e2e/README.md‎

Lines changed: 101 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,6 @@
22

33
Guide for running the Thunderbird Appointment E2E tests.
44

5-
## Prerequisite
6-
7-
You must have a pre-existing Appointment user test account (using FxA credentials) on the platform where you are running the tests. ie. For the production sanity test you must have an Appointment test account on production (using production FxA credentials) already set up.
8-
9-
The tests expect that default Appointment application settings exist for the provided test user; for example the user scheduling availability hasn't been changed from the default settings; and the default calendar view is the current month view. This is important so that the tests can find an available booking slot, etc.
10-
115
## Installation
126

137
First install the E2E suite (includes Playwright):
@@ -23,13 +17,95 @@ Next install the Playwright browsers (Playwright uses it's own bundled browers)
2317
npx playwright install
2418
```
2519

26-
## Running Locally
20+
## E2E Test Prerequisites
21+
The E2E tests require an existing Appointment (and corresponding FxA account) and associated data, and reads this from your local .env file. This includes:
22+
- Credentials for an existing Appointment (FxA) account (email address, password)
23+
- The account user's display name and share link:
24+
- The display name is found in Appointment => Settings => Account => Display name.
25+
- The share link is found in Appointment => Settings => Account => My Link.
26+
- The tests also require an email address to be used as the appointment bookee's email address when actually requesting bookings. This is the email address entered on the `Book selection` dialog (after an appointment slot was selected on the booking share link page). Note that real Appointment emails will be sent to this email address.
27+
28+
The tests expect that the default Appointment application settings haven't been changed for the provided test user:
29+
- The user scheduling availability hasn't been changed from the default settings;
30+
- In the dashboard the default calendar view is the current month view; this is important so that the tests can find an available booking slot, etc.
31+
- In `Booking Settings`, the `Booking Confirmation` option is enabled, so that requested appointments generate HOLD appointments that need to be confirmed
32+
33+
## Running the E2E tests against your local dev environment
34+
35+
First ensure that you have a local Appointment account created and you can sign in to Appointment at http://localhost:8080/.
36+
37+
Then copy over the provided `.env.dev.example` to a local `.env`:
38+
39+
```bash
40+
cd test/e2e
41+
cp .env.dev.example .env
42+
```
43+
44+
Then edit your local `.env` file and provide the following values:
45+
```dotenv
46+
APPT_LOGIN_EMAIL=<existing-dev-FxA-user-email>
47+
APPT_LOGIN_PWORD=<exisiting-dev-FxA-user-password>
48+
APPT_DISPLAY_NAME=<appointment-dev-user-display-name>
49+
APPT_MY_SHARE_LINK=<apointment-dev-user-share-link>
50+
APPT_BOOKEE_EMAIL=<booking-requesters-email>
51+
```
52+
53+
To run the E2E tests headless (still in `test/e2e`):
54+
55+
```bash
56+
npm run e2e-test
57+
```
58+
59+
To run the E2E tests with a UI so you can watch the tests run (still in `test/e2e`):
60+
61+
```bash
62+
npm run e2e-test-headed
63+
```
64+
65+
To run the E2E tests in debug mode (still in `test/e2e`):
66+
67+
```bash
68+
npm run e2e-test-debug
69+
```
70+
71+
## Running the E2E tests against the staging environmnent
72+
73+
First copy over the provided `.env.stage.example` to a local `.env`:
74+
75+
```bash
76+
cd test/e2e
77+
cp .env.stage.example .env
78+
```
79+
80+
Then edit your local `.env` file and provide the following values:
81+
```dotenv
82+
APPT_LOGIN_EMAIL=<existing-stage-FxA-user-email>
83+
APPT_LOGIN_PWORD=<exisiting-stage-FxA-user-password>
84+
APPT_DISPLAY_NAME=<appointment-stage-user-display-name>
85+
APPT_MY_SHARE_LINK=<apointment-stage-user-share-link>
86+
APPT_BOOKEE_EMAIL=<booking-requesters-email>
87+
```
88+
89+
To run the E2E tests headless (still in `test/e2e`):
90+
91+
```bash
92+
npm run e2e-test
93+
```
94+
95+
To run the E2E tests with a UI so you can watch the tests run (still in `test/e2e`):
96+
97+
```bash
98+
npm run e2e-test-headed
99+
```
100+
101+
To run the E2E tests in debug mode (still in `test/e2e`):
102+
103+
```bash
104+
npm run e2e-test-debug
105+
```
106+
107+
## Running the production sanity test
27108

28-
The E2E tests require credentials for an existing Appointment (FxA) account and reads these from your local env vars.
29-
This includes the existing Appointment account's email address, password, user's display name and share link.
30-
The display name is found in Appointment => Settings => Account => Display name.
31-
The share link is found in Appointment => Settings => Account => My Link.
32-
The tests also require an email address to be used when actually requesting bookings. This is the email address entered on the `Book selection` dialog (after an appoitment slot was selected on the booking share link page). Note that real Appointment emails will be sent to this email address.
33109
First copy over the provided `.env.prod.example` to a local `.env`:
34110

35111
```bash
@@ -39,11 +115,11 @@ cp .env.prod.example .env
39115

40116
Then edit your local `.env` file and provide the following values:
41117
```dotenv
42-
APPT_LOGIN_EMAIL=<existing-test-FxA-user-email>
43-
APPT_LOGIN_PWORD=<exisiting-test-FxA-user-password>
44-
APPT_DISPLAY_NAME=<appointment-user-display-name>
45-
APPT_MY_SHARE_LINK=<apointment-user-share-link>
46-
APPT_BOOKING_REQUESTER_EMAIL=<booking-requesters-email>
118+
APPT_LOGIN_EMAIL=<existing-prod-FxA-user-email>
119+
APPT_LOGIN_PWORD=<exisiting-prod-FxA-user-password>
120+
APPT_DISPLAY_NAME=<appointment-prod-user-display-name>
121+
APPT_MY_SHARE_LINK=<apointment-prod-user-share-link>
122+
APPT_BOOKEE_EMAIL=<booking-requesters-email>
47123
```
48124

49125
To run the production sanity test headless (still in `test/e2e`):
@@ -55,7 +131,7 @@ npm run prod-sanity-test
55131
To run the production sanity test with a UI so you can watch the tests run (still in `test/e2e`):
56132

57133
```bash
58-
npm run prod-sanity-test-ui
134+
npm run prod-sanity-test-headed
59135
```
60136

61137
To run the production sanity test in debug mode (still in `test/e2e`):
@@ -77,7 +153,7 @@ APPT_LOGIN_EMAIL=<existing-test-FxA-user-email>
77153
APPT_LOGIN_PWORD=<exisiting-test-FxA-user-password>
78154
APPT_DISPLAY_NAME=<appointment-user-display-name>
79155
APPT_MY_SHARE_LINK=<apointment-user-share-link>
80-
APPT_BOOKING_REQUESTER_EMAIL=<booking-requesters-email>
156+
APPT_BOOKEE_EMAIL=<booking-requesters-email>
81157
```
82158

83159
Also in order to run on BrowserStack you need to provide your BrowserStack credentials. Sign into your BrowserStack account and navigate to your `User Profile` and find your auth username and access key. In your local terminal export the following env vars to set the BrowserStack credentials that the tests will use:
@@ -90,6 +166,12 @@ export BROWSERSTACK_USERNAME=<your-browserstack-user-name>
90166
export BROWSERSTACK_ACCESS_KEY=<your-browserstack-access-key>
91167
```
92168

169+
To run the E2E tests on BrowserStack (still in `test/e2e`):
170+
171+
```bash
172+
npm run e2e-test-browserstack
173+
```
174+
93175
To run the production sanity test on BrowserStack (still in `test/e2e`):
94176

95177
```bash

‎test/e2e/const/constants.ts‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1+
// environment where the tests will run
2+
export const APPT_TARGET_ENV = String(process.env.APPT_TARGET_ENV);
3+
14
// appointment urls
25
export const APPT_URL = String(process.env.APPT_URL);
36
export const APPT_MY_SHARE_LINK = String(process.env.APPT_MY_SHARE_LINK);
47
export const APPT_SHORT_SHARE_LINK_PREFIX = String(process.env.APPT_SHORT_SHARE_LINK_PREFIX);
58
export const APPT_LONG_SHARE_LINK_PREFIX = String(process.env.APPT_LONG_SHARE_LINK_PREFIX);
6-
export const APPT_PROD_PENDING_BOOKINGS_PAGE = `${process.env.APPT_URL}bookings/pending`;
9+
export const APPT_PENDING_BOOKINGS_PAGE = `${process.env.APPT_URL}bookings/pending`;
10+
export const APPT_BOOKED_BOOKINGS_PAGE = `${process.env.APPT_URL}bookings/booked`;
711

812
// page titles
913
export const APPT_PAGE_TITLE = 'Thunderbird Appointment';
1014
export const FXA_PAGE_TITLE = 'Mozilla accounts';
1115

12-
// production sign-in credentials and corresponding account display name
13-
export const PROD_LOGIN_EMAIL = String(process.env.APPT_LOGIN_EMAIL);
14-
export const PROD_LOGIN_PWORD = String(process.env.APPT_LOGIN_PWORD);
16+
// sign-in credentials and corresponding account display name
17+
export const APPT_LOGIN_EMAIL = String(process.env.APPT_LOGIN_EMAIL);
18+
export const APPT_LOGIN_PWORD = String(process.env.APPT_LOGIN_PWORD);
1519

1620
// appointment user display name (settings => account) for above user
17-
export const PROD_DISPLAY_NAME = String(process.env.APPT_DISPLAY_NAME);
21+
export const APPT_DISPLAY_NAME = String(process.env.APPT_DISPLAY_NAME);
1822

1923
// appointment requester's name and email address
20-
export const APPT_BOOKING_REQUESTER_NAME = String(process.env.APPT_BOOKING_REQUESTER_NAME);
21-
export const APPT_BOOKING_REQUESTER_EMAIL = String(process.env.APPT_BOOKING_REQUESTER_EMAIL);
24+
export const APPT_BOOKEE_NAME = String(process.env.APPT_BOOKEE_NAME);
25+
export const APPT_BOOKEE_EMAIL = String(process.env.APPT_BOOKEE_EMAIL);
26+
27+
// playwright test tags
28+
export const PLAYWRIGHT_TAG_PROD_SANITY = '@prod-sanity';
29+
export const PLAYWRIGHT_TAG_E2E_SUITE = '@e2e-suite';

‎test/e2e/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@
33
"version": "1.0.0",
44
"main": "index.js",
55
"scripts": {
6+
"e2e-test": "npx playwright test --grep e2e-suite --project=firefox",
7+
"e2e-test-headed": "npx playwright test --grep e2e-suite --project=firefox --headed",
8+
"e2e-test-debug": "npx playwright test --grep e2e-suite --project=firefox --headed --ui",
9+
"e2e-test-browserstack": "npx browserstack-node-sdk playwright test --grep e2e-suite --browserstack.buildName 'Appointment E2E Tests'",
10+
"e2e-test-browserstack-gha": "npx browserstack-node-sdk playwright test --grep e2e-suite",
611
"prod-sanity-test": "npx playwright test --grep prod-sanity --project=firefox",
7-
"prod-sanity-test-ui": "npx playwright test --grep prod-sanity --project=firefox --headed",
12+
"prod-sanity-test-headed": "npx playwright test --grep prod-sanity --project=firefox --headed",
813
"prod-sanity-test-debug": "npx playwright test --grep prod-sanity --project=firefox --headed --ui",
914
"prod-sanity-test-browserstack": "npx browserstack-node-sdk playwright test --grep prod-sanity --browserstack.buildName 'Production Sanity Test'",
1015
"prod-sanity-test-browserstack-gha": "npx browserstack-node-sdk playwright test --grep prod-sanity",

‎test/e2e/pages/booking-page.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export class BookingPage {
1717
readonly requestSentTitleText: Locator;
1818
readonly requestSentAvailabilityText: Locator;
1919
readonly requestSentCloseBtn: Locator;
20+
readonly eventBookedTitleText: Locator;
2021

2122
constructor(page: Page) {
2223
this.page = page;
@@ -33,6 +34,7 @@ export class BookingPage {
3334
this.requestSentTitleText = this.page.getByText('Booking request sent');
3435
this.requestSentAvailabilityText = this.page.getByText("'s Availability");
3536
this.requestSentCloseBtn = this.page.getByRole('button', { name: 'Close' });
37+
this.eventBookedTitleText = this.page.getByText('Event booked!');
3638
}
3739

3840
/**

0 commit comments

Comments
 (0)