Expand the production sanity test

.github/workflows/deploy-production.yml

@@ -242,6 +242,9 @@ 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 }}
+      APPT_BOOKING_REQUESTER_EMAIL: ${{ secrets.E2E_APPT_PROD_BOOKING_REQUESTER_EMAIL }}
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/nightly-tests.yml

@@ -22,6 +22,9 @@ 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 }}
+      APPT_BOOKING_REQUESTER_EMAIL: ${{ secrets.E2E_APPT_PROD_BOOKING_REQUESTER_EMAIL }}
     steps:
       - uses: actions/checkout@v4
 

test/e2e/.env.example

@@ -2,7 +2,19 @@
 
 # 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=
+
+# Booking requester's email address (used when a booking slot is requested via the share link)
+# Important: real appointment booking emails will be sent here
+APPT_BOOKING_REQUESTER_EMAIL=

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,29 @@ 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.
+This includes the existing Appointment account's email address, password, 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>
+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.
+<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>
+APPT_BOOKING_REQUESTER_EMAIL=<booking-requesters-email>
 ```
 
 To run the production sanity test headless (still in `test/e2e`):
@@ -60,11 +74,14 @@ 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 (more information found above):
 
 ```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>
+APPT_BOOKING_REQUESTER_EMAIL=<booking-requesters-email>
 ```
 
 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
@@ -63,7 +67,7 @@ browserstackLocal: false # <boolean> (Default false)
 # ===================
 debug: false # <boolean> # Set to true if you need screenshots for every selenium command ran
 networkLogs: false # <boolean> Set to true to enable HAR logs capturing; off as may contain sensitive info like login API requests
-consoleLogs: errors # <string> Remote browser's console debug levels to be printed (Default: errors)
+consoleLogs: info # <string> Remote browser's console debug levels to be printed (Default: errors)
 # Available options are `disable`, `errors`, `warnings`, `info`, `verbose` (Default: errors)
 framework: playwright
 browserstack.playwrightLogs: false # disable playwright logs appearing on browserstack builds as may contain sensitive info like credentials

test/e2e/const/constants.ts

@@ -1,10 +1,19 @@
 // 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);
+
+// appointment requester's email address
+export const APPT_BOOKING_REQUESTER_EMAIL = String(process.env.APPT_BOOKING_REQUESTER_EMAIL);

test/e2e/pages/booking-page.ts

@@ -0,0 +1,101 @@
+import { expect } from '@playwright/test';
+import { type Page, type Locator } from '@playwright/test';
+import { APPT_PROD_MY_SHARE_LINK, APPT_PROD_SHORT_SHARE_LINK_PREFIX, APPT_PROD_LONG_SHARE_LINK_PREFIX } from '../const/constants';
+
+export class BookingPage {
+  readonly page: Page;
+  readonly titleText: Locator;
+  readonly invitingText: Locator;
+  readonly confirmBtn: Locator;
+  readonly bookingCalendar: Locator;
+  readonly calendarHeader: Locator;
+  readonly nextMonthArrow: Locator;
+  readonly availableBookingSlot: Locator;
+  readonly bookSelectionNameInput: Locator;
+  readonly bookSelectionEmailInput: Locator;
+  readonly bookSelectionBookBtn: Locator;
+  readonly requestSentTitleText: Locator;
+  readonly requestSentAvailabilityText: Locator;
+  readonly requestSentBookingSlot: Locator;
+  readonly requestSentCloseBtn: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.titleText = this.page.getByTestId('booking-view-title-text');
+    this.invitingText = this.page.getByTestId('booking-view-inviting-you-text');
+    this.bookingCalendar = this.page.getByTestId('booking-view-calendar-div');
+    this.confirmBtn = this.page.getByTestId('booking-view-confirm-selection-button');
+    this.calendarHeader = this.page.locator('.calendar-header__period-name');
+    this.nextMonthArrow = this.page.locator('[data-icon="chevron-right"]');
+    this.availableBookingSlot = this.page.locator('[data-test="day-event"]', { hasNotText: 'Busy'});
+    this.bookSelectionNameInput = this.page.getByPlaceholder('First and last name');
+    this.bookSelectionEmailInput = this.page.getByPlaceholder('[email protected]');
+    this.bookSelectionBookBtn = this.page.getByRole('button', { name: 'Book' });
+    this.requestSentTitleText = this.page.locator('.todo');
+    this.requestSentAvailabilityText = this.page.locator('.todo');
+    this.requestSentBookingSlot = this.page.locator('.todo');
+    this.requestSentCloseBtn = this.page.locator('.todo');
+  }
+
+  async gotoBookingPageShortUrl() {
+    // the default share link is a short URL
+    await this.page.goto(APPT_PROD_MY_SHARE_LINK);
+    await this.page.waitForLoadState('domcontentloaded');
+  }
+
+  async gotoBookingPageLongUrl() {
+    // the share link is short by default; build the corresponding long link first
+    const prodShareLinkUser: string = APPT_PROD_MY_SHARE_LINK.split(APPT_PROD_SHORT_SHARE_LINK_PREFIX)[1];
+    const longLink: string = `${APPT_PROD_LONG_SHARE_LINK_PREFIX}${prodShareLinkUser}`;
+    await this.page.goto(longLink);
+    await this.page.waitForLoadState('domcontentloaded');
+  }
+
+  async gotoBookingPageWeekView() {
+    const weekLink: string = `${APPT_PROD_MY_SHARE_LINK}#week`;
+    await this.page.goto(weekLink);
+    await this.page.waitForLoadState('domcontentloaded');
+    await this.confirmBtn.isVisible();
+  }
+
+  async goForwardOneWeek() {
+    // with the booking page week view already displayed, go forward to the next week
+    await this.nextMonthArrow.click();
+    await this.page.waitForLoadState('domcontentloaded');
+    await this.confirmBtn.isVisible();
+  }
+
+  async selectAvailableBookingSlot(userDisplayName: string): Promise<string|null> {
+    // with the booking page week view already displayed, select an available booking time slot
+    // let's check if a non-busy appointment slot exists in the current week view
+    const slotCount: number = await this.availableBookingSlot.count();
+    console.log(`available slot count: ${slotCount}`);
+
+    // if no slots are available in current week view then fast forward to next week
+    if (slotCount === 0) {
+      console.log('no slots available in current week, skipping ahead to the next week');
+      await this.goForwardOneWeek();
+      // now check again for available slots; if none then fail out the test (safety catch but shouldn't happen)
+      const newSlotCount: number = await this.availableBookingSlot.count();
+      console.log(`available slot count: ${newSlotCount}`);
+      expect(newSlotCount, `no booking slots available, please check availability settings for ${userDisplayName}`).toBeGreaterThan(0);
+    }
+
+    // slots are available in current week view so get the first one
+    const firstSlot: Locator = this.availableBookingSlot.first();
+    const slotRef: string|null = await firstSlot.getAttribute('data-ref'); // ie. 'event-2025-01-08 09:30'
+    expect(slotRef?.length, 'selected slot has no text').toBeGreaterThan(0);
+    // now that we've found an availalbe slot select it and confirm
+    await firstSlot.click();
+    return slotRef;
+  }
+
+  async finishBooking(bookerName: string, bookerEmail: string) {
+    // after an appointment slot is selected (on the booking share link page) the 'book selection'
+    // dialog appears; this method will fill out that dialog: fill in the booking requester's name,
+    // email address and then click the 'book' button which will finalize the booking request
+    await this.bookSelectionNameInput.fill(bookerName);
+    await this.bookSelectionEmailInput.fill(bookerEmail);
+    await this.bookSelectionBookBtn.click();
+  }
+}

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/playwright.config.ts

