Expand prod sanity test

.github/workflows/deploy-production.yml

@@ -242,6 +242,8 @@ jobs:
     env:
       APPT_PROD_LOGIN_EMAIL: ${{ secrets.E2E_APPT_PROD_LOGIN_EMAIL }}
       APPT_PROD_LOGIN_PWORD: ${{ secrets.E2E_APPT_PROD_LOGIN_PASSWORD }}
+      APPT_PROD_DISPLAY_NAME: ${{ secrets.E2E_APPT_PROD_DISPLAY_NAME }}
+      APPT_PROD_MY_SHARE_LINK: ${{ secrets.E2E_APPT_PROD_MY_SHARE_LINK }}
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/nightly-tests.yml

@@ -22,6 +22,8 @@ jobs:
     env:
       APPT_PROD_LOGIN_EMAIL: ${{ secrets.E2E_APPT_PROD_LOGIN_EMAIL }}
       APPT_PROD_LOGIN_PWORD: ${{ secrets.E2E_APPT_PROD_LOGIN_PASSWORD }}
+      APPT_PROD_DISPLAY_NAME: ${{ secrets.E2E_APPT_PROD_DISPLAY_NAME }}
+      APPT_PROD_MY_SHARE_LINK: ${{ secrets.E2E_APPT_PROD_MY_SHARE_LINK }}
     steps:
       - uses: actions/checkout@v4
 

test/e2e/.env.example

@@ -2,7 +2,15 @@
 
 # URLs
 APPT_PROD_URL=https://appointment.day/
+APPT_PROD_SHORT_SHARE_LINK_PREFIX=https://apmt.day/
+APPT_PROD_LONG_SHARE_LINK_PREFIX=https://appointment.day/user/
 
 # Production sign-in (FxA) credentials
 APPT_PROD_LOGIN_EMAIL=
 APPT_PROD_LOGIN_PWORD=
+
+# Appointment user display name (settings => account => display name) for above user
+APPT_PROD_DISPLAY_NAME=
+
+# Production booking share link for the existing user above (settings => account => my link)
+APPT_PROD_MY_SHARE_LINK=

test/e2e/README.md

@@ -6,6 +6,8 @@ Guide for running the Thunderbird Appointment E2E tests.
 
 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.
 
+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.
+
 ## Installation
 
 First install the E2E suite (includes Playwright):
@@ -23,17 +25,26 @@ npx playwright install
 
 ## Running Locally
 
-The E2E tests require credentials for an existing Appointment (FxA) account and reads these from your local env vars. First copy over the provided `.example.env` to a local `.env`:
+The E2E tests require credentials for an existing Appointment (FxA) account and reads these from your local env vars.
+The tests also require the existing Appointment account user's display name and share link.
+<br><br>
+The display name is found in Appointment => Settings => Account => Display name.
+<br><br>
+The share link is found in Appointment => Settings => Account => My Link.
+<br><br>
+First copy over the provided `.example.env` to a local `.env`:
 
 ```bash
 cd test/e2e
 cp .env.example .env
 ```
 
-Then edit your local `.env` file and provide the credentials for your Appointment test account:
+Then edit your local `.env` file and provide the following values:
 ```dotenv
 APPT_PROD_LOGIN_EMAIL=<existing-test-FxA-user-email>
 APPT_PROD_LOGIN_PWORD=<exisiting-test-FxA-user-password>
+APPT_PROD_DISPLAY_NAME=<appointment-user-display-name>
+APPT_PROD_MY_SHARE_LINK=<apointment-user-share-link>
 ```
 
 To run the production sanity test headless (still in `test/e2e`):
@@ -60,11 +71,13 @@ You can run the E2E tests from your local machine but against browsers provided
 
 <b>For security reasons when running the tests on BrowserStack I recommend that you use a dedicated test Appointment FxA account / credentials (NOT your own personal Appointment (FxA) credentials).</b>
 
-Once you have credentials for an existing Appointemnt test account, edit your local `.env` file and add the credentials:
+Once you have credentials for an existing Appointemnt test account, edit your local `.env` file and add these details:
 
 ```dotenv
 APPT_PROD_LOGIN_EMAIL=<existing-test-FxA-user-email>
 APPT_PROD_LOGIN_PWORD=<exisiting-test-FxA-user-password>
+APPT_PROD_DISPLAY_NAME=<appointment-user-display-name>
+APPT_PROD_MY_SHARE_LINK=<apointment-user-share-link>
 ```
 
 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:

test/e2e/browserstack.yml

@@ -29,10 +29,14 @@ platforms:
     osVersion: Sequoia
     browserName: playwright-firefox
     browserVersion: latest
+    playwrightConfigOptions:
+      name: Firefox-OSX
   - os: OS X
     osVersion: Sequoia
     browserName: playwright-chromium
     browserVersion: latest
+    playwrightConfigOptions:
+      name: Chromium-OSX
 
 # =======================
 # Parallels per Platform

test/e2e/const/constants.ts

@@ -1,10 +1,16 @@
 // appointment urls
 export const APPT_PROD_URL = process.env.APPT_PROD_URL;
