Improve e2e setup (#11850)

packages/astro/e2e/actions-blog.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/actions-blog/' });
+const test = testFactory(import.meta.url, { root: './fixtures/actions-blog/' });
 
 let devServer;
 
@@ -23,11 +23,10 @@ test.describe('Astro Actions - Blog', () => {
 		await page.goto(astro.resolveUrl('/blog/first-post/'));
 
 		const likeButton = page.getByLabel('Like');
+		await waitForHydrate(page, likeButton);
 		await expect(likeButton, 'like button starts with 10 likes').toContainText('10');
 		await likeButton.click();
-		await expect(likeButton, 'like button should increment likes').toContainText('11', {
-			timeout: 6_000,
-		});
+		await expect(likeButton, 'like button should increment likes').toContainText('11');
 	});
 
 	test('Like action - server-side', async ({ page, astro }) => {
@@ -38,9 +37,7 @@ test.describe('Astro Actions - Blog', () => {
 
 		await expect(likeCount, 'like button starts with 10 likes').toContainText('10');
 		await likeButton.click();
-		await expect(likeCount, 'like button should increment likes').toContainText('11', {
-			timeout: 6_000,
-		});
+		await expect(likeCount, 'like button should increment likes').toContainText('11');
 	});
 
 	test('Comment action - validation error', async ({ page, astro }) => {
@@ -134,7 +131,8 @@ test.describe('Astro Actions - Blog', () => {
 		await page.goto(astro.resolveUrl('/blog/first-post/'));
 
 		const logoutButton = page.getByTestId('logout-button');
+		await waitForHydrate(page, logoutButton);
 		await logoutButton.click();
-		await expect(page).toHaveURL(astro.resolveUrl('/blog/'), { timeout: 6_000 });
+		await expect(page).toHaveURL(astro.resolveUrl('/blog/'));
 	});
 });

packages/astro/e2e/actions-react-19.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
-import { testFactory } from './test-utils.js';
+import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/actions-react-19/' });
+const test = testFactory(import.meta.url, { root: './fixtures/actions-react-19/' });
 
 let devServer;
 
@@ -23,10 +23,12 @@ test.describe('Astro Actions - React 19', () => {
 		await page.goto(astro.resolveUrl('/blog/first-post/'));
 
 		const likeButton = page.getByLabel('likes-client');
+		await waitForHydrate(page, likeButton);
+
 		await expect(likeButton).toBeVisible();
 		await likeButton.click();
 		await expect(likeButton, 'like button should be disabled when pending').toBeDisabled();
-		await expect(likeButton).not.toBeDisabled({ timeout: 5000 });
+		await expect(likeButton).not.toBeDisabled();
 	});
 
 	test('Like action - server progressive enhancement', async ({ page, astro }) => {
@@ -43,6 +45,8 @@ test.describe('Astro Actions - React 19', () => {
 		await page.goto(astro.resolveUrl('/blog/first-post/'));
 
 		const likeButton = page.getByLabel('likes-action-client');
+		await waitForHydrate(page, likeButton);
+
 		await expect(likeButton).toBeVisible();
 		await likeButton.click();
 

packages/astro/e2e/astro-component.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/astro-component/' });
+const test = testFactory(import.meta.url, { root: './fixtures/astro-component/' });
 
 let devServer;
 

packages/astro/e2e/astro-envs.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/astro-envs/',
 	devToolbar: {
 		enabled: false,

packages/astro/e2e/client-only.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/client-only/' });
+const test = testFactory(import.meta.url, { root: './fixtures/client-only/' });
 
 let devServer;
 

packages/astro/e2e/content-collections.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/content-collections/' });
+const test = testFactory(import.meta.url, { root: './fixtures/content-collections/' });
 
 let devServer;
 

packages/astro/e2e/css.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/css/',
 	devToolbar: {
 		enabled: false,

packages/astro/e2e/custom-client-directives.test.js

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import testAdapter from '../test/test-adapter.js';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/custom-client-directives/',
 });
 

packages/astro/e2e/dev-toolbar-audits.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/dev-toolbar/',
 });
 

packages/astro/e2e/dev-toolbar.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/dev-toolbar/',
 });
 

packages/astro/e2e/error-cyclic.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { getErrorOverlayContent, testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/error-cyclic/',
 });
 

packages/astro/e2e/error-sass.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { getErrorOverlayContent, testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/error-sass/',
 });
 

packages/astro/e2e/errors.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { getErrorOverlayContent, testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/errors/',
 	// Only test the error overlay, don't print to console
 	vite: {

packages/astro/e2e/hmr.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/hmr/',
 	devToolbar: {
 		enabled: false,

packages/astro/e2e/hydration-race.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/hydration-race/',
 });
 

packages/astro/e2e/i18n.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/i18n/',
 	devToolbar: {
 		enabled: false,

packages/astro/e2e/lit-component.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/lit-component/',
 });
 

packages/astro/e2e/multiple-frameworks.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/multiple-frameworks/' });
+const test = testFactory(import.meta.url, { root: './fixtures/multiple-frameworks/' });
 
 let devServer;
 

packages/astro/e2e/namespaced-component.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/namespaced-component/',
 });
 

