Skip to content
This repository was archived by the owner on Aug 5, 2025. It is now read-only.

fix: env_file playwright tests failing due to animations #505

Merged
merged 1 commit into from
Dec 15, 2023
Merged

fix: env_file playwright tests failing due to animations #505

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 24 additions & 7 deletions tests/env_file.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
import { expect, test } from '@playwright/test';
import { expect, test, type Page } from '@playwright/test';

const iframe_selector = 'iframe[src*="webcontainer.io/"]';

async function disableAnimations(page: Page) {
await page.addStyleTag({
content: `
*, *::before, *::after {
animation-duration: 0s !important;
transition-duration: 0s !important;
}
`
});
}

test.describe.configure({ mode: 'parallel' });

test('.env file: no timeout error occurs when switching a tutorials without a .env file to one with it', async ({
Expand All @@ -11,15 +22,18 @@ test('.env file: no timeout error occurs when switching a tutorials without a .e

await page.goto('/tutorial/welcome-to-svelte');

// disable animations to prevent flakiness
await disableAnimations(page);

const iframe_locator = page.frameLocator(iframe_selector);

// wait for the iframe to load
await iframe_locator.getByText('Welcome!').waitFor();

// switch to another tutorial with a .env file
await page.click('header > h1', { delay: 200 });
await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200 });
await page.click('header > button > h1', { delay: 200 });
await page.getByRole('button', { name: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
await page.getByRole('button', { name: 'Environment variables' }).click({ delay: 200 });
await page.locator('a', { hasText: '$env/static/private' }).click({ delay: 200 });

// wait for the iframe to load
Expand All @@ -41,15 +55,18 @@ test('.env file: environment variables are available when switching a tutorial w

await page.goto('/tutorial/welcome-to-svelte');

// disable animations to prevent flakiness
await disableAnimations(page);

const iframe_locator = page.frameLocator(iframe_selector);

// wait for the iframe to load
await iframe_locator.getByText('Welcome!').waitFor();

// switch to another tutorial with a .env file
await page.click('header > h1', { delay: 200 });
await page.locator('button', { hasText: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
await page.locator('button', { hasText: 'Environment variables' }).click({ delay: 200 });
await page.click('header > button > h1', { delay: 200 });
await page.getByRole('button', { name: 'Part 4: Advanced SvelteKit' }).click({ delay: 200 });
await page.getByRole('button', { name: 'Environment variables' }).click({ delay: 200 });
await page.locator('a', { hasText: '$env/dynamic/private' }).click({ delay: 200 });

// wait for the iframe to load
Expand Down