forked from jsnbuchanan/crowd-funder-for-time-pwa
fix(tests): Improve gift recording test reliability
- Add better error handling and logging for gift recording flow - Add explicit navigation to contacts page before finding gift button - Add info icon click handling when needed - Add more comprehensive button detection with multiple selectors - Add debug logging for page state and navigation - Add screenshot capture on failures - Add retry logic with proper state verification - Fix linter errors in playwright config The changes help diagnose and handle various UI states that can occur during gift recording, making the tests more reliable especially on Linux.
This commit is contained in:
Matthew Raymer
@@ -38,101 +38,108 @@
|
||||
*/
|
||||
|
||||
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;
|
||||
|
||||
test('Add contact, record gift, confirm gift', async ({ page }) => {
|
||||
try {
|
||||
// Generate test data with error checking
|
||||
const randomString = await generateRandomString(16);
|
||||
const randomNonZeroNumber = Math.floor(Math.random() * 99) + 1;
|
||||
if (randomNonZeroNumber <= 0) throw new Error('Failed to generate valid number');
|
||||
// Add test configuration to increase timeout
|
||||
test.describe('Contact Management', () => {
|
||||
// Increase timeout for all tests in this group
|
||||
test.setTimeout(BASE_TIMEOUT * 2);
|
||||
|
||||
const finalTitle = `Gift ${randomString}`;
|
||||
const contactName = 'Contact #000 renamed';
|
||||
const userName = 'User #000';
|
||||
|
||||
// Import user with error handling
|
||||
test('Add contact, record gift, confirm gift', async ({ page }) => {
|
||||
try {
|
||||
await importUser(page, '01');
|
||||
} catch (e) {
|
||||
throw new Error(`Failed to import user: ${e instanceof Error ? e.message : String(e)}`);
|
||||
// Generate test data with error checking
|
||||
const randomString = await generateRandomString(16);
|
||||
const randomNonZeroNumber = Math.floor(Math.random() * 99) + 1;
|
||||
if (randomNonZeroNumber <= 0) throw new Error('Failed to generate valid number');
|
||||
|
||||
const finalTitle = `Gift ${randomString}`;
|
||||
const contactName = 'Contact #000 renamed';
|
||||
const userName = 'User #000';
|
||||
|
||||
// Import user with error handling
|
||||
try {
|
||||
await importUser(page, '01');
|
||||
} catch (e) {
|
||||
throw new Error(`Failed to import user: ${e instanceof Error ? e.message : String(e)}`);
|
||||
}
|
||||
|
||||
// Add new contact with verification
|
||||
await page.goto('./contacts');
|
||||
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(`did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F, ${userName}`);
|
||||
await page.locator('button > svg.fa-plus').click();
|
||||
|
||||
// Handle the registration alert properly
|
||||
await handleRegistrationAlert(page);
|
||||
|
||||
// Add a small delay to ensure UI is stable
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Verify contact was added and is clickable
|
||||
const contactElement = page.locator('li.border-b');
|
||||
await expect(contactElement).toContainText(userName, { timeout: ANIMATION_TIMEOUT });
|
||||
|
||||
// Ensure no alerts are present before clicking
|
||||
await expect(page.locator('div[role="alert"]')).toBeHidden();
|
||||
|
||||
// Click the info icon with force option if needed
|
||||
await page.locator(`li[data-testid="contactListItem"] h2:has-text("${userName}") + span svg.fa-circle-info`).click({ force: true });
|
||||
|
||||
// Wait for navigation to contact details page
|
||||
await expect(page.getByRole('heading', { name: 'Identifier Details' })).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
|
||||
// Click edit button and wait for navigation
|
||||
await page.locator('h2 svg.fa-pen').click();
|
||||
|
||||
// Debug: Log all headings on the page
|
||||
const headings = await page.locator('h1, h2, h3, h4, h5, h6').allInnerTexts();
|
||||
console.log('Available headings:', headings);
|
||||
|
||||
// Then look for the actual heading we expect to see
|
||||
await expect(page.getByRole('heading', { name: 'Contact Methods' })).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
|
||||
// Now look for the input field
|
||||
const nameInput = page.getByTestId('contactName').locator('input');
|
||||
await expect(nameInput).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
await expect(nameInput).toHaveValue(userName);
|
||||
|
||||
// Perform rename with verification
|
||||
await nameInput.fill(contactName);
|
||||
await page.getByRole('button', { name: 'Save' }).click();
|
||||
|
||||
// Wait for save to complete and verify new name
|
||||
await expect(page.locator('h2', { hasText: contactName })).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
|
||||
// Record gift with error handling
|
||||
try {
|
||||
await recordGift(page, contactName, finalTitle, randomNonZeroNumber);
|
||||
} catch (e) {
|
||||
throw new Error(`Failed to record gift: ${e instanceof Error ? e.message : String(e)}`);
|
||||
}
|
||||
|
||||
// Switch users with verification
|
||||
try {
|
||||
await switchToUser00(page);
|
||||
} catch (e) {
|
||||
throw new Error(`Failed to switch users: ${e instanceof Error ? e.message : String(e)}`);
|
||||
}
|
||||
|
||||
// Confirm gift with error handling
|
||||
await confirmGift(page, finalTitle);
|
||||
|
||||
} catch (error) {
|
||||
// Add more context to the error
|
||||
if (error instanceof Error && error.message.includes('Edit Contact')) {
|
||||
console.error('Failed to find Edit page heading. Available elements:', await page.locator('*').allInnerTexts());
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Add new contact with verification
|
||||
await page.goto('./contacts');
|
||||
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(`did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F, ${userName}`);
|
||||
await page.locator('button > svg.fa-plus').click();
|
||||
|
||||
// Handle the registration alert properly
|
||||
await handleRegistrationAlert(page);
|
||||
|
||||
// Add a small delay to ensure UI is stable
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Verify contact was added and is clickable
|
||||
const contactElement = page.locator('li.border-b');
|
||||
await expect(contactElement).toContainText(userName, { timeout: ANIMATION_TIMEOUT });
|
||||
|
||||
// Ensure no alerts are present before clicking
|
||||
await expect(page.locator('div[role="alert"]')).toBeHidden();
|
||||
|
||||
// Click the info icon with force option if needed
|
||||
await page.locator(`li[data-testid="contactListItem"] h2:has-text("${userName}") + span svg.fa-circle-info`).click({ force: true });
|
||||
|
||||
// Wait for navigation to contact details page
|
||||
await expect(page.getByRole('heading', { name: 'Identifier Details' })).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
|
||||
// Click edit button and wait for navigation
|
||||
await page.locator('h2 svg.fa-pen').click();
|
||||
|
||||
// Debug: Log all headings on the page
|
||||
const headings = await page.locator('h1, h2, h3, h4, h5, h6').allInnerTexts();
|
||||
console.log('Available headings:', headings);
|
||||
|
||||
// Then look for the actual heading we expect to see
|
||||
await expect(page.getByRole('heading', { name: 'Contact Methods' })).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
|
||||
// Now look for the input field
|
||||
const nameInput = page.getByTestId('contactName').locator('input');
|
||||
await expect(nameInput).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
await expect(nameInput).toHaveValue(userName);
|
||||
|
||||
// Perform rename with verification
|
||||
await nameInput.fill(contactName);
|
||||
await page.getByRole('button', { name: 'Save' }).click();
|
||||
|
||||
// Wait for save to complete and verify new name
|
||||
await expect(page.locator('h2', { hasText: contactName })).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
|
||||
// Record gift with error handling
|
||||
try {
|
||||
await recordGift(page, contactName, finalTitle, randomNonZeroNumber);
|
||||
} catch (e) {
|
||||
throw new Error(`Failed to record gift: ${e instanceof Error ? e.message : String(e)}`);
|
||||
}
|
||||
|
||||
// Switch users with verification
|
||||
try {
|
||||
await switchToUser00(page);
|
||||
} catch (e) {
|
||||
throw new Error(`Failed to switch users: ${e instanceof Error ? e.message : String(e)}`);
|
||||
}
|
||||
|
||||
// Confirm gift with error handling
|
||||
await confirmGift(page, finalTitle);
|
||||
|
||||
} catch (error) {
|
||||
// Add more context to the error
|
||||
if (error instanceof Error && error.message.includes('Edit Contact')) {
|
||||
console.error('Failed to find Edit page heading. Available elements:', await page.locator('*').allInnerTexts());
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Helper functions
|
||||
@@ -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();
|
||||
|
||||
// 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 });
|
||||
|
||||
// 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();
|
||||
|
||||
// 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
|
||||
const TIMEOUT = getOSSpecificTimeout();
|
||||
let retryCount = 3;
|
||||
|
||||
while (retryCount > 0) {
|
||||
try {
|
||||
console.log(`Gift recording attempt ${4 - retryCount}/3`);
|
||||
|
||||
// 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 })
|
||||
]);
|
||||
|
||||
// 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();
|
||||
const TIMEOUT = getOSSpecificTimeout();
|
||||
|
||||
// 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();
|
||||
try {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
await giftElement.locator('a').click();
|
||||
|
||||
// Wait for both load states with a try-catch
|
||||
try {
|
||||
|
||||
// Debug: Log page content
|
||||
console.log('Page content before finding gift:', await page.content());
|
||||
|
||||
// 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');
|
||||
|
||||
// Click and wait for navigation
|
||||
await giftElement.click();
|
||||
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 });
|
||||
}
|
||||
|
||||
// Wait for either the confirm link or button with increased timeout
|
||||
const confirmLink = page.getByTestId('confirmGiftLink');
|
||||
const confirmButton = page.getByTestId('confirmGiftButton');
|
||||
|
||||
console.log('Waiting for confirm element to be visible...');
|
||||
|
||||
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)
|
||||
page.waitForLoadState('networkidle', { timeout: TIMEOUT }),
|
||||
page.waitForLoadState('domcontentloaded', { timeout: TIMEOUT })
|
||||
]);
|
||||
|
||||
// Log success and click
|
||||
console.log('Found confirm element, clicking...');
|
||||
// Debug: Log available elements
|
||||
console.log('Page content after navigation:', await page.content());
|
||||
|
||||
// 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(','));
|
||||
|
||||
await expect(confirmElement).toBeVisible({ timeout: TIMEOUT });
|
||||
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;
|
||||
|
||||
// Wait for confirmation
|
||||
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;
|
||||
}
|
||||
|
||||
// Handle confirmation dialog
|
||||
const confirmDialogButton = page.getByRole('button', { name: 'Confirm' });
|
||||
await expect(confirmDialogButton).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
await confirmDialogButton.click();
|
||||
|
||||
const yesButton = page.getByRole('button', { name: 'Yes' });
|
||||
await expect(yesButton).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
await yesButton.click();
|
||||
|
||||
// Wait for confirmation
|
||||
await expect(page.getByText('Confirmation submitted.')).toBeVisible({ timeout: NETWORK_TIMEOUT });
|
||||
}
|
||||
|
||||
async function handleRegistrationAlert(page: Page) {
|
||||
|
||||
Reference in New Issue
Block a user