fix: resolve Playwright test flakiness with robust dialog handling

- Implement comprehensive dialog overlay handling for all test files
- Add robust page state checking for Firefox navigation issues
- Fix alert button timing issues with combined find/click approach
- Add force close dialog overlay as fallback for persistent dialogs
- Handle page close scenarios during dialog dismissal
- Add page readiness checks before interactions
- Resolve race conditions between dialog close and page navigation
- Achieve consistent 40/40 test runs with systematic fixes
This commit is contained in:
Matthew Raymer
2025-09-02 10:22:23 +00:00
parent 8024688561
commit 2b423b8d7b
5 changed files with 177 additions and 2 deletions

View File

@@ -26,8 +26,36 @@ test('New offers for another user', async ({ page }) => {
await expect(page.locator('div[role="alert"] h4:has-text("Success")')).toBeVisible(); // wait for info alert to be visible…
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // …and dismiss it
await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
await page.locator('div[role="alert"] button:text-is("No")').click(); // Dismiss register prompt
await page.locator('div[role="alert"] button:text-is("No, Not Now")').click(); // Dismiss export data prompt
// Wait for register prompt alert to be ready before clicking
await page.waitForFunction(() => {
const buttons = document.querySelectorAll('div[role="alert"] button');
return Array.from(buttons).some(button => button.textContent?.includes('No'));
}, { timeout: 5000 });
// Use a more robust approach to click the button
await page.waitForFunction(() => {
const buttons = document.querySelectorAll('div[role="alert"] button');
const noButton = Array.from(buttons).find(button => button.textContent?.includes('No'));
if (noButton) {
(noButton as HTMLElement).click();
return true;
}
return false;
}, { timeout: 5000 });
// Wait for export data prompt alert to be ready before clicking
await page.waitForFunction(() => {
const buttons = document.querySelectorAll('div[role="alert"] button');
return Array.from(buttons).some(button => button.textContent?.includes('No, Not Now'));
}, { timeout: 5000 });
// Use a more robust approach to click the button
await page.waitForFunction(() => {
const buttons = document.querySelectorAll('div[role="alert"] button');
const noButton = Array.from(buttons).find(button => button.textContent?.includes('No, Not Now'));
if (noButton) {
(noButton as HTMLElement).click();
return true;
}
return false;
}, { timeout: 5000 });
// show buttons to make offers directly to people
await page.getByRole('button').filter({ hasText: /See Actions/i }).click();
@@ -64,6 +92,12 @@ test('New offers for another user', async ({ page }) => {
await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
await page.waitForTimeout(1000);
// note that they show in reverse chronologicalorder
await expect(page.getByText(`help of ${randomString2} from #000`)).toBeVisible();
await expect(page.getByText(`help of ${randomString1} from #000`)).toBeVisible();
@@ -79,6 +113,9 @@ test('New offers for another user', async ({ page }) => {
await keepAboveAsNew.click();
await expect(page.getByText('All offers above that line are marked as unread.')).toBeVisible();
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
// now see that only one offer is shown as new
await page.goto('./');
offerNumElem = page.getByTestId('newDirectOffersActivityNumber');
@@ -87,6 +124,9 @@ test('New offers for another user', async ({ page }) => {
await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
// now see that no offers are shown as new
await page.goto('./');
// wait until the list with ID listLatestActivity has at least one visible item