Update E2E tests for latest auth changes (#1361)

* Update E2E tests for latest auth changes

* Update email field locator

Author: rwood-moz

test/e2e/pages/availability-page.ts

@@ -2,7 +2,6 @@ import { expect, type Page, type Locator } from '@playwright/test';
 
 import {
   APPT_AVAILABILITY_PAGE,
-  APPT_BOOKINGS_PAGE,
   TIMEOUT_1_SECOND,
   TIMEOUT_3_SECONDS,
   APPT_TIMEZONE_SETTING_PRIMARY,
@@ -59,7 +58,8 @@ export class AvailabilityPage {
     this.calendarSelect = this.page.locator('select[name="calendar"]');
     this.autoConfirmBookingsCheckBox = this.page.getByTestId('availability-automatically-confirm-checkbox');
     this.customizePerDayCheckBox = this.page.getByRole('checkbox', { name: 'Set custom times for each day'});
-    this.customizePerDayCheckBoxContainer = this.page.locator('#app div').filter({ hasText: 'Set custom times for each day' }).nth(4);
+    this.customizePerDayCheckBoxContainer = this.page.locator('label').filter({ hasText: 'Set custom times for each day' }).locator('span').first();
+
     this.allStartTimeInput = this.page.locator('#start_time');
     this.allEndTimeInput = this.page.locator('#end_time');
     this.customStartTime1Input = this.page.getByTestId('availability-start-time-1-0-input');

test/e2e/pages/landing-page.ts

@@ -1,5 +1,5 @@
 import { expect, type Page, type Locator } from '@playwright/test';
-import { TB_ACCTS_EMAIL, TB_ACCTS_PWORD, TIMEOUT_10_SECONDS, TIMEOUT_1_SECOND } from '../const/constants';
+import { TB_ACCTS_EMAIL, TB_ACCTS_PWORD, TIMEOUT_1_SECOND, TIMEOUT_10_SECONDS, TIMEOUT_30_SECONDS } from '../const/constants';
 
 export class TBAcctsPage {
   readonly page: Page;
@@ -8,6 +8,9 @@ export class TBAcctsPage {
   readonly emailInput: Locator;
   readonly passwordInput: Locator;
   readonly signInButton: Locator;
+  readonly loginEmailInput: Locator;
+  readonly localDevpasswordInput: Locator;
+  readonly loginDialogContinueBtn: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -16,6 +19,9 @@ export class TBAcctsPage {
     this.emailInput = this.page.getByTestId('username-input');
     this.passwordInput = this.page.getByTestId('password-input');
     this.signInButton = this.page.getByRole('button', { name: 'Sign in' });
+    this.loginEmailInput = this.page.getByLabel('Email');
+    this.localDevpasswordInput = this.page.getByLabel('Password');
+    this.loginDialogContinueBtn = this.page.getByTitle('Continue');
   }
 
   /**
@@ -25,6 +31,7 @@ export class TBAcctsPage {
     console.log('signing in to TB Accounts');
     expect(TB_ACCTS_EMAIL, 'getting TB_ACCTS_EMAIL env var').toBeTruthy();
     expect(TB_ACCTS_PWORD, 'getting TB_ACCTS_PWORD env var').toBeTruthy();
+    await expect(this.emailInput).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
     await this.emailInput.fill(String(TB_ACCTS_EMAIL));
     await this.page.waitForTimeout(TIMEOUT_1_SECOND);
     await this.passwordInput.fill(String(TB_ACCTS_PWORD));
@@ -33,4 +40,19 @@ export class TBAcctsPage {
     await this.signInButton.click({ force: true });
     await this.page.waitForTimeout(TIMEOUT_10_SECONDS);
   }
+
+  /**
+   * Sign in when running Appointment on the local dev stack; doesn't redirect to TB Accounts login; just local sign-in
+   */
+  async localApptSignIn() {
+    await expect(this.loginEmailInput).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
+    await expect(this.loginDialogContinueBtn).toBeVisible();
+    expect(TB_ACCTS_EMAIL, 'getting TB_ACCTS_EMAIL env var').toBeTruthy();
+    await this.loginEmailInput.fill(TB_ACCTS_EMAIL);
+    await this.page.waitForTimeout(TIMEOUT_1_SECOND);
+    await this.localDevpasswordInput.fill(TB_ACCTS_PWORD);
+    await this.page.waitForTimeout(TIMEOUT_1_SECOND);
+    await this.loginDialogContinueBtn.click();
+    await this.page.waitForTimeout(TIMEOUT_10_SECONDS);
+  }
 }

test/e2e/pages/tb-accts-page.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page } from '@playwright/test';
 import { BookingPage } from '../../pages/booking-page';
 import { DashboardPage } from '../../pages/dashboard-page';
 
@@ -8,13 +8,14 @@ import {
   TIMEOUT_60_SECONDS,
   APPT_TARGET_ENV,
   APPT_TIMEZONE_SETTING_PRIMARY,
+  TIMEOUT_1_SECOND,
 } from '../../const/constants';
 
 var bookingPage: BookingPage;
 var dashboardPage: DashboardPage;
 
 // verify booking page loaded successfully
-const verifyBookingPageLoaded = async () => {
+const verifyBookingPageLoaded = async (page: Page) => {
   await expect(bookingPage.titleText).toBeVisible({ timeout: TIMEOUT_60_SECONDS });
   await expect(bookingPage.titleText).toContainText(APPT_DISPLAY_NAME);
   await expect(bookingPage.invitingText).toBeVisible();
@@ -39,6 +40,7 @@ const verifyBookingPageLoaded = async () => {
   expect(await bookingPage.bookingWeekPickerBtn.textContent()).toContain(monthName);
 
   // also the confirm button is disabled by default until a slot is selected
+  await page.waitForTimeout(TIMEOUT_1_SECOND);
   await expect(bookingPage.confirmBtn).toBeDisabled();
 }
 
@@ -59,7 +61,7 @@ test.describe('access booking page on desktop browser', () => {
     tag: [PLAYWRIGHT_TAG_PROD_SANITY],
   }, async ({ page }) => {
     await bookingPage.gotoBookingPageShortUrl();
-    await verifyBookingPageLoaded();
+    await verifyBookingPageLoaded(page);
   });
 
   test('able to access booking page via long link on desktop browser', {
@@ -68,7 +70,7 @@ test.describe('access booking page on desktop browser', () => {
     // not supported on local dev env
     if (APPT_TARGET_ENV != 'dev') {
       await bookingPage.gotoBookingPageLongUrl();
-      await verifyBookingPageLoaded();
+      await verifyBookingPageLoaded(page);
     }
   });
 });

test/e2e/tests/desktop/access-booking-page.spec.ts

@@ -37,9 +37,9 @@ test.describe('connected applications settings on desktop browser', {
     await settingsPage.addCaldavBtn.scrollIntoViewIfNeeded();
     await settingsPage.addCaldavBtn.click();
     await page.waitForTimeout(TIMEOUT_1_SECOND);
-    await expect(settingsPage.addCaldavUsernameInput).toBeEditable();
-    await expect(settingsPage.addCaldavLocationInput).toBeEditable();
-    await expect(settingsPage.addCaldavPasswordInput).toBeEditable();
+    await expect(settingsPage.addCaldavUsernameInput).toBeVisible();
+    await expect(settingsPage.addCaldavLocationInput).toBeVisible();
+    await expect(settingsPage.addCaldavPasswordInput).toBeVisible();
     await settingsPage.addCaldavCloseModalBtn.click();
     await page.waitForTimeout(TIMEOUT_1_SECOND);
 

test/e2e/tests/desktop/settings-connected-apps.spec.ts

@@ -1,5 +1,4 @@
 // utility functions that may be used by any tests
-import { LandingPage } from "../pages/landing-page";
 import { TBAcctsPage } from "../pages/tb-accts-page";
 import { expect, type Page } from '@playwright/test';
 
@@ -17,7 +16,6 @@ import {
     APPT_BROWSER_STORE_START_WEEK_SUN,
     TIMEOUT_1_SECOND,
     TIMEOUT_2_SECONDS,
-    TIMEOUT_3_SECONDS,
     TIMEOUT_60_SECONDS,
 } from "../const/constants";
 
@@ -28,27 +26,17 @@ import {
  * signing in on the local dev environment you provide a username (email) and password directly
  * and are not redirected to sign in to TB Accounts.
  */
-export const navigateToAppointmentAndSignIn = async (page: Page, mobile: boolean=false) => {
+export const navigateToAppointmentAndSignIn = async (page: Page) => {
     console.log(`navigating to appointment ${APPT_TARGET_ENV} (${APPT_URL}) and signing in`);
-    const landingPage = new LandingPage(page);
     const TBAcctsSignInPage = new TBAcctsPage(page);
-    
+
+    await page.goto(`${APPT_URL}`);
+
     if (APPT_TARGET_ENV == 'prod' || APPT_TARGET_ENV == 'stage') {
-        await landingPage.gotoLandingPage();
-        // check for the 'continue' button first in case sign-in was saved in local cookies
-        if (await landingPage.homeContinueBtn.isVisible() &&  await landingPage.homeContinueBtn.isEnabled()) {
-            console.log("already signed in; just need to click the Appointment home page 'continue' button");
-            await landingPage.homeContinueBtn.click();
-            await page.waitForTimeout(TIMEOUT_3_SECONDS);
-        } else {
-            await landingPage.getToTBAccts(mobile);
-            await TBAcctsSignInPage.signIn();
-        }
+        await TBAcctsSignInPage.signIn();
     } else {
-        // local dev env doesn't use tb accts; just signs into appt using username and pword; must add
-        // '/login' to the APPT_URL since there is no landing / marketing page first when run local stack
-        await page.goto(`${APPT_URL}login`);
-        await landingPage.localApptSignIn();
+        // local dev env doesn't use tb accts; just signs into appt using username and pword
+        await TBAcctsSignInPage.localApptSignIn();
     }
 
     // now that we're signed into the appointment dashboard give it time to load
@@ -108,7 +96,7 @@ export const setDefaultUserSettingsLocalStore = async (page: Page) => {
 export const mobileSignInAndSetup = async (page: Page) => {
     // playwright for mobile browsers doesn't support saving auth storage state, so unfortunately
     // we must sign into Appointment at the start of every test
-    await navigateToAppointmentAndSignIn(page, true);
+    await navigateToAppointmentAndSignIn(page);
 
     // Wait until the page receives the cookies.
     // Sometimes login flow sets cookies in the process of several redirects.