From 4fd77d003c192f9bd15ffdff7c59d2ae7ee0594d Mon Sep 17 00:00:00 2001 From: Brett Sargeant Date: Mon, 18 Sep 2023 16:53:02 +1000 Subject: [PATCH] fix: env_file playwright tests failing due to animations --- tests/env_file.spec.ts | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/tests/env_file.spec.ts b/tests/env_file.spec.ts index 7177e40cf..7a546b29c 100644 --- a/tests/env_file.spec.ts +++ b/tests/env_file.spec.ts @@ -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 ({ @@ -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 @@ -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