+export const APPT_PROD_MY_SHARE_LINK = String(process.env.APPT_PROD_MY_SHARE_LINK);
+export const APPT_PROD_SHORT_SHARE_LINK_PREFIX = String(process.env.APPT_PROD_SHORT_SHARE_LINK_PREFIX);
+export const APPT_PROD_LONG_SHARE_LINK_PREFIX = String(process.env.APPT_PROD_LONG_SHARE_LINK_PREFIX);
 
 // page titles
 export const APPT_PAGE_TITLE = 'Thunderbird Appointment';
 export const FXA_PAGE_TITLE = 'Mozilla accounts';
 
-// production sign-in credentials
+// production sign-in credentials and corresponding account display name
 export const PROD_LOGIN_EMAIL = process.env.APPT_PROD_LOGIN_EMAIL;
 export const PROD_LOGIN_PWORD = process.env.APPT_PROD_LOGIN_PWORD;
+
+// appointment user display name (settings => account) for above user
+export const PROD_DISPLAY_NAME = String(process.env.APPT_PROD_DISPLAY_NAME);

test/e2e/pages/booking-page.ts

@@ -0,0 +1,24 @@
+import { type Page, type Locator } from '@playwright/test';
+
+export class BookingPage {
+  readonly page: Page;
+  readonly titleText: Locator;
+  readonly invitingText: Locator;
+  readonly confirmButton: Locator;
+  readonly bookingCalendar: Locator;
+  readonly calendarHeader: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.titleText = page.getByTestId('booking-view-title-text');
+    this.invitingText = page.getByTestId('booking-view-inviting-you-text');
+    this.bookingCalendar = page.getByTestId('booking-view-calendar-div');
+    this.confirmButton = page.getByTestId('booking-view-confirm-selection-button');
+    this.calendarHeader = page.locator('.calendar-header__period-name');
+  }
+
+  async gotoBookingPage(bookingPageURL: string) {
+    await this.page.goto(bookingPageURL);
+    await this.page.waitForLoadState('domcontentloaded');
+  }
+}

test/e2e/pages/dashboard-page.ts