packages/astro/e2e/nested-in-preact.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/nested-in-preact/' });
+const test = testFactory(import.meta.url, { root: './fixtures/nested-in-preact/' });
 
 let devServer;
 

packages/astro/e2e/nested-in-react.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/nested-in-react/' });
+const test = testFactory(import.meta.url, { root: './fixtures/nested-in-react/' });
 
 let devServer;
 

packages/astro/e2e/nested-in-solid.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/nested-in-solid/' });
+const test = testFactory(import.meta.url, { root: './fixtures/nested-in-solid/' });
 
 let devServer;
 

packages/astro/e2e/nested-in-svelte.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/nested-in-svelte/' });
+const test = testFactory(import.meta.url, { root: './fixtures/nested-in-svelte/' });
 
 let devServer;
 

packages/astro/e2e/nested-in-vue.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory, waitForHydrate } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/nested-in-vue/' });
+const test = testFactory(import.meta.url, { root: './fixtures/nested-in-vue/' });
 
 let devServer;
 

packages/astro/e2e/nested-recursive.test.js

@@ -3,7 +3,7 @@ import { loadFixture, waitForHydrate } from './test-utils.js';
 
 const test = base.extend({
 	astro: async ({}, use) => {
-		const fixture = await loadFixture({ root: './fixtures/nested-recursive/' });
+		const fixture = await loadFixture(import.meta.url, { root: './fixtures/nested-recursive/' });
 		await use(fixture);
 	},
 });

packages/astro/e2e/nested-styles.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/nested-styles/',
 	devToolbar: {
 		enabled: false,

packages/astro/e2e/pass-js.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/pass-js/',
 });
 

packages/astro/e2e/preact-compat-component.test.js

@@ -1,6 +1,8 @@
 import { prepareTestFactory } from './shared-component-tests.js';
 
-const { test, createTests } = prepareTestFactory({ root: './fixtures/preact-compat-component/' });
+const { test, createTests } = prepareTestFactory(import.meta.url, {
+	root: './fixtures/preact-compat-component/',
+});
 
 const config = {
 	counterComponentFilePath: './src/components/Counter.jsx',

packages/astro/e2e/preact-component.test.js

@@ -1,6 +1,8 @@
 import { prepareTestFactory } from './shared-component-tests.js';
 
-const { test, createTests } = prepareTestFactory({ root: './fixtures/preact-component/' });
+const { test, createTests } = prepareTestFactory(import.meta.url, {
+	root: './fixtures/preact-component/',
+});
 
 const config = {
 	counterComponentFilePath: './src/components/Counter.jsx',

packages/astro/e2e/preact-lazy-component.test.js

@@ -1,6 +1,8 @@
 import { prepareTestFactory } from './shared-component-tests.js';
 
-const { test, createTests } = prepareTestFactory({ root: './fixtures/preact-lazy-component/' });
+const { test, createTests } = prepareTestFactory(import.meta.url, {
+	root: './fixtures/preact-lazy-component/',
+});
 
 const config = {
 	counterComponentFilePath: './src/components/Counter.jsx',

packages/astro/e2e/prefetch.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({
+const test = testFactory(import.meta.url, {
 	root: './fixtures/prefetch/',
 });
 

packages/astro/e2e/react-component.test.js

@@ -1,7 +1,9 @@
 import { expect } from '@playwright/test';
 import { prepareTestFactory } from './shared-component-tests.js';
 
-const { test, createTests } = prepareTestFactory({ root: './fixtures/react-component/' });
+const { test, createTests } = prepareTestFactory(import.meta.url, {
+	root: './fixtures/react-component/',
+});
 
 const config = {
 	counterComponentFilePath: './src/components/Counter.jsx',

packages/astro/e2e/server-islands.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/server-islands/' });
+const test = testFactory(import.meta.url, { root: './fixtures/server-islands/' });
 
 test.describe('Server islands', () => {
 	test.describe('Development', () => {

packages/astro/e2e/shared-component-tests.js

@@ -1,8 +1,8 @@
 import { expect } from '@playwright/test';
 import { scrollToElement, testFactory, waitForHydrate } from './test-utils.js';
 
-export function prepareTestFactory(opts, { canReplayClicks = false } = {}) {
-	const test = testFactory(opts);
+export function prepareTestFactory(testFile, opts, { canReplayClicks = false } = {}) {
+	const test = testFactory(testFile, opts);
 
 	let devServer;
 
@@ -120,6 +120,7 @@ export function prepareTestFactory(opts, { canReplayClicks = false } = {}) {
 			await page.goto(astro.resolveUrl(pageUrl));
 
 			const label = page.locator('#client-only');
+			await waitForHydrate(page, label);
 			await expect(label, 'component is visible').toBeVisible();
 
 			await expect(label, 'slot text is visible').toHaveText('Framework client:only component');

packages/astro/e2e/solid-circular.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
-const test = testFactory({ root: './fixtures/solid-circular/' });
+const test = testFactory(import.meta.url, { root: './fixtures/solid-circular/' });
 
 let devServer;
 

packages/astro/e2e/solid-component.test.js

@@ -1,6 +1,7 @@
 import { prepareTestFactory } from './shared-component-tests.js';
 
 const { test, createTests } = prepareTestFactory(
+	import.meta.url,
 	{ root: './fixtures/solid-component/' },
 	{
 		canReplayClicks: true,