Wait for 'Loading…' message rather than phpMyAdmin internals

Author: JanJakes

packages/playground/website/playwright/e2e/website-ui.spec.ts

@@ -451,28 +451,26 @@ test.describe('Database panel', () => {
 		await expect(newPage.locator('body')).toContainText('wp_posts');
 
 		/*
-		 * Before clicking a link in phpMyAdmin, we need to wait for any AJAX
-		 * requests to be done. This prevents flaky tests (mainly in Firefox).
+		 * Before clicking a link in phpMyAdmin, we need to wait for the loading
+		 * indicator to disappear. This prevents flaky tests (mainly in Firefox).
 		 */
-		const waitForAjaxIdle = async () =>
-			newPage.waitForFunction(() => {
-				return (window as any).AJAX?.active === false;
-			});
+		const waitForLoad = async () =>
+			expect(newPage.getByText('Loading…')).toBeHidden();
 
 		// Browse the "wp_posts" table
 		const wpPostsRow = newPage
 			.locator('tr')
 			.filter({ hasText: 'wp_posts' })
 			.first();
 		await expect(wpPostsRow).toBeVisible();
-		await waitForAjaxIdle();
+		await waitForLoad();
 		await wpPostsRow.getByRole('link', { name: 'Browse' }).click();
 		await newPage.waitForLoadState();
 		const pmaRows = newPage.locator('table.table_results tbody tr');
 		await expect(pmaRows.first()).toContainText('Welcome to WordPress.');
 
 		// Click "edit" on a row
-		await waitForAjaxIdle();
+		await waitForLoad();
 		await pmaRows
 			.first()
 			.getByRole('link', { name: 'Edit' })