@@ -22,7 +22,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : 1, // actualy don't run in parallel locally either, for now
   // Tests will timeout if still running after this time (ms)
-  timeout: 3 * 60 * 1000,
+  timeout: 1 * 60 * 1000,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [['list']],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

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

@@ -0,0 +1,65 @@
+import { test, expect } from '@playwright/test';
+import { BookingPage } from '../pages/booking-page';
+import { PROD_DISPLAY_NAME, APPT_BOOKING_REQUESTER_EMAIL } from '../const/constants';
+
+var 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
+  const today: Date = new Date();
+  const curMonth: string = today.toLocaleString('default', { month: 'short' });
+  const curYear: string = String(today.getFullYear());
+  await expect(bookingPage.calendarHeader).toHaveText(`${curMonth} ${curYear}`);
+  // confirm button is disabled by default until a slot is selected
+  await expect(bookingPage.confirmBtn).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.gotoBookingPageShortUrl();
+    await verifyBookingPageLoaded();
+  });
+
+  test('able to access booking page via long link', async ({ page }) => {
+    await bookingPage.gotoBookingPageLongUrl();
+    await verifyBookingPageLoaded();
+  });
+
+  test('able to request a booking', async ({ page }) => {
+    // in order to ensure we find an open available slot let's first switch to week view via the URL
+    await bookingPage.gotoBookingPageWeekView();
+    await expect(bookingPage.titleText).toBeVisible({ timeout: 30_000 });
+
+    // now select an available booking time slot  
+    const selectedSlot: string|null = await bookingPage.selectAvailableBookingSlot(PROD_DISPLAY_NAME);
+    console.log(`selected appointment time slot: ${selectedSlot}`);
+
+    // now we have an availble booking time slot selected, click confirm button
+    await bookingPage.confirmBtn.click();
+
+    // now fill out the book selection dialog with booking requester's info and book it
+    await bookingPage.finishBooking('Automated-Test-Bot', APPT_BOOKING_REQUESTER_EMAIL);
+
+    // confirm the 'booking request sent' dialog appears and has correct info, then close it
+    // expect...
+    // todo
+
+
+    // now sign into appointment and verify hold was created for the requested booking slot
+    // expect...
+    // todo
+  });
+});

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 });
   });
 });