chore: refactor playwright tests (sveltejs#229)

Author: tomoam

playwright.config.ts

@@ -4,7 +4,8 @@ const config: PlaywrightTestConfig = {
 	webServer: {
 		command: 'pnpm preview',
 		port: 4173
-	}
+	},
+	timeout: 60000
 };
 
 export default config;

tests/env_file.spec.ts

@@ -1,14 +1,10 @@
-import { expect, test, chromium } from '@playwright/test';
-
-const chromium_flags = ['--enable-features=SharedArrayBuffer'];
+import { expect, test } from '@playwright/test';
 
 const iframe_selector = 'iframe[src*="webcontainer.io/"]';
 
-test('.env file: no timeout error occurs when switching a tutorials without a .env file to one with it', async () => {
-	test.setTimeout(60000);
-
-	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
-	const page = context.pages()[0];
+test('.env file: no timeout error occurs when switching a tutorials without a .env file to one with it', async ({
+	page
+}) => {
 	await page.bringToFront();
 
 	await page.goto('/tutorial/welcome-to-svelte');
@@ -20,9 +16,9 @@ test('.env file: no timeout error occurs when switching a tutorials without a .e
 
 	// 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.locator('a', { hasText: '$env/static/private' }).click({ 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.locator('a', { hasText: '$env/static/private' }).click({ delay: 200 });
 
 	// wait for the iframe to load
 	await iframe_locator.getByText('enter the passphrase').waitFor();
@@ -34,13 +30,11 @@ test('.env file: no timeout error occurs when switching a tutorials without a .e
 	// expect no timeout error
 	await expect(page.getByText('Yikes!')).toBeHidden();
 	await expect(iframe_locator.getByText('enter the passphrase')).toBeVisible();
-
-	await context.close();
 });
 
-test('.env file: environment variables are available when switching a tutorial without a .env file to one with it', async () => {
-	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
-	const page = context.pages()[0];
+test('.env file: environment variables are available when switching a tutorial without a .env file to one with it', async ({
+	page
+}) => {
 	await page.bringToFront();
 
 	await page.goto('/tutorial/welcome-to-svelte');
@@ -52,25 +46,22 @@ test('.env file: environment variables are available when switching a tutorial w
 
 	// 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.locator('a', { hasText: '$env/dynamic/private' }).click({ 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.locator('a', { hasText: '$env/dynamic/private' }).click({ delay: 200 });
 
 	// wait for the iframe to load
 	await iframe_locator.getByText('enter the passphrase').waitFor();
-	await iframe_locator.locator('input[name="passphrase"]').waitFor();
 
-	await page.waitForTimeout(500);
+	await page.waitForTimeout(3000);
 
 	// login
 	// 'open sesame' is the environment variables loaded from `.env` file
 	await iframe_locator.locator('input[name="passphrase"]').fill('open sesame');
-	await page.keyboard.press('Enter', { delay: 200 });
+	await page.keyboard.press('Enter', { delay: 1000 });
 
 	// expect to be able to login.
 	// Being able to log in means that environment variables are loaded.
 	await expect(iframe_locator.getByText('wrong passphrase!')).toBeHidden();
-	await expect(iframe_locator.locator('button', { hasText: 'log out'})).toBeEnabled();
-
-	await context.close();
+	await expect(iframe_locator.locator('button', { hasText: 'log out' })).toBeEnabled();
 });

tests/focus_management.spec.ts

@@ -1,14 +1,10 @@
-import { expect, test, chromium } from '@playwright/test';
-
-const chromium_flags = ['--enable-features=SharedArrayBuffer'];
+import { expect, test } from '@playwright/test';
 
 const editor_selector = 'div.monaco-scrollable-element.editor-scrollable';
 const editor_focus_selector = 'textarea.inputarea.monaco-mouse-cursor-text';
 const iframe_selector = 'iframe[src*="webcontainer.io/"]';
 
-test('focus management: the editor keeps focus when iframe is loaded', async () => {
-	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
-	const page = context.pages()[0];
+test('focus management: the editor keeps focus when iframe is loaded', async ({ page }) => {
 	await page.bringToFront();
 
 	await page.goto('/tutorial/your-first-component');
@@ -27,13 +23,9 @@ test('focus management: the editor keeps focus when iframe is loaded', async ()
 
 	// expect focus to be on the editor
 	await expect(page.locator(editor_focus_selector)).toBeFocused();
-
-	await context.close();
 });
 
-test('focus management: input inside the iframe gets focus when clicking it', async () => {
-	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
-	const page = context.pages()[0];
+test('focus management: input inside the iframe gets focus when clicking it', async ({ page }) => {
 	await page.bringToFront();
 
 	await page.goto('/tutorial/named-form-actions');
@@ -49,21 +41,19 @@ test('focus management: input inside the iframe gets focus when clicking it', as
 
 	// then, click a input in the iframe
 	const input = iframe.locator('input[name="description"]');
-	await input.click({ delay: 500 });
+	await input.click({ delay: 1000 });
 
 	// wait a little, because there may be a script that manipulates focus
 	await page.waitForTimeout(1000);
 
 	// expect focus to be on the input in the iframe, not the editor.
 	await expect(input).toBeFocused();
 	await expect(page.locator(editor_focus_selector)).not.toBeFocused();
-
-	await context.close();
 });
 
-test('focus management: body inside the iframe gets focus when clicking a link inside the iframe', async () => {
-	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
-	const page = context.pages()[0];
+test('focus management: body inside the iframe gets focus when clicking a link inside the iframe', async ({
+	page
+}) => {
 	await page.bringToFront();
 
 	await page.goto('/tutorial/layouts');
@@ -88,13 +78,9 @@ test('focus management: body inside the iframe gets focus when clicking a link i
 
 	// expect focus to be on body in the iframe, not the editor.
 	await expect(iframe.locator('body')).toBeFocused();
-
-	await context.close();
 });
 
-test('focus management: the editor keeps focus while typing', async () => {
-	const context = await chromium.launchPersistentContext('', { args: chromium_flags });
-	const page = context.pages()[0];
+test('focus management: The editor keeps focus while typing', async ({ page }) => {
 	await page.bringToFront();
 
 	await page.goto('/tutorial/your-first-component');
@@ -114,7 +100,7 @@ test('focus management: the editor keeps focus while typing', async () => {
 	await page.waitForTimeout(500);
 
 	// type the code as a person would do it manually
-	await page.keyboard.type(`	export let data;`, { delay: 100 });
+	await page.keyboard.type(`	export let data;`, { delay: 150 });
 
 	// wait a little, because there may be a script that manipulates focus
 	await page.waitForTimeout(1000);
@@ -125,6 +111,4 @@ test('focus management: the editor keeps focus while typing', async () => {
 	const expected = '<script>\n  export let data;\n</script>\n<h1>Hello world!</h1>';
 
 	expect(received).toBe(expected);
-
-	await context.close();
 });