-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
286 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| 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'; | ||
| import exp from '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.getByText('Booking request sent'); | ||
| this.requestSentAvailabilityText = this.page.getByText("'s Availability"); | ||
| this.requestSentBookingSlot = this.page.locator('.todo'); | ||
| this.requestSentCloseBtn = this.page.getByRole('button', { name: 'Close' }); | ||
| } | ||
|
|
||
| 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> { | ||
| // 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(); | ||
| let slotRef = await firstSlot.getAttribute('data-ref'); // ie. 'event-2025-01-08 09:30' | ||
| if (!slotRef) | ||
| slotRef = 'none'; | ||
| expect(slotRef).toContain('event-'); | ||
|
|
||
| // 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(); | ||
| } | ||
|
|
||
| async verifyRequestedSlotTextDisplayed(expSlotDateStr: string, expSlotTimeStr: string) { | ||
| // verify the given expected slot date/time string can be found on the current page | ||
| // the provided exp slot date string should be formatted, for example: 'Friday, January 10, 2025' | ||
| // the provioded exp slot time string should be formatted, for example: '09:00' | ||
| // because of the way the element is we must search by the date text only | ||
| const slotDisplayText: Locator = this.page.getByText(expSlotDateStr); | ||
| await expect(slotDisplayText).toBeVisible(); | ||
| // and the slot text has been found, now verify it also contains the exp time | ||
| await expect(slotDisplayText).toHaveText(`${expSlotDateStr} ${expSlotTimeStr}`); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { test, expect } from '@playwright/test'; | ||
| import { BookingPage } from '../pages/booking-page'; | ||
| import { PROD_DISPLAY_NAME, APPT_BOOKING_REQUESTER_EMAIL } from '../const/constants'; | ||
| import exp from '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); | ||
|
|
||
| // 'boooking request sent' text appears twice, once in the pop-up and once in underlying page | ||
| await expect(bookingPage.requestSentTitleText.first()).toBeVisible({ timeout: 30_000 }); | ||
| await expect(bookingPage.requestSentTitleText.nth(1)).toBeVisible(); | ||
|
|
||
| // booking request sent dialog availability text contains correct user name | ||
| // this text also appears twice, once in the pop-up and once in underlying page | ||
| await expect(bookingPage.requestSentAvailabilityText.first()).toBeVisible(); | ||
| await expect(bookingPage.requestSentAvailabilityText.nth(1)).toBeVisible(); | ||
| const expectedText: string = `${PROD_DISPLAY_NAME}'s Availability`; | ||
| expect(bookingPage.requestSentAvailabilityText.first()).toContainText(expectedText); | ||
| expect(bookingPage.requestSentAvailabilityText.nth(1)).toContainText(expectedText); | ||
|
|
||
| // booking request sent dialog should display the correct time slot that was requested | ||
| // our requested time slot is stored in this format, as example: 'event-2025-01-14 14:30' | ||
| // the dialog reports the slot in this format, as example: 'Tuesday, January 14, 2025 02:30 PM' | ||
| // convert our selected slot value to same format as displayed and verify is displayed | ||
| const selectedSlotDateTime = new Date(selectedSlot.substring(6)); | ||
| const expDateStr = selectedSlotDateTime.toLocaleDateString('default', { dateStyle: 'full' }); | ||
| // now expDateStr looks like this, for example: Tuesday, January 14, 2025 | ||
| // the time in our requested slot is in 24 hour i.e. 14:30, but will be displayed like '02:30 PM' | ||
| var expTimeStr = selectedSlotDateTime.toLocaleTimeString('default', { hour12: true, hour: '2-digit', minute: '2-digit' }); | ||
| // now expTimeStr looks like this, for example: '04:30 p.m.' but need it to be like '04:30 PM' | ||
| expTimeStr = expTimeStr.toUpperCase().replace('.', '').replace('.', ''); | ||
| // now expTimeStr looks like this, for example: 04:30 PM so we are finally ready! | ||
| console.log(`*rw* exp time str: ${expTimeStr}`); | ||
| // now verify the correct date/time is dispalyed on the booking request sent pop-up | ||
| await bookingPage.verifyRequestedSlotTextDisplayed(expDateStr, expTimeStr); | ||
|
|
||
| // TODO: put above in utility function | ||
|
|
||
| // now close out the 'booking request sent' pop-up dialog | ||
| await bookingPage.requestSentCloseBtn.click(); | ||
|
|
||
| // now sign into appointment and verify hold was created for the requested booking slot | ||
| // expect... | ||
| // todo | ||
| }); | ||
| }); |
Oops, something went wrong.