Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -05:00
Code Issues Activity

Fix VT video test fail in firefox (#12188)

Browse source
This commit is contained in:
Bjorn Lu 2024-10-12 00:05:35 +08:00 • committed by GitHub
parent fd367b5341
commit 650dd22a7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/astro/e2e/fixtures/view-transitions/src/components/Video.astro
View file

@ -1,6 +1,6 @@
--- ---
import vidUrl from '../assets/astro-build.mp4'; 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"> <source src={vidUrl} type="video/mp4">
</video> </video>

19
packages/astro/e2e/view-transitions.test.js
View file

@ -504,22 +504,33 @@ test.describe('View Transitions', () => {
await expect(img).toBeVisible('The image tag should have the transition scope attribute.'); 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; const getTime = () => document.querySelector('video').currentTime;
// Go to page 1 // Go to page 1
await page.goto(astro.resolveUrl('/video-one')); await page.goto(astro.resolveUrl('/video-one'));
const vid = page.locator('video'); const vid = page.locator('video');
await expect(vid).toBeVisible(); 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); const firstTime = await page.evaluate(getTime);
// Navigate to page 2 // Navigate to page 2
await page.click('#click-two'); await page.click('#click-two');
const p = page.locator('#video-two'); const vid2 = page.locator('#video-two');
await expect(p).toBeVisible(); 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); 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 }) => { test('React Islands can persist using transition:persist', async ({ page, astro }) => {