diff options
| -rw-r--r-- | packages/astro/e2e/fixtures/view-transitions/src/components/Video.astro | 2 | ||||
| -rw-r--r-- | packages/astro/e2e/view-transitions.test.js | 19 |
2 files changed, 16 insertions, 5 deletions
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/Video.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/Video.astro index 936e25ceb..c000fa768 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/Video.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/Video.astro @@ -1,6 +1,6 @@ --- import vidUrl from '../assets/astro-build.mp4'; --- -<video controls="" autoplay="" transition:persist transition:name="video" autoplay> +<video controls="" transition:persist transition:name="video" autoplay> <source src={vidUrl} type="video/mp4"> </video> diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 29f6d0e5e..2b9244a16 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -504,22 +504,33 @@ test.describe('View Transitions', () => { await expect(img).toBeVisible('The image tag should have the transition scope attribute.'); }); - test('<video> can persist using transition:persist', async ({ page, astro }) => { + test('<video> can persist using transition:persist', async ({ page, astro, browserName }) => { + // NOTE: works locally but fails on CI + test.skip(browserName === 'firefox', 'Firefox has issues playing the video. Errors on play()'); + const getTime = () => document.querySelector('video').currentTime; // Go to page 1 await page.goto(astro.resolveUrl('/video-one')); const vid = page.locator('video'); await expect(vid).toBeVisible(); + // Mute the video before playing, otherwise there's actually sounds when testing + await vid.evaluate((el) => (el.muted = true)); + // Browser blocks autoplay, so we manually play it here. For some reason, + // you need to click and play it manually for it to actually work. + await vid.click(); + await vid.evaluate((el) => el.play()); const firstTime = await page.evaluate(getTime); // Navigate to page 2 await page.click('#click-two'); - const p = page.locator('#video-two'); - await expect(p).toBeVisible(); + const vid2 = page.locator('#video-two'); + await expect(vid2).toBeVisible(); + // Use a very short timeout so we can ensure there's always a video playtime gap + await page.waitForTimeout(50); const secondTime = await page.evaluate(getTime); - expect(secondTime).toBeGreaterThanOrEqual(firstTime); + expect(secondTime).toBeGreaterThan(firstTime); }); test('React Islands can persist using transition:persist', async ({ page, astro }) => { |