Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -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';
---
<video controls="" autoplay="" transition:persist transition:name="video" autoplay>
<video controls="" transition:persist transition:name="video" autoplay>
<source src={vidUrl} type="video/mp4">
</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.');
});
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 }) => {