@ -38,13 +38,19 @@
* /
import { test , expect , Page } from '@playwright/test' ;
import { importUser } from './testUtils' ;
import { importUser , getOSSpecificTimeout } from './testUtils' ;
// Add timeout constants
const ALERT_TIMEOUT = 5000 ;
const NETWORK_TIMEOUT = 10000 ;
// Update timeout constants for Linux
const BASE_TIMEOUT = getOSSpecificTimeout ( ) ;
const ALERT_TIMEOUT = BASE_TIMEOUT / 6 ;
const NETWORK_TIMEOUT = BASE_TIMEOUT / 3 ;
const ANIMATION_TIMEOUT = 1000 ;
// Add test configuration to increase timeout
test . describe ( 'Contact Management' , ( ) = > {
// Increase timeout for all tests in this group
test . setTimeout ( BASE_TIMEOUT * 2 ) ;
test ( 'Add contact, record gift, confirm gift' , async ( { page } ) = > {
try {
// Generate test data with error checking
@ -134,6 +140,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
throw error ;
}
} ) ;
} ) ;
// Helper functions
async function generateRandomString ( length : number ) : Promise < string > {
@ -158,22 +165,138 @@ async function dismissAlertWithRetry(page: Page, maxRetries = 3) {
}
async function recordGift ( page : Page , contactName : string , title : string , amount : number ) {
// First navigate to home
await page . goto ( './' ) ;
await page . getByTestId ( 'closeOnboardingAndFinish' ) . click ( ) ;
const TIMEOUT = getOSSpecificTimeout ( ) ;
let retryCount = 3 ;
// Click on the contact name and wait for navigation
await page . getByRole ( 'heading' , { name : contactName } ) . click ( ) ;
await expect ( page . getByPlaceholder ( 'What was given' ) ) . toBeVisible ( { timeout : NETWORK_TIMEOUT } ) ;
while ( retryCount > 0 ) {
try {
console . log ( ` Gift recording attempt ${ 4 - retryCount } /3 ` ) ;
// Fill in gift details
await page . getByPlaceholder ( 'What was given' ) . fill ( title ) ;
await page . getByRole ( 'spinbutton' ) . fill ( amount . toString ( ) ) ;
await page . getByRole ( 'button' , { name : 'Sign & Send' } ) . click ( ) ;
// First navigate to home and ensure it's loaded
await page . goto ( './' , { timeout : TIMEOUT } ) ;
await Promise . all ( [
page . waitForLoadState ( 'networkidle' , { timeout : TIMEOUT } ) ,
page . waitForLoadState ( 'domcontentloaded' , { timeout : TIMEOUT } )
] ) ;
// Wait for confirmation
await expect ( page . getByText ( 'That gift was recorded.' ) ) . toBeVisible ( { timeout : NETWORK_TIMEOUT } ) ;
await page . locator ( 'div[role="alert"] button > svg.fa-xmark' ) . click ( ) ; // dismiss info alert
// Handle onboarding first
const onboardingButton = page . getByTestId ( 'closeOnboardingAndFinish' ) ;
if ( await onboardingButton . isVisible ( ) ) {
console . log ( 'Closing onboarding dialog...' ) ;
await onboardingButton . click ( ) ;
await expect ( onboardingButton ) . toBeHidden ( ) ;
await page . waitForTimeout ( 1000 ) ;
}
// Navigate to contact's details page
await page . goto ( './contacts' , { timeout : TIMEOUT } ) ;
await page . waitForLoadState ( 'networkidle' , { timeout : TIMEOUT } ) ;
// Debug current state
console . log ( 'Current URL before clicking contact:' , await page . url ( ) ) ;
console . log ( 'Looking for contact:' , contactName ) ;
// Find and click contact name
const contactHeading = page . getByRole ( 'heading' , { name : contactName } ) . first ( ) ;
await expect ( contactHeading ) . toBeVisible ( { timeout : TIMEOUT } ) ;
await contactHeading . click ( ) ;
// Wait for navigation
await page . waitForLoadState ( 'networkidle' , { timeout : TIMEOUT } ) ;
console . log ( 'Current URL after clicking contact:' , await page . url ( ) ) ;
// Look for gift recording UI elements
const giftButton = page . locator ( [
'button:has-text("Record Gift")' ,
'button:has-text("Give")' ,
'[data-testid="recordGiftButton"]' ,
'a:has-text("Record Gift")' ,
'a:has-text("Give")'
] . join ( ',' ) ) ;
// Debug UI state
const allButtons = await page . locator ( 'button, a' ) . allInnerTexts ( ) ;
console . log ( 'Available buttons:' , allButtons ) ;
// Check if we need to click info first
const infoIcon = page . locator ( 'svg.fa-circle-info' ) . first ( ) ;
if ( await infoIcon . isVisible ( ) ) {
console . log ( 'Found info icon, clicking it first' ) ;
await infoIcon . click ( ) ;
await page . waitForLoadState ( 'networkidle' , { timeout : TIMEOUT } ) ;
}
// Now look for gift button again
if ( await giftButton . count ( ) === 0 ) {
console . log ( 'Gift button not found, taking screenshot' ) ;
await page . screenshot ( { path : 'test-results/missing-gift-button.png' , fullPage : true } ) ;
console . log ( 'Page content:' , await page . content ( ) ) ;
throw new Error ( 'Gift button not found on page' ) ;
}
await expect ( giftButton ) . toBeVisible ( { timeout : TIMEOUT } ) ;
await expect ( giftButton ) . toBeEnabled ( { timeout : TIMEOUT } ) ;
await giftButton . click ( ) ;
// Wait for navigation and form
await Promise . all ( [
page . waitForLoadState ( 'networkidle' , { timeout : TIMEOUT } ) ,
page . waitForLoadState ( 'domcontentloaded' , { timeout : TIMEOUT } )
] ) ;
const giftInput = page . getByPlaceholder ( 'What was given' ) ;
await expect ( giftInput ) . toBeVisible ( { timeout : TIMEOUT } ) ;
// Fill form with verification between steps
await giftInput . fill ( title ) ;
await page . waitForTimeout ( 500 ) ;
const amountInput = page . getByRole ( 'spinbutton' ) ;
await expect ( amountInput ) . toBeVisible ( { timeout : TIMEOUT } ) ;
await amountInput . fill ( amount . toString ( ) ) ;
await page . waitForTimeout ( 500 ) ;
// Submit and wait for response
const submitButton = page . getByRole ( 'button' , { name : 'Sign & Send' } ) ;
await expect ( submitButton ) . toBeEnabled ( { timeout : TIMEOUT } ) ;
await submitButton . click ( ) ;
// Wait for confirmation with API check
const confirmationTimeout = Date . now ( ) + TIMEOUT ;
while ( Date . now ( ) < confirmationTimeout ) {
const isVisible = await page . getByText ( 'That gift was recorded.' ) . isVisible ( ) ;
if ( isVisible ) break ;
await page . waitForTimeout ( 1000 ) ;
}
await expect ( page . getByText ( 'That gift was recorded.' ) ) . toBeVisible ( { timeout : 1000 } ) ;
// If we get here, everything worked
console . log ( 'Gift recording successful' ) ;
return ;
} catch ( error ) {
retryCount -- ;
console . log ( ` Gift recording attempt failed, ${ retryCount } retries remaining ` ) ;
console . error ( 'Error:' , error instanceof Error ? error.message : String ( error ) ) ;
// Take screenshot on failure
if ( ! page . isClosed ( ) ) {
await page . screenshot ( {
path : ` test-results/gift-recording-failure- ${ 4 - retryCount } .png ` ,
fullPage : true
} ) ;
}
if ( retryCount === 0 ) {
console . error ( 'All gift recording attempts failed' ) ;
throw error ;
}
await page . waitForTimeout ( 5000 ) ;
}
}
}
async function switchToUser00 ( page : Page ) {
@ -192,91 +315,55 @@ async function switchToUser00(page: Page) {
}
async function confirmGift ( page : Page , title : string ) {
await page . goto ( './' ) ;
await page . getByTestId ( 'closeOnboardingAndFinish' ) . click ( ) ;
// Wait for the gift to be visible and clickable
const giftElement = page . locator ( 'li' ) . filter ( { hasText : title } ) ;
await expect ( giftElement ) . toBeVisible ( { timeout : NETWORK_TIMEOUT } ) ;
// Route all API requests to port 3000
await page . route ( '**/api/**' , async route = > {
const url = new URL ( route . request ( ) . url ( ) ) ;
if ( url . port === '8081' ) {
const newUrl = ` http://localhost:3000 ${ url . pathname } ${ url . search } ` ;
console . log ( ` Redirecting ${ url . toString ( ) } to ${ newUrl } ` ) ;
route . continue ( { url : newUrl } ) ;
} else {
route . continue ( ) ;
}
} ) ;
const TIMEOUT = getOSSpecificTimeout ( ) ;
await giftElement . locator ( 'a' ) . click ( ) ;
// Wait for both load states with a try-catch
try {
await Promise . all ( [
page . waitForLoadState ( 'networkidle' , { timeout : NETWORK_TIMEOUT } ) ,
page . waitForLoadState ( 'domcontentloaded' , { timeout : NETWORK_TIMEOUT } )
] ) ;
} catch ( e ) {
console . log ( 'Load state error:' , e . message ) ;
}
// Debug: Log all headings and content
const headings = await page . locator ( 'h1, h2, h3, h4, h5, h6' ) . allInnerTexts ( ) ;
console . log ( 'Gift page headings:' , headings ) ;
// Log the current URL
console . log ( 'Current URL:' , page . url ( ) ) ;
// Check for error message and retry if needed
const errorMessage = page . getByText ( 'Something went wrong retrieving claim data' ) ;
const isError = await errorMessage . isVisible ( ) ;
if ( isError ) {
console . log ( 'Error detected, will retry' ) ;
await page . waitForTimeout ( 2000 ) ; // Increased delay
await page . goto ( './' ) ;
await page . waitForTimeout ( 2000 ) ; // Increased delay
await giftElement . locator ( 'a' ) . click ( ) ;
await page . waitForLoadState ( 'networkidle' , { timeout : NETWORK_TIMEOUT } ) ;
await page . goto ( './' , { timeout : TIMEOUT } ) ;
await page . waitForLoadState ( 'networkidle' , { timeout : TIMEOUT } ) ;
// Close onboarding if present
const onboardingButton = page . getByTestId ( 'closeOnboardingAndFinish' ) ;
if ( await onboardingButton . isVisible ( ) ) {
await onboardingButton . click ( ) ;
await page . waitForTimeout ( 1000 ) ;
}
// Wait for either the confirm link or button with increased timeout
const confirmLink = page . getByTestId ( 'confirmGiftLink' ) ;
const confirmButton = page . getByTestId ( 'confirmGiftButton' ) ;
// Debug: Log page content
console . log ( 'Page content before finding gift:' , await page . content ( ) ) ;
console . log ( 'Waiting for confirm element to be visible...' ) ;
// Wait for and find the gift element
const giftElement = page . locator ( 'li, div' ) . filter ( { hasText : title } ) . first ( ) ;
await expect ( giftElement ) . toBeVisible ( { timeout : TIMEOUT } ) ;
console . log ( 'Found gift element' ) ;
try {
// Try both selectors with a longer timeout
const confirmElement = await Promise . race ( [
confirmLink . waitFor ( { state : 'visible' , timeout : NETWORK_TIMEOUT * 2 } ) . then ( ( ) = > confirmLink ) ,
confirmButton . waitFor ( { state : 'visible' , timeout : NETWORK_ TIMEOUT* 2 } ) . then ( ( ) = > confirmButton )
// Click and wait for navigation
await giftElement . click ( ) ;
await Promise . all ( [
page . waitForLoadState ( 'networkidle' , { timeout : TIMEOUT } ) ,
page . waitForLoadState ( 'domcontentloaded' , { timeout : TIMEOUT } )
] ) ;
// Log success and click
console . log ( 'Found confirm element, clicking...' ) ;
await confirmElement . click ( ) ;
} catch ( e ) {
console . log ( 'Error finding confirm element:' , e . message ) ;
// Log the page content for debugging
console . log ( 'Page content:' , await page . content ( ) ) ;
throw e ;
}
// Debug: Log available elements
console . log ( 'Page content after navigation:' , await page . content ( ) ) ;
// Handle confirmation dialog
const confirmDialogButton = page . getByRole ( 'button' , { name : 'Confirm' } ) ;
await expect ( confirmDialogButton ) . toBeVisible ( { timeout : NETWORK_TIMEOUT } ) ;
await confirmDialogButton . click ( ) ;
// Try multiple selectors for confirm button
const confirmElement = page . locator ( [
'[data-testid="confirmGiftLink"]' ,
'[data-testid="confirmGiftButton"]' ,
'button:has-text("Confirm")' ,
'a:has-text("Confirm")'
] . join ( ',' ) ) ;
const yesButton = page . getByRole ( 'button' , { name : 'Yes' } ) ;
await expect ( yesButton ) . toBeVisible ( { timeout : NETWORK_TIMEOUT } ) ;
await yesButton . click ( ) ;
await expect ( confirmElement ) . toBeVisible ( { timeout : TIMEOUT } ) ;
await confirmElement . click ( ) ;
// Wait for confirmation
await expect ( page . getByText ( 'Confirmation submitted.' ) ) . toBeVisible ( { timeout : NETWORK_TIMEOUT } ) ;
await expect ( page . getByText ( 'Confirmation submitted.' ) ) . toBeVisible ( { timeout : TIMEOUT } ) ;
} catch ( error ) {
console . error ( 'Confirmation failed:' , error ) ;
await page . screenshot ( { path : 'test-results/confirmation-failure.png' } ) ;
throw error ;
}
}
async function handleRegistrationAlert ( page : Page ) {
Matthew Raymer
1 week ago