Fix e2e flaky tests (#7084)

12 files changed, 230 insertions, 120 deletions

diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js
index 37f8d9eed..68728121e 100644
--- a/packages/astro/e2e/lit-component.test.js
+++ b/packages/astro/e2e/lit-component.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({
 	root: './fixtures/lit-component/',
@@ -30,6 +30,8 @@ test.describe('Lit components', () => {
 			const count = counter.locator('p');
 			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
+			await waitForHydrate(page, counter);
+
 			const inc = counter.locator('button');
 			await inc.click();
 
@@ -43,6 +45,8 @@ test.describe('Lit components', () => {
 			const count = counter.locator('p');
 			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
+			await waitForHydrate(page, counter);
+
 			const inc = counter.locator('button');
 			await inc.click();
 
@@ -58,6 +62,8 @@ test.describe('Lit components', () => {
 			const count = counter.locator('p');
 			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
+			await waitForHydrate(page, counter);
+
 			const inc = counter.locator('button');
 			await inc.click();
 
@@ -75,6 +81,8 @@ test.describe('Lit components', () => {
 			const count = counter.locator('p');
 			await expect(count, 'initial count is 10').toHaveText('Count: 10');
 
+			await waitForHydrate(page, counter);
+
 			const inc = counter.locator('button');
 			await inc.click();
 
@@ -97,12 +105,13 @@ test.describe('Lit components', () => {
 
 			// Reset the viewport to hydrate the component (max-width: 50rem)
 			await page.setViewportSize({ width: 414, height: 1124 });
+			await waitForHydrate(page, counter);
 
 			await inc.click();
 			await expect(count, 'count incremented by 1').toHaveText('Count: 11');
 		});
 
-		test('client:only', async ({ page, astro }) => {
+		t('client:only', async ({ page, astro }) => {
 			await page.goto(astro.resolveUrl('/'));
 
 			const label = page.locator('#client-only');
@@ -157,7 +166,15 @@ test.describe('Lit components', () => {
 			// Playwright's Node version doesn't have these functions, so stub them.
 			process.stdout.clearLine = () => {};
 			process.stdout.cursorTo = () => {};
-			await astro.build();
+			try {
+				await astro.build();
+			} catch (err) {
+				// There's this strange error on build since the dev server already defined `my-counter`,
+				// however the tests still pass with this error, so swallow it.
+				if (!err.message.includes(`Failed to execute 'define' on 'CustomElementRegistry'`)) {
+					throw err;
+				}
+			}
 		});
 
 		t.beforeAll(async ({ astro }) => {
diff --git a/packages/astro/e2e/namespaced-component.test.js b/packages/astro/e2e/namespaced-component.test.js
index 729f67f4d..8dc27c5d0 100644
--- a/packages/astro/e2e/namespaced-component.test.js
+++ b/packages/astro/e2e/namespaced-component.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({
 	root: './fixtures/namespaced-component/',
@@ -20,31 +20,35 @@ test.describe('Hydrating namespaced components', () => {
 		await page.goto('/');
 
 		// Counter declared with: <ns.components.PreactCounter id="preact-counter-namespace" client:load>
-		const namespacedCounter = await page.locator('#preact-counter-namespace');
+		const namespacedCounter = page.locator('#preact-counter-namespace');
 		await expect(namespacedCounter, 'component is visible').toBeVisible();
 
-		const namespacedCount = await namespacedCounter.locator('pre');
+		const namespacedCount = namespacedCounter.locator('pre');
 		await expect(namespacedCount, 'initial count is 0').toHaveText('0');
 
-		const namespacedChildren = await namespacedCounter.locator('.children');
+		const namespacedChildren = namespacedCounter.locator('.children');
 		await expect(namespacedChildren, 'children exist').toHaveText('preact (namespace import)');
 
-		const namespacedIncrement = await namespacedCounter.locator('.increment');
+		await waitForHydrate(page, namespacedCounter);
+
+		const namespacedIncrement = namespacedCounter.locator('.increment');
 		await namespacedIncrement.click();
 
 		await expect(namespacedCount, 'count incremented by 1').toHaveText('1');
 
 		// Counter declared with: <components.PreactCounterTwo id="preact-counter-named" client:load>
-		const namedCounter = await page.locator('#preact-counter-named');
+		const namedCounter = page.locator('#preact-counter-named');
 		await expect(namedCounter, 'component is visible').toBeVisible();
 
-		const namedCount = await namedCounter.locator('pre');
+		const namedCount = namedCounter.locator('pre');
 		await expect(namedCount, 'initial count is 0').toHaveText('0');
 
-		const namedChildren = await namedCounter.locator('.children');
+		const namedChildren = namedCounter.locator('.children');
 		await expect(namedChildren, 'children exist').toHaveText('preact (named import)');
 
-		const namedIncrement = await namedCounter.locator('.increment');
+		await waitForHydrate(page, namedCounter);
+
+		const namedIncrement = namedCounter.locator('.increment');
 		await namedIncrement.click();
 
 		await expect(namedCount, 'count incremented by 1').toHaveText('1');
@@ -54,31 +58,35 @@ test.describe('Hydrating namespaced components', () => {
 		await page.goto('/mdx');
 
 		// Counter declared with: <ns.components.PreactCounter id="preact-counter-namespace" client:load>
-		const namespacedCounter = await page.locator('#preact-counter-namespace');
+		const namespacedCounter = page.locator('#preact-counter-namespace');
 		await expect(namespacedCounter, 'component is visible').toBeVisible();
 
-		const namespacedCount = await namespacedCounter.locator('pre');
+		const namespacedCount = namespacedCounter.locator('pre');
 		await expect(namespacedCount, 'initial count is 0').toHaveText('0');
 
-		const namespacedChildren = await namespacedCounter.locator('.children');
+		const namespacedChildren = namespacedCounter.locator('.children');
 		await expect(namespacedChildren, 'children exist').toHaveText('preact (namespace import)');
 
-		const namespacedIncrement = await namespacedCounter.locator('.increment');
+		await waitForHydrate(page, namespacedCounter);
+
+		const namespacedIncrement = namespacedCounter.locator('.increment');
 		await namespacedIncrement.click();
 
 		await expect(namespacedCount, 'count incremented by 1').toHaveText('1');
 
 		// Counter declared with: <components.PreactCounterTwo id="preact-counter-named" client:load>
-		const namedCounter = await page.locator('#preact-counter-named');
+		const namedCounter = page.locator('#preact-counter-named');
 		await expect(namedCounter, 'component is visible').toBeVisible();
 
-		const namedCount = await namedCounter.locator('pre');
+		const namedCount = namedCounter.locator('pre');
 		await expect(namedCount, 'initial count is 0').toHaveText('0');
 
-		const namedChildren = await namedCounter.locator('.children');
+		const namedChildren = namedCounter.locator('.children');
 		await expect(namedChildren, 'children exist').toHaveText('preact (named import)');
 
-		const namedIncrement = await namedCounter.locator('.increment');
+		await waitForHydrate(page, namedCounter);
+
+		const namedIncrement = namedCounter.locator('.increment');
 		await namedIncrement.click();
 
 		await expect(namedCount, 'count incremented by 1').toHaveText('1');
diff --git a/packages/astro/e2e/nested-in-preact.test.js b/packages/astro/e2e/nested-in-preact.test.js
index a40888c48..5b8105e45 100644
--- a/packages/astro/e2e/nested-in-preact.test.js
+++ b/packages/astro/e2e/nested-in-preact.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/nested-in-preact/' });
 
@@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Preact', () => {
 	test('React counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#react-counter');
+		const counter = page.locator('#react-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#react-counter-count');
+		const count = counter.locator('#react-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#react-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#react-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Preact', () => {
 	test('Preact counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#preact-counter');
+		const counter = page.locator('#preact-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#preact-counter-count');
+		const count = counter.locator('#preact-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#preact-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#preact-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Preact', () => {
 	test('Solid counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#solid-counter');
+		const counter = page.locator('#solid-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#solid-counter-count');
+		const count = counter.locator('#solid-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#solid-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#solid-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Preact', () => {
 	test('Vue counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#vue-counter');
+		const counter = page.locator('#vue-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#vue-counter-count');
+		const count = counter.locator('#vue-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#vue-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#vue-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Preact', () => {
 	test('Svelte counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#svelte-counter');
+		const counter = page.locator('#svelte-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#svelte-counter-count');
+		const count = counter.locator('#svelte-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#svelte-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#svelte-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
diff --git a/packages/astro/e2e/nested-in-react.test.js b/packages/astro/e2e/nested-in-react.test.js
index e2d53489a..57795d0a5 100644
--- a/packages/astro/e2e/nested-in-react.test.js
+++ b/packages/astro/e2e/nested-in-react.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/nested-in-react/' });
 
@@ -17,13 +17,15 @@ test.describe('Nested Frameworks in React', () => {
 	test('React counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#react-counter');
+		const counter = page.locator('#react-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#react-counter-count');
+		const count = counter.locator('#react-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#react-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#react-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -32,13 +34,15 @@ test.describe('Nested Frameworks in React', () => {
 	test('Preact counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#preact-counter');
+		const counter = page.locator('#preact-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#preact-counter-count');
+		const count = counter.locator('#preact-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#preact-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#preact-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -47,13 +51,15 @@ test.describe('Nested Frameworks in React', () => {
 	test('Solid counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#solid-counter');
+		const counter = page.locator('#solid-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#solid-counter-count');
+		const count = counter.locator('#solid-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#solid-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#solid-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -62,13 +68,15 @@ test.describe('Nested Frameworks in React', () => {
 	test('Vue counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#vue-counter');
+		const counter = page.locator('#vue-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#vue-counter-count');
+		const count = counter.locator('#vue-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#vue-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#vue-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -77,13 +85,15 @@ test.describe('Nested Frameworks in React', () => {
 	test('Svelte counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#svelte-counter');
+		const counter = page.locator('#svelte-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#svelte-counter-count');
+		const count = counter.locator('#svelte-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#svelte-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#svelte-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
diff --git a/packages/astro/e2e/nested-in-solid.test.js b/packages/astro/e2e/nested-in-solid.test.js
index 1c4d81ac1..3e8acddd3 100644
--- a/packages/astro/e2e/nested-in-solid.test.js
+++ b/packages/astro/e2e/nested-in-solid.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/nested-in-solid/' });
 
@@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Solid', () => {
 	test('React counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#react-counter');
+		const counter = page.locator('#react-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#react-counter-count');
+		const count = counter.locator('#react-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#react-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#react-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Solid', () => {
 	test('Preact counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#preact-counter');
+		const counter = page.locator('#preact-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#preact-counter-count');
+		const count = counter.locator('#preact-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#preact-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#preact-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Solid', () => {
 	test('Solid counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#solid-counter');
+		const counter = page.locator('#solid-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#solid-counter-count');
+		const count = counter.locator('#solid-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#solid-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#solid-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Solid', () => {
 	test('Vue counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#vue-counter');
+		const counter = page.locator('#vue-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#vue-counter-count');
+		const count = counter.locator('#vue-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#vue-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#vue-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Solid', () => {
 	test('Svelte counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#svelte-counter');
+		const counter = page.locator('#svelte-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#svelte-counter-count');
+		const count = counter.locator('#svelte-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#svelte-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#svelte-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
diff --git a/packages/astro/e2e/nested-in-svelte.test.js b/packages/astro/e2e/nested-in-svelte.test.js
index 21c896b97..8089221eb 100644
--- a/packages/astro/e2e/nested-in-svelte.test.js
+++ b/packages/astro/e2e/nested-in-svelte.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/nested-in-svelte/' });
 
@@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Svelte', () => {
 	test('React counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#react-counter');
+		const counter = page.locator('#react-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#react-counter-count');
+		const count = counter.locator('#react-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#react-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#react-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Svelte', () => {
 	test('Preact counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#preact-counter');
+		const counter = page.locator('#preact-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#preact-counter-count');
+		const count = counter.locator('#preact-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#preact-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#preact-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Svelte', () => {
 	test('Solid counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#solid-counter');
+		const counter = page.locator('#solid-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#solid-counter-count');
+		const count = counter.locator('#solid-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#solid-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#solid-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Svelte', () => {
 	test('Vue counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#vue-counter');
+		const counter = page.locator('#vue-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#vue-counter-count');
+		const count = counter.locator('#vue-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#vue-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#vue-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Svelte', () => {
 	test('Svelte counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#svelte-counter');
+		const counter = page.locator('#svelte-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#svelte-counter-count');
+		const count = counter.locator('#svelte-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#svelte-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#svelte-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
diff --git a/packages/astro/e2e/nested-in-vue.test.js b/packages/astro/e2e/nested-in-vue.test.js
index 813b58149..ae2631ee4 100644
--- a/packages/astro/e2e/nested-in-vue.test.js
+++ b/packages/astro/e2e/nested-in-vue.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/nested-in-vue/' });
 
@@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Vue', () => {
 	test('React counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#react-counter');
+		const counter = page.locator('#react-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#react-counter-count');
+		const count = counter.locator('#react-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#react-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#react-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Vue', () => {
 	test('Preact counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#preact-counter');
+		const counter = page.locator('#preact-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#preact-counter-count');
+		const count = counter.locator('#preact-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#preact-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#preact-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Vue', () => {
 	test('Solid counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#solid-counter');
+		const counter = page.locator('#solid-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#solid-counter-count');
+		const count = counter.locator('#solid-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#solid-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#solid-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Vue', () => {
 	test('Vue counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#vue-counter');
+		const counter = page.locator('#vue-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#vue-counter-count');
+		const count = counter.locator('#vue-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#vue-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#vue-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Vue', () => {
 	test('Svelte counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#svelte-counter');
+		const counter = page.locator('#svelte-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#svelte-counter-count');
+		const count = counter.locator('#svelte-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#svelte-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#svelte-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
diff --git a/packages/astro/e2e/nested-recursive.test.js b/packages/astro/e2e/nested-recursive.test.js
index 0d2583583..efcefac53 100644
--- a/packages/astro/e2e/nested-recursive.test.js
+++ b/packages/astro/e2e/nested-recursive.test.js
@@ -1,5 +1,5 @@
 import { test as base, expect } from '@playwright/test';
-import { loadFixture } from './test-utils.js';
+import { loadFixture, waitForHydrate } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
@@ -22,13 +22,15 @@ test.describe('Recursive Nested Frameworks', () => {
 	test('React counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#react-counter');
+		const counter = page.locator('#react-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#react-counter-count');
+		const count = counter.locator('#react-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#react-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#react-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -37,13 +39,15 @@ test.describe('Recursive Nested Frameworks', () => {
 	test('Preact counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#preact-counter');
+		const counter = page.locator('#preact-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#preact-counter-count');
+		const count = counter.locator('#preact-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#preact-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#preact-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -52,13 +56,15 @@ test.describe('Recursive Nested Frameworks', () => {
 	test('Solid counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#solid-counter');
+		const counter = page.locator('#solid-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#solid-counter-count');
+		const count = counter.locator('#solid-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#solid-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#solid-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -67,13 +73,15 @@ test.describe('Recursive Nested Frameworks', () => {
 	test('Vue counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#vue-counter');
+		const counter = page.locator('#vue-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#vue-counter-count');
+		const count = counter.locator('#vue-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#vue-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#vue-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
@@ -82,13 +90,15 @@ test.describe('Recursive Nested Frameworks', () => {
 	test('Svelte counter', async ({ astro, page }) => {
 		await page.goto('/');
 
-		const counter = await page.locator('#svelte-counter');
+		const counter = page.locator('#svelte-counter');
 		await expect(counter, 'component is visible').toBeVisible();
 
-		const count = await counter.locator('#svelte-counter-count');
+		const count = counter.locator('#svelte-counter-count');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
-		const increment = await counter.locator('#svelte-counter-increment');
+		await waitForHydrate(page, counter);
+
+		const increment = counter.locator('#svelte-counter-increment');
 		await increment.click();
 
 		await expect(count, 'count incremented by 1').toHaveText('1');
diff --git a/packages/astro/e2e/shared-component-tests.js b/packages/astro/e2e/shared-component-tests.js
index 92423c1c0..ad392fc4a 100644
--- a/packages/astro/e2e/shared-component-tests.js
+++ b/packages/astro/e2e/shared-component-tests.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 export function prepareTestFactory(opts) {
 	const test = testFactory(opts);
@@ -39,6 +39,8 @@ export function prepareTestFactory(opts) {
 			const count = counter.locator('pre');
 			await expect(count, 'initial count is 0').toHaveText('0');
 
+			await waitForHydrate(page, counter);
+
 			const inc = counter.locator('.increment');
 			await inc.click();
 
@@ -54,6 +56,8 @@ export function prepareTestFactory(opts) {
 			const count = counter.locator('pre');
 			await expect(count, 'initial count is 0').toHaveText('0');
 
+			await waitForHydrate(page, counter);
+
 			const inc = counter.locator('.increment');
 			await inc.click();
 
@@ -71,6 +75,8 @@ export function prepareTestFactory(opts) {
 			const count = counter.locator('pre');
 			await expect(count, 'initial count is 0').toHaveText('0');
 
+			await waitForHydrate(page, counter);
+
 			const inc = counter.locator('.increment');
 			await inc.click();
 
@@ -85,13 +91,14 @@ export function prepareTestFactory(opts) {
 
 			const count = counter.locator('pre');
 			await expect(count, 'initial count is 0').toHaveText('0');
-
 			const inc = counter.locator('.increment');
 			await inc.click();
 			await expect(count, 'component not hydrated yet').toHaveText('0');
 
 			// Reset the viewport to hydrate the component (max-width: 50rem)
 			await page.setViewportSize({ width: 414, height: 1124 });
+			await waitForHydrate(page, counter);
+
 			await inc.click();
 			await expect(count, 'count incremented by 1').toHaveText('1');
 		});
diff --git a/packages/astro/e2e/solid-recurse.test.js b/packages/astro/e2e/solid-recurse.test.js
index f1fec4030..2b03ed880 100644
--- a/packages/astro/e2e/solid-recurse.test.js
+++ b/packages/astro/e2e/solid-recurse.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/solid-recurse/' });
 
@@ -23,6 +23,8 @@ test.describe('Recursive elements with Solid', () => {
 		const increment = page.locator('#case1-B');
 		await expect(increment, 'initial count is 0').toHaveText('B: 0');
 
+		await waitForHydrate(page, wrapper);
+
 		await increment.click();
 		await expect(increment, 'count is incremented').toHaveText('B: 1');
 	});
diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js
index 9fe6507dc..88daa8eec 100644
--- a/packages/astro/e2e/test-utils.js
+++ b/packages/astro/e2e/test-utils.js
@@ -61,3 +61,17 @@ export async function getErrorOverlayContent(page) {
 export async function getColor(el) {
 	return await el.evaluate((e) => getComputedStyle(e).color);
 }
+
+/**
+ * Wait for `astro-island` that contains the `el` to hydrate
+ * @param {import('@playwright/test').Page} page
+ * @param {import('@playwright/test').Locator} el
+ */
+export async function waitForHydrate(page, el) {
+	const astroIsland = page.locator('astro-island', { has: el });
+	const astroIslandId = await astroIsland.last().getAttribute('uid');
+	await page.waitForFunction(
+		(selector) => document.querySelector(selector)?.hasAttribute('ssr') === false,
+		`astro-island[uid="${astroIslandId}"]`
+	);
+}
diff --git a/packages/astro/e2e/ts-resolution.test.js b/packages/astro/e2e/ts-resolution.test.js
index 08e8eae66..7f22761e4 100644
--- a/packages/astro/e2e/ts-resolution.test.js
+++ b/packages/astro/e2e/ts-resolution.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/ts-resolution/' });
 
@@ -13,6 +13,8 @@ function runTest(it) {
 		const count = counter.locator('pre');
 		await expect(count, 'initial count is 0').toHaveText('0');
 
+		await waitForHydrate(page, counter);
+
 		const inc = counter.locator('.increment');
 		await inc.click();