Browse Source

fix(tests): improve Playwright test reliability with robust onboarding and timing fixes

- Fix onboarding dialog handling in project creation tests
  * Replace blocking onboarding dismissal with try-catch approach
  * Use short timeout (2000ms) to detect dialog presence
  * Gracefully handle missing onboarding dialogs on projects page
  * Add console logging for debugging dialog state

- Improve project creation timing and synchronization
  * Add networkidle wait after project save operation
  * Add networkidle wait before project list search
  * Increase timeout for project visibility check (10s)
  * Add debug logging to show all projects in list

- Apply consistent pattern across both test files
  * 20-create-project.spec.ts: Enhanced with timing fixes
  * 25-create-project-x10.spec.ts: Applied onboarding fix

These changes resolve test failures caused by UI timing issues
and onboarding dialog state variability, improving test reliability
from 42/44 passing to expected 44/44 passing tests.
pull/188/head
Matthew Raymer 1 week ago
parent
commit
79cb52419e
  1. 31
      test-playwright/20-create-project.spec.ts
  2. 15
      test-playwright/25-create-project-x10.spec.ts

31
test-playwright/20-create-project.spec.ts

@ -107,11 +107,16 @@ test('Create new project, then search for it', async ({ page }) => {
// Create new project // Create new project
await page.goto('./projects'); await page.goto('./projects');
// close onboarding using established pattern // Check if onboarding dialog exists and close it if present
await page.getByTestId('closeOnboardingAndFinish').click(); try {
await page.waitForFunction(() => { await page.getByTestId('closeOnboardingAndFinish').click({ timeout: 2000 });
return !document.querySelector('.dialog-overlay'); await page.waitForFunction(() => {
}, { timeout: 5000 }); return !document.querySelector('.dialog-overlay');
}, { timeout: 5000 });
} catch (error) {
// No onboarding dialog present, continue
console.log('No onboarding dialog found on projects page');
}
await page.locator('button > svg.fa-plus').click(); await page.locator('button > svg.fa-plus').click();
await page.getByPlaceholder('Idea Name').fill(finalTitle); await page.getByPlaceholder('Idea Name').fill(finalTitle);
await page.getByPlaceholder('Description').fill(finalDescription); await page.getByPlaceholder('Description').fill(finalDescription);
@ -120,13 +125,27 @@ test('Create new project, then search for it', async ({ page }) => {
await page.getByPlaceholder('Start Time').fill(finalTime); await page.getByPlaceholder('Start Time').fill(finalTime);
await page.getByRole('button', { name: 'Save Project' }).click(); await page.getByRole('button', { name: 'Save Project' }).click();
// Wait for project to be saved and page to update
await page.waitForLoadState('networkidle');
// Check texts // Check texts
await expect(page.locator('h2')).toContainText(finalTitle); await expect(page.locator('h2')).toContainText(finalTitle);
await expect(page.locator('#Content')).toContainText(finalDescription); await expect(page.locator('#Content')).toContainText(finalDescription);
// Search for newly-created project in /projects // Search for newly-created project in /projects
await page.goto('./projects'); await page.goto('./projects');
await expect(page.locator('ul#listProjects li').filter({ hasText: finalTitle })).toBeVisible(); // Wait for projects list to load and then search for the project
await page.waitForLoadState('networkidle');
// Debug: Log all projects in the list
const projectItems = await page.locator('ul#listProjects li').all();
console.log(`Found ${projectItems.length} projects in list`);
for (let i = 0; i < projectItems.length; i++) {
const text = await projectItems[i].textContent();
console.log(`Project ${i}: ${text}`);
}
await expect(page.locator('ul#listProjects li').filter({ hasText: finalTitle })).toBeVisible({ timeout: 10000 });
// Search for newly-created project in /discover // Search for newly-created project in /discover
await page.goto('./discover'); await page.goto('./discover');

15
test-playwright/25-create-project-x10.spec.ts

@ -126,11 +126,16 @@ test('Create 10 new projects', async ({ page }) => {
for (let i = 0; i < projectCount; i++) { for (let i = 0; i < projectCount; i++) {
await page.goto('./projects'); await page.goto('./projects');
if (i === 0) { if (i === 0) {
// close onboarding using established pattern // Check if onboarding dialog exists and close it if present
await page.getByTestId('closeOnboardingAndFinish').click(); try {
await page.waitForFunction(() => { await page.getByTestId('closeOnboardingAndFinish').click({ timeout: 2000 });
return !document.querySelector('.dialog-overlay'); await page.waitForFunction(() => {
}, { timeout: 5000 }); return !document.querySelector('.dialog-overlay');
}, { timeout: 5000 });
} catch (error) {
// No onboarding dialog present, continue
console.log('No onboarding dialog found on projects page');
}
} }
await page.locator('button > svg.fa-plus').click(); await page.locator('button > svg.fa-plus').click();
await page.getByPlaceholder('Idea Name').fill(finalTitles[i]); // Add random suffix await page.getByPlaceholder('Idea Name').fill(finalTitles[i]); // Add random suffix

Loading…
Cancel
Save