@@ -1,5 +1,4 @@
-import { expect, type Page, type Locator } from '@playwright/test';
-import exp from 'constants';
+import { type Page, type Locator } from '@playwright/test';
 
 export class DashboardPage {
   readonly page: Page;

test/e2e/tests/book-appointment.spec.ts

@@ -0,0 +1,62 @@
+import { test, expect } from '@playwright/test';
+import { BookingPage } from '../pages/booking-page';
+import { PROD_DISPLAY_NAME, APPT_PROD_MY_SHARE_LINK } from '../const/constants';
+import { APPT_PROD_SHORT_SHARE_LINK_PREFIX, APPT_PROD_LONG_SHARE_LINK_PREFIX } from '../const/constants';
+
+let bookingPage: BookingPage;
+
+// verify booking page loaded successfully
+const verifyBookingPageLoaded = async () => {
+  await expect(bookingPage.titleText).toBeVisible({ timeout: 30_000 });
+  await expect(bookingPage.titleText).toContainText(PROD_DISPLAY_NAME);
+  await expect(bookingPage.invitingText).toBeVisible();
+  await expect(bookingPage.invitingText).toContainText(PROD_DISPLAY_NAME);
+  await expect(bookingPage.bookingCalendar).toBeVisible();
+  // calendar header should contain current MMM YYYY
+  let today = new Date();
+  let curMonth = today.toLocaleString('default', { month: 'short' });
+  var curYear = String(today.getFullYear());
+  await expect(bookingPage.calendarHeader).toHaveText(`${curMonth} ${curYear}`);
+  // confirm button is disabled by default until a slot is selected
+  await expect(bookingPage.confirmButton).toBeDisabled();
+}
+
+test.beforeEach(async ({ page }) => {
+  bookingPage = new BookingPage(page);
+});
+
+// verify we are able to book an appointment using existing user's share link
+test.describe('book an appointment', {
+  tag: '@prod-sanity'
+}, () => {
+  test('able to access booking page via short link', async ({ page }) => {
+    await bookingPage.gotoBookingPage(APPT_PROD_MY_SHARE_LINK);
+    await verifyBookingPageLoaded();
+  });
+
+  test('able to access booking page via long link', async ({ page }) => {
+    // the share link is short by default; build the corresponding long link first
+    let prodShareLinkUser: string = APPT_PROD_MY_SHARE_LINK.split(APPT_PROD_SHORT_SHARE_LINK_PREFIX)[1];
+    let prodShareLinkLong: string = `${APPT_PROD_LONG_SHARE_LINK_PREFIX}${prodShareLinkUser}`;
+    await bookingPage.gotoBookingPage(prodShareLinkLong);
+    await verifyBookingPageLoaded();
+  });
+
+  test('able to request a booking', async ({ page }) => {
+    await bookingPage.gotoBookingPage(APPT_PROD_MY_SHARE_LINK);
+
+    // by default we arrive on month view; if it happens to be the end of the month there may not
+    // be any available appointment slots and we may need to go forward to the next month, but
+    // let's first check for a specific slot (?)
+    // this fails and says multi available
+    //await expect(page.getByText('9:00 AM - 09:30 AM')).toBeVisible();
+    // these work - and result is the specific time slot is selected
+    await expect(page.locator('[id="calendar-month__event-2025-01-08\\ 09\\:002025-01-08"]').getByText('9:00 AM - 09:30 AM'))
+      .toBeVisible();
+    await page.locator('[id="calendar-month__event-2025-01-08\\ 09\\:002025-01-08"]').getByText('9:00 AM - 09:30 AM')
+      .click();
+    // move above into bookingPage also; may need to get current date and then get next upcoming weekday? and get that slot?
+
+    await bookingPage.confirmButton.click();
+  });
+});

test/e2e/tests/sign-in.spec.ts

@@ -1,39 +1,39 @@
 import { test, expect } from '@playwright/test';
 import { SplashscreenPage } from '../pages/splashscreen-page';
 import { FxAPage } from '../pages/fxa-page';
-import { FXA_PAGE_TITLE, APPT_PAGE_TITLE } from '../const/constants';
+import { APPT_PAGE_TITLE } from '../const/constants';
 import { DashboardPage } from '../pages/dashboard-page';
 
-let splashscreen: SplashscreenPage;
-let fxa_sign_in: FxAPage;
-let dashboard_page: DashboardPage;
+let splashscreenPage: SplashscreenPage;
+let signInPage: FxAPage;
+let dashboardPage: DashboardPage;
 
 test.beforeEach(async ({ page }) => {
   // navigate to the main appointment page (splashscreen)
-  splashscreen = new SplashscreenPage(page);
-  fxa_sign_in = new FxAPage(page);
-  dashboard_page = new DashboardPage(page);
-  await splashscreen.gotoProd();
+  splashscreenPage = new SplashscreenPage(page);
+  signInPage = new FxAPage(page);
+  dashboardPage = new DashboardPage(page);
+  await splashscreenPage.gotoProd();
 });
 
 // verify we are able to sign-in
 test.describe('sign-in', {
   tag: '@prod-sanity'
 }, () => {
   test('able to sign-in', async ({ page }) => {
-    await splashscreen.getToFxA();
+    await splashscreenPage.getToFxA();
 
-    await expect(fxa_sign_in.signInHeaderText).toBeVisible({ timeout: 30_000 }); // generous time for fxa to appear
-    await expect(fxa_sign_in.userAvatar).toBeVisible({ timeout: 30_000});
-    await expect(fxa_sign_in.signInButton).toBeVisible();
+    await expect(signInPage.signInHeaderText).toBeVisible({ timeout: 30_000 }); // generous time for fxa to appear
+    await expect(signInPage.userAvatar).toBeVisible({ timeout: 30_000});
+    await expect(signInPage.signInButton).toBeVisible();
 
-    await fxa_sign_in.signIn();
+    await signInPage.signIn();
 
     await page.waitForLoadState('domcontentloaded');
 
     await expect(page).toHaveTitle(APPT_PAGE_TITLE, { timeout: 30_000 }); // give generous time for fxa sign-in
-    await expect(dashboard_page.userMenuAvatar).toBeVisible({ timeout: 30_000 });
-    await expect(dashboard_page.navBarDashboardBtn).toBeVisible({ timeout: 30_000 });
-    await expect(dashboard_page.shareMyLink).toBeVisible({ timeout: 30_000 });
+    await expect(dashboardPage.userMenuAvatar).toBeVisible({ timeout: 30_000 });
+    await expect(dashboardPage.navBarDashboardBtn).toBeVisible({ timeout: 30_000 });
+    await expect(dashboardPage.shareMyLink).toBeVisible({ timeout: 30_000 });
   });
 });

test/e2e/tests/splashscreen.spec.ts

@@ -2,12 +2,12 @@ import { test, expect } from '@playwright/test';
 import { SplashscreenPage } from '../pages/splashscreen-page';
 import { APPT_PAGE_TITLE } from '../const/constants';
 
-let splashscreen: SplashscreenPage;
+let splashscreenPage: SplashscreenPage;
 
 test.beforeEach(async ({ page }) => {
   // navigate to the main appointment page (splashscreen)
-  splashscreen = new SplashscreenPage(page);
-  await splashscreen.gotoProd();
+  splashscreenPage = new SplashscreenPage(page);
+  await splashscreenPage.gotoProd();
 });
 
 // verify main appointment splash screen appears correctly
@@ -16,7 +16,7 @@ test.describe('splash screen', {
 }, () => {
   test('appears correctly', async ({ page }) => {
     await expect(page).toHaveTitle(APPT_PAGE_TITLE);
-    await expect(splashscreen.loginBtn).toBeVisible();
-    await expect(splashscreen.signUpBetaBtn).toBeVisible();
+    await expect(splashscreenPage.loginBtn).toBeVisible();
+    await expect(splashscreenPage.signUpBetaBtn).toBeVisible();
   });
 });