From ed4aff0cb99c1a76077be3ab6dd44c0fdae02bf3 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Fri, 19 May 2023 22:46:31 +0800 Subject: [PATCH] Fix e2e flaky tests again (#7129) --- packages/astro/e2e/client-only.test.js | 10 ++++---- packages/astro/e2e/errors.test.js | 10 ++++---- packages/astro/e2e/hydration-race.test.js | 2 +- .../astro/e2e/multiple-frameworks.test.js | 24 +++++++++--------- .../astro/e2e/namespaced-component.test.js | 8 +++--- packages/astro/e2e/nested-in-preact.test.js | 10 ++++---- packages/astro/e2e/nested-in-react.test.js | 10 ++++---- packages/astro/e2e/nested-in-solid.test.js | 10 ++++---- packages/astro/e2e/nested-in-svelte.test.js | 10 ++++---- packages/astro/e2e/nested-in-vue.test.js | 10 ++++---- packages/astro/e2e/nested-recursive.test.js | 10 ++++---- packages/astro/e2e/pass-js.test.js | 14 +++++------ packages/astro/e2e/shared-component-tests.js | 8 ++++-- packages/astro/e2e/solid-circular.test.js | 2 +- packages/astro/e2e/solid-recurse.test.js | 2 +- packages/astro/e2e/test-utils.js | 25 +++++++++++++++++++ packages/astro/playwright.config.js | 3 --- packages/astro/test/test-utils.js | 2 +- 18 files changed, 98 insertions(+), 72 deletions(-) diff --git a/packages/astro/e2e/client-only.test.js b/packages/astro/e2e/client-only.test.js index 9483c7053..08c5fb3ac 100644 --- a/packages/astro/e2e/client-only.test.js +++ b/packages/astro/e2e/client-only.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Client only', () => { test('React counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = await page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -33,7 +33,7 @@ test.describe('Client only', () => { }); test('Preact counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = await page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -51,7 +51,7 @@ test.describe('Client only', () => { }); test('Solid counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = await page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -69,7 +69,7 @@ test.describe('Client only', () => { }); test('Vue counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = await page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -87,7 +87,7 @@ test.describe('Client only', () => { }); test('Svelte counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = await page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/errors.test.js b/packages/astro/e2e/errors.test.js index 8efcb40cf..35599ce97 100644 --- a/packages/astro/e2e/errors.test.js +++ b/packages/astro/e2e/errors.test.js @@ -18,7 +18,7 @@ test.afterAll(async ({ astro }) => { test.describe('Error display', () => { test('detect syntax errors in template', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/astro-syntax-error')); + await page.goto(astro.resolveUrl('/astro-syntax-error'), { waitUntil: 'networkidle' }); const message = (await getErrorOverlayContent(page)).message; expect(message).toMatch('Unexpected "}"'); @@ -37,7 +37,7 @@ test.describe('Error display', () => { }); test('shows useful error when frontmatter import is not found', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/import-not-found')); + await page.goto(astro.resolveUrl('/import-not-found'), { waitUntil: 'networkidle' }); const message = (await getErrorOverlayContent(page)).message; expect(message).toMatch('Could not import ../abc.astro'); @@ -53,7 +53,7 @@ test.describe('Error display', () => { }); test('shows correct file path when a page has an error', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/import-not-found')); + await page.goto(astro.resolveUrl('/import-not-found'), { waitUntil: 'networkidle' }); const { fileLocation, absoluteFileLocation } = await getErrorOverlayContent(page); const absoluteFileUrl = 'file://' + absoluteFileLocation.replace(/:\d+:\d+$/, ''); @@ -64,7 +64,7 @@ test.describe('Error display', () => { }); test('shows correct file path when a component has an error', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/preact-runtime-error')); + await page.goto(astro.resolveUrl('/preact-runtime-error'), { waitUntil: 'networkidle' }); const { fileLocation, absoluteFileLocation } = await getErrorOverlayContent(page); const absoluteFileUrl = 'file://' + absoluteFileLocation.replace(/:\d+:\d+$/, ''); @@ -75,7 +75,7 @@ test.describe('Error display', () => { }); test('framework errors recover when fixed', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/svelte-syntax-error')); + await page.goto(astro.resolveUrl('/svelte-syntax-error'), { waitUntil: 'networkidle' }); const message = (await getErrorOverlayContent(page)).message; expect(message).toMatch(' attempted to close an element that was not open'); diff --git a/packages/astro/e2e/hydration-race.test.js b/packages/astro/e2e/hydration-race.test.js index e516adfc8..ffa78125f 100644 --- a/packages/astro/e2e/hydration-race.test.js +++ b/packages/astro/e2e/hydration-race.test.js @@ -17,7 +17,7 @@ test.afterEach(async () => { test.describe('Hydration race', () => { test('Islands inside of slots hydrate', async ({ page, astro }) => { - await page.goto('/slot'); + await page.goto(astro.resolveUrl('/slot')); const html = await page.content(); diff --git a/packages/astro/e2e/multiple-frameworks.test.js b/packages/astro/e2e/multiple-frameworks.test.js index 729bfe002..b9bc85576 100644 --- a/packages/astro/e2e/multiple-frameworks.test.js +++ b/packages/astro/e2e/multiple-frameworks.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.skip('Multiple frameworks', () => { test.skip('React counter', async ({ page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -30,7 +30,7 @@ test.skip('Multiple frameworks', () => { }); test('Preact counter', async ({ page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -45,7 +45,7 @@ test.skip('Multiple frameworks', () => { }); test.skip('Solid counter', async ({ page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -60,7 +60,7 @@ test.skip('Multiple frameworks', () => { }); test('Vue counter', async ({ page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -75,7 +75,7 @@ test.skip('Multiple frameworks', () => { }); test('Svelte counter', async ({ page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -90,7 +90,7 @@ test.skip('Multiple frameworks', () => { }); test('Astro components', async ({ page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const aComponent = page.locator('#astro-a'); await expect(aComponent, 'component is visible').toBeVisible(); @@ -103,7 +103,7 @@ test.skip('Multiple frameworks', () => { test.describe('HMR', () => { test('Page template', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const slot = page.locator('#preact-counter + .counter-message'); await expect(slot, 'initial slot content').toHaveText('Hello Preact!'); @@ -116,7 +116,7 @@ test.skip('Multiple frameworks', () => { }); test('React component', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const count = page.locator('#react-counter pre'); await expect(count, 'initial count updated to 0').toHaveText('0'); @@ -129,7 +129,7 @@ test.skip('Multiple frameworks', () => { }); test('Preact component', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const count = page.locator('#preact-counter pre'); await expect(count, 'initial count updated to 0').toHaveText('0'); @@ -142,7 +142,7 @@ test.skip('Multiple frameworks', () => { }); test('Solid component', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const count = page.locator('#solid-counter pre'); await expect(count, 'initial count updated to 0').toHaveText('0'); @@ -157,7 +157,7 @@ test.skip('Multiple frameworks', () => { // TODO: re-enable this test when #3559 is fixed // https://github.com/withastro/astro/issues/3559 test.skip('Vue component', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const count = page.locator('#vue-counter pre'); await expect(count, 'initial count updated to 0').toHaveText('0'); @@ -172,7 +172,7 @@ test.skip('Multiple frameworks', () => { // TODO: track down a reliability issue in this test // It seems to lost connection to the vite server in CI test.skip('Svelte component', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const count = page.locator('#svelte-counter pre'); await expect(count, 'initial count is 0').toHaveText('0'); diff --git a/packages/astro/e2e/namespaced-component.test.js b/packages/astro/e2e/namespaced-component.test.js index 8dc27c5d0..58c00713a 100644 --- a/packages/astro/e2e/namespaced-component.test.js +++ b/packages/astro/e2e/namespaced-component.test.js @@ -16,8 +16,8 @@ test.afterAll(async () => { }); test.describe('Hydrating namespaced components', () => { - test('Preact Component', async ({ page }) => { - await page.goto('/'); + test('Preact Component', async ({ astro, page }) => { + await page.goto(astro.resolveUrl('/')); // Counter declared with: const namespacedCounter = page.locator('#preact-counter-namespace'); @@ -54,8 +54,8 @@ test.describe('Hydrating namespaced components', () => { await expect(namedCount, 'count incremented by 1').toHaveText('1'); }); - test('MDX', async ({ page }) => { - await page.goto('/mdx'); + test('MDX', async ({ astro, page }) => { + await page.goto(astro.resolveUrl('/mdx')); // Counter declared with: const namespacedCounter = page.locator('#preact-counter-namespace'); diff --git a/packages/astro/e2e/nested-in-preact.test.js b/packages/astro/e2e/nested-in-preact.test.js index 5b8105e45..f2bc4d728 100644 --- a/packages/astro/e2e/nested-in-preact.test.js +++ b/packages/astro/e2e/nested-in-preact.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Nested Frameworks in Preact', () => { test('React counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -32,7 +32,7 @@ test.describe('Nested Frameworks in Preact', () => { }); test('Preact counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -49,7 +49,7 @@ test.describe('Nested Frameworks in Preact', () => { }); test('Solid counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -66,7 +66,7 @@ test.describe('Nested Frameworks in Preact', () => { }); test('Vue counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -83,7 +83,7 @@ test.describe('Nested Frameworks in Preact', () => { }); test('Svelte counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/nested-in-react.test.js b/packages/astro/e2e/nested-in-react.test.js index 57795d0a5..cd9bc2879 100644 --- a/packages/astro/e2e/nested-in-react.test.js +++ b/packages/astro/e2e/nested-in-react.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Nested Frameworks in React', () => { test('React counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -32,7 +32,7 @@ test.describe('Nested Frameworks in React', () => { }); test('Preact counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -49,7 +49,7 @@ test.describe('Nested Frameworks in React', () => { }); test('Solid counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -66,7 +66,7 @@ test.describe('Nested Frameworks in React', () => { }); test('Vue counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -83,7 +83,7 @@ test.describe('Nested Frameworks in React', () => { }); test('Svelte counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/nested-in-solid.test.js b/packages/astro/e2e/nested-in-solid.test.js index 3e8acddd3..0fab17468 100644 --- a/packages/astro/e2e/nested-in-solid.test.js +++ b/packages/astro/e2e/nested-in-solid.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Nested Frameworks in Solid', () => { test('React counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -32,7 +32,7 @@ test.describe('Nested Frameworks in Solid', () => { }); test('Preact counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -49,7 +49,7 @@ test.describe('Nested Frameworks in Solid', () => { }); test('Solid counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -66,7 +66,7 @@ test.describe('Nested Frameworks in Solid', () => { }); test('Vue counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -83,7 +83,7 @@ test.describe('Nested Frameworks in Solid', () => { }); test('Svelte counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/nested-in-svelte.test.js b/packages/astro/e2e/nested-in-svelte.test.js index 8089221eb..88aa826a8 100644 --- a/packages/astro/e2e/nested-in-svelte.test.js +++ b/packages/astro/e2e/nested-in-svelte.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Nested Frameworks in Svelte', () => { test('React counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -32,7 +32,7 @@ test.describe('Nested Frameworks in Svelte', () => { }); test('Preact counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -49,7 +49,7 @@ test.describe('Nested Frameworks in Svelte', () => { }); test('Solid counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -66,7 +66,7 @@ test.describe('Nested Frameworks in Svelte', () => { }); test('Vue counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -83,7 +83,7 @@ test.describe('Nested Frameworks in Svelte', () => { }); test('Svelte counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/nested-in-vue.test.js b/packages/astro/e2e/nested-in-vue.test.js index ae2631ee4..6e7c6a5c2 100644 --- a/packages/astro/e2e/nested-in-vue.test.js +++ b/packages/astro/e2e/nested-in-vue.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Nested Frameworks in Vue', () => { test('React counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -32,7 +32,7 @@ test.describe('Nested Frameworks in Vue', () => { }); test('Preact counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -49,7 +49,7 @@ test.describe('Nested Frameworks in Vue', () => { }); test('Solid counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -66,7 +66,7 @@ test.describe('Nested Frameworks in Vue', () => { }); test('Vue counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -83,7 +83,7 @@ test.describe('Nested Frameworks in Vue', () => { }); test('Svelte counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/nested-recursive.test.js b/packages/astro/e2e/nested-recursive.test.js index efcefac53..262cd6772 100644 --- a/packages/astro/e2e/nested-recursive.test.js +++ b/packages/astro/e2e/nested-recursive.test.js @@ -20,7 +20,7 @@ test.afterAll(async () => { test.describe('Recursive Nested Frameworks', () => { test('React counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -37,7 +37,7 @@ test.describe('Recursive Nested Frameworks', () => { }); test('Preact counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -54,7 +54,7 @@ test.describe('Recursive Nested Frameworks', () => { }); test('Solid counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -71,7 +71,7 @@ test.describe('Recursive Nested Frameworks', () => { }); test('Vue counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); @@ -88,7 +88,7 @@ test.describe('Recursive Nested Frameworks', () => { }); test('Svelte counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/pass-js.test.js b/packages/astro/e2e/pass-js.test.js index 503f8274b..9ff6e6047 100644 --- a/packages/astro/e2e/pass-js.test.js +++ b/packages/astro/e2e/pass-js.test.js @@ -17,7 +17,7 @@ test.afterAll(async () => { test.describe('Passing JS into client components', () => { test('Complex nested objects', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const nestedDate = await page.locator('#nested-date'); await expect(nestedDate, 'component is visible').toBeVisible(); @@ -32,8 +32,8 @@ test.describe('Passing JS into client components', () => { await expect(regExpValue).toHaveText('ok'); }); - test('BigInts', async ({ page }) => { - await page.goto('/'); + test('BigInts', async ({ astro, page }) => { + await page.goto(astro.resolveUrl('/')); const bigIntType = await page.locator('#bigint-type'); await expect(bigIntType, 'is visible').toBeVisible(); @@ -44,8 +44,8 @@ test.describe('Passing JS into client components', () => { await expect(bigIntValue).toHaveText('11'); }); - test('Arrays that look like the serialization format', async ({ page }) => { - await page.goto('/'); + test('Arrays that look like the serialization format', async ({ astro, page }) => { + await page.goto(astro.resolveUrl('/')); const arrType = await page.locator('#arr-type'); await expect(arrType, 'is visible').toBeVisible(); @@ -56,8 +56,8 @@ test.describe('Passing JS into client components', () => { await expect(arrValue).toHaveText('0,foo'); }); - test('Maps and Sets', async ({ page }) => { - await page.goto('/'); + test('Maps and Sets', async ({ astro, page }) => { + await page.goto(astro.resolveUrl('/')); const mapType = page.locator('#map-type'); await expect(mapType, 'is visible').toBeVisible(); diff --git a/packages/astro/e2e/shared-component-tests.js b/packages/astro/e2e/shared-component-tests.js index ad392fc4a..e8ec273fd 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, waitForHydrate } from './test-utils.js'; +import { scrollToElement, testFactory, waitForHydrate } from './test-utils.js'; export function prepareTestFactory(opts) { const test = testFactory(opts); @@ -69,7 +69,11 @@ export function prepareTestFactory(opts) { // Make sure the component is on screen to trigger hydration const counter = page.locator('#client-visible'); - await counter.scrollIntoViewIfNeeded(); + // NOTE: Use custom implementation instead of `counter.scrollIntoViewIfNeeded` + // as Playwright's function doesn't take into account of `counter` being hydrated + // and losing the original DOM reference. + await scrollToElement(counter); + await expect(counter, 'component is visible').toBeVisible(); const count = counter.locator('pre'); diff --git a/packages/astro/e2e/solid-circular.test.js b/packages/astro/e2e/solid-circular.test.js index 57e3fc5aa..5dd0e8b80 100644 --- a/packages/astro/e2e/solid-circular.test.js +++ b/packages/astro/e2e/solid-circular.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Circular imports with Solid', () => { test('Context', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const wrapper = page.locator('#context'); await expect(wrapper, 'context should not be duplicated').toHaveText('fr'); diff --git a/packages/astro/e2e/solid-recurse.test.js b/packages/astro/e2e/solid-recurse.test.js index 2b03ed880..de3759e98 100644 --- a/packages/astro/e2e/solid-recurse.test.js +++ b/packages/astro/e2e/solid-recurse.test.js @@ -15,7 +15,7 @@ test.afterAll(async () => { test.describe('Recursive elements with Solid', () => { test('Counter', async ({ astro, page }) => { - await page.goto('/'); + await page.goto(astro.resolveUrl('/')); const wrapper = page.locator('#case1'); await expect(wrapper, 'component is visible').toBeVisible(); diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js index a11ba868b..d025527d6 100644 --- a/packages/astro/e2e/test-utils.js +++ b/packages/astro/e2e/test-utils.js @@ -1,8 +1,20 @@ +import fs from 'fs/promises'; +import path from 'path'; import { test as testBase, expect } from '@playwright/test'; import { loadFixture as baseLoadFixture } from '../test/test-utils.js'; export const isWindows = process.platform === 'win32'; +// Get all test files in directory, assign unique port for each of them so they don't conflict +const testFiles = await fs.readdir(new URL('.', import.meta.url)); +const testFileToPort = new Map(); +for (let i = 0; i < testFiles.length; i++) { + const file = testFiles[i]; + if (file.endsWith('.test.js')) { + testFileToPort.set(file.slice(0, -8), 4000 + i); + } +} + export function loadFixture(inlineConfig) { if (!inlineConfig || !inlineConfig.root) throw new Error("Must provide { root: './fixtures/...' }"); @@ -12,6 +24,9 @@ export function loadFixture(inlineConfig) { return baseLoadFixture({ ...inlineConfig, root: new URL(inlineConfig.root, import.meta.url).toString(), + server: { + port: testFileToPort.get(path.basename(inlineConfig.root)), + }, }); } @@ -74,3 +89,13 @@ export async function waitForHydrate(page, el) { `astro-island[uid="${astroIslandId}"]` ); } + +/** + * Scroll to element manually without making sure the `el` is stable + * @param {import('@playwright/test').Locator} el + */ +export async function scrollToElement(el) { + await el.evaluate((node) => { + node.scrollIntoView({ behavior: 'auto' }); + }); +} diff --git a/packages/astro/playwright.config.js b/packages/astro/playwright.config.js index 06ce8ff33..1f6386f6c 100644 --- a/packages/astro/playwright.config.js +++ b/packages/astro/playwright.config.js @@ -24,9 +24,6 @@ const config = { use: { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ actionTimeout: 0, - /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000', - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', }, diff --git a/packages/astro/test/test-utils.js b/packages/astro/test/test-utils.js index e26ab8c6d..b618f8593 100644 --- a/packages/astro/test/test-utils.js +++ b/packages/astro/test/test-utils.js @@ -151,7 +151,7 @@ export async function loadFixture(inlineConfig) { }; const resolveUrl = (url) => - `http://${config.server.host}:${config.server.port}${url.replace(/^\/?/, '/')}`; + `http://${config.server.host || 'localhost'}:${config.server.port}${url.replace(/^\/?/, '/')}`; // A map of files that have been edited. let fileEdits = new Map();