Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix VT video test fail in firefox #12188

Merged
merged 5 commits into from
Oct 11, 2024
Merged

Fix VT video test fail in firefox #12188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0f85ab7
Fix VT video test fail in firefox
bluwy Oct 11, 2024
96e24d3
Try fix
bluwy Oct 11, 2024
8f79bd7
Just skip it
bluwy Oct 11, 2024
41892a4
Merge branch 'main' into fix-firefox-video-test-fail
bluwy Oct 11, 2024
65b491c
merge
bluwy Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/astro/e2e/fixtures/view-transitions/src/components/Video.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 15 additions & 4 deletions packages/astro/e2e/view-transitions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't run it in firefox in CI do we?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do with test:e2e:firefox


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 }) => {
Expand Down
Loading