From 7a2e059f2711acfcb80bf932911011baec0f7145 Mon Sep 17 00:00:00 2001
From: Arnar Freyr <Arnarfreyr29@gmail.com>
Date: Thu, 14 Dec 2023 20:08:37 +0100
Subject: [PATCH] Playwright for firefox and webkit (#160)

* i try fix

* Fix popover compat issue

* Remove global config

* Fix lint

* remove unused

* Fixed typos

* Skipping popover dependent tests in firefox and webkit

* Attempt to fix flaky fill

* Attempt to fix other flaky tests

Co-Authored-By: Nyby <45389841+NybyDK@users.noreply.github.com>

* Disabling concurrent tests

Co-Authored-By: Nyby <45389841+NybyDK@users.noreply.github.com>

* Removed comment

Co-Authored-By: Nyby <45389841+NybyDK@users.noreply.github.com>

---------

Co-authored-by: Anton <dev@atjn.dk>
Co-authored-by: BaBrixx <bastian.b.hansen@gmail.com>
Co-authored-by: Bastian Brix <90306530+BaBrixx@users.noreply.github.com>
Co-authored-by: Nyby <45389841+NybyDK@users.noreply.github.com>
Co-authored-by: Nyby <nyby.dev@gmail.com>
---
 playwright.config.ts                          | 16 +++
 src/lib/classes/automaton/IdMap.ts            |  2 +-
 src/lib/components/buttons/SvgButton.svelte   |  2 +-
 .../components/overlayMenu/OverlayMenu.svelte | 11 ++-
 src/lib/components/project/ProjectItem.svelte | 98 ++++++++++---------
 .../project/ProjectItemDropDownMenu.svelte    |  6 +-
 .../GlobalDeclaration.svelte                  |  6 +-
 src/routes/+layout.svelte                     | 13 +++
 tests/lib/components/project/project.test.ts  | 72 +++++++++++---
 tests/lib/components/query/query.test.ts      | 36 ++++++-
 .../components/settings/colorSettings.test.ts | 14 +++
 .../components/settings/fontSettings.test.ts  |  4 +
 .../lib/components/settings/settings.test.ts  |  4 +
 .../components/sidePanel/sidePanel.test.ts    |  4 +
 14 files changed, 217 insertions(+), 71 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 29515670..8234c0d8 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,6 +1,8 @@
 import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
+	workers: 1,
 	webServer: {
 		command: "yarn build && yarn preview",
 		port: 4173,
@@ -8,6 +10,20 @@ const config: PlaywrightTestConfig = {
 	},
 	testDir: "tests",
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+	],
 };
 
 export default config;
diff --git a/src/lib/classes/automaton/IdMap.ts b/src/lib/classes/automaton/IdMap.ts
index c19dd912..0995042c 100644
--- a/src/lib/classes/automaton/IdMap.ts
+++ b/src/lib/classes/automaton/IdMap.ts
@@ -171,7 +171,7 @@ export abstract class IdMap<
 			const storedMember = this.get(id);
 			if (storedMember && storedMember.id !== id) {
 				throw new TypeError(
-					`This map uses a different Id (${storedMember.id.rawId}) that is uniqely comparable to ${id.rawId}. You cannot use both in the same map.`,
+					`This map uses a different Id (${storedMember.id.rawId}) that is uniquely comparable to ${id.rawId}. You cannot use both in the same map.`,
 				);
 			}
 		}
diff --git a/src/lib/components/buttons/SvgButton.svelte b/src/lib/components/buttons/SvgButton.svelte
index 552d5668..4103cef3 100644
--- a/src/lib/components/buttons/SvgButton.svelte
+++ b/src/lib/components/buttons/SvgButton.svelte
@@ -15,13 +15,13 @@
 <div>
 	<button
 		style="justify-content: {justifyContent}"
+		{id}
 		bind:this={button}
 		on:click={click}
 		{popovertarget}
 	>
 		<svelte:component
 			this={icon}
-			{id}
 			{size}
 			{color}
 			ariaLabel=""
diff --git a/src/lib/components/overlayMenu/OverlayMenu.svelte b/src/lib/components/overlayMenu/OverlayMenu.svelte
index 371fe949..d5aa4508 100644
--- a/src/lib/components/overlayMenu/OverlayMenu.svelte
+++ b/src/lib/components/overlayMenu/OverlayMenu.svelte
@@ -64,6 +64,10 @@
 		open = Boolean(event.newState === "open");
 	}
 
+	// TODO: this check is unnecessary when support is universal: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover#browser_compatibility
+	const popoverIsSupported =
+		browser && Object.hasOwnProperty.call(HTMLElement.prototype, "popover");
+
 	/**
 	 * Opens the context menu (Right-click menu)
 	 */
@@ -71,7 +75,7 @@
 		if (!overlayMenuPopover) return;
 
 		// Show the menu
-		if (!overlayMenuPopover.matches(":popover-open"))
+		if (popoverIsSupported && !overlayMenuPopover.matches(":popover-open"))
 			overlayMenuPopover.showPopover();
 
 		// Set up event listeners for closing the menu
@@ -103,7 +107,10 @@
 	 * Closes the context menu (Right-click menu)
 	 */
 	function closeContextMenu() {
-		if (overlayMenuPopover?.matches(":popover-open")) {
+		if (
+			popoverIsSupported &&
+			overlayMenuPopover?.matches(":popover-open")
+		) {
 			overlayMenuPopover.hidePopover();
 		}
 		closeListenersController?.abort();
diff --git a/src/lib/components/project/ProjectItem.svelte b/src/lib/components/project/ProjectItem.svelte
index a7b80bf1..b1a37362 100644
--- a/src/lib/components/project/ProjectItem.svelte
+++ b/src/lib/components/project/ProjectItem.svelte
@@ -16,22 +16,23 @@
 	export let setAsActive: () => void;
 	export let rename: () => void;
 
-	const UniqeId = id.rawId.split(" ").join("-").toLowerCase();
+	const UniqueId = id.rawId.split(" ").join("-").toLowerCase();
 </script>
 
-<button on:click={setAsActive}>
-	<div class="project-item {itemType}" id={UniqeId}>
-		<div
-			class="left"
-			on:dblclick={rename}
-			on:keypress={(event) => {
-				if (event.key === "Enter") {
-					rename();
-				}
-			}}
-			role="button"
-			tabindex="0"
-		>
+<div class="project-item {itemType}" id={UniqueId}>
+	<div
+		class="left"
+		on:click={setAsActive}
+		on:dblclick={rename}
+		on:keypress={(event) => {
+			if (event.key === "Enter") {
+				rename();
+			}
+		}}
+		role="button"
+		tabindex="0"
+	>
+		<div style="display: flex;">
 			<div class="circle" style="background-color: {color}">
 				<div class="icon">
 					{#if itemType === "component"}
@@ -43,47 +44,49 @@
 			</div>
 			<p>{id.rawId}</p>
 		</div>
-		<div>
-			{#if itemType === "component"}
-				<ProjectItemDropDownMenu
-					bind:description
-					bind:color
-					bind:includeInPeriodicCheck
-					{id}
-					{itemType}
-				/>
-			{:else}
-				<ProjectItemDropDownMenu
-					bind:description
-					bind:color
-					{id}
-					{itemType}
-				/>
-			{/if}
-		</div>
 	</div>
-</button>
+	<div class="right">
+		{#if itemType === "component"}
+			<ProjectItemDropDownMenu
+				bind:description
+				bind:color
+				bind:includeInPeriodicCheck
+				{id}
+				{itemType}
+			/>
+		{:else}
+			<ProjectItemDropDownMenu
+				bind:description
+				bind:color
+				{id}
+				{itemType}
+			/>
+		{/if}
+	</div>
+</div>
 
 <style>
-	button {
-		display: block;
-		color: inherit;
-		font: inherit;
-		border: none;
-		border-bottom: 1px solid black;
-		padding: 0;
+	.left {
+		padding: 10px;
 		width: 100%;
+		overflow: hidden;
+		border-right: 1px solid rgba(28, 28, 28, 0.55);
+		border-image: linear-gradient(
+			rgba(0, 0, 0, 0) 20%,
+			rgba(0, 0, 0, 1) 20%,
+			rgba(0, 0, 0, 1) 80%,
+			rgba(0, 0, 0, 0) 80%
+		);
+		border-image-slice: 1;
 	}
 
-	button:focus-visible {
-		outline: 1px solid white;
-		outline-offset: -1px;
+	.right {
+		margin: 0 5px;
 	}
 
-	.left {
-		display: flex;
-		align-items: center;
-		width: 100%;
+	p {
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.project-item {
@@ -95,7 +98,6 @@
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
-		padding: 10px;
 		border-bottom: 1px solid black;
 	}
 
diff --git a/src/lib/components/project/ProjectItemDropDownMenu.svelte b/src/lib/components/project/ProjectItemDropDownMenu.svelte
index 07840eb4..e3523b11 100644
--- a/src/lib/components/project/ProjectItemDropDownMenu.svelte
+++ b/src/lib/components/project/ProjectItemDropDownMenu.svelte
@@ -19,7 +19,7 @@
 	export let id: SystemId | ComponentId;
 	export let itemType: "system" | "component";
 
-	const UniqeId = id.rawId.split(" ").join("-").toLowerCase();
+	const UniqueId = id.rawId.split(" ").join("-").toLowerCase();
 
 	const colorOptions = [
 		"#8B0000", // Dark Red
@@ -40,7 +40,7 @@
 		"#900C3F", // Deep Red
 	];
 
-	const menuId = `${UniqeId}-menu`;
+	const menuId = `${UniqueId}-menu`;
 	let button: HTMLElement;
 
 	/**
@@ -57,7 +57,7 @@
 	bind:button
 	icon={More_vert}
 	popovertarget={menuId}
-	id={`${UniqeId}-button`}
+	id={`${UniqueId}-button`}
 	color="var(--sidebar-text-color)"
 />
 <OverlayMenu anchor={button} id={menuId}>
diff --git a/src/lib/components/project/globalDeclaration/GlobalDeclaration.svelte b/src/lib/components/project/globalDeclaration/GlobalDeclaration.svelte
index 203b64dc..d45cce9d 100644
--- a/src/lib/components/project/globalDeclaration/GlobalDeclaration.svelte
+++ b/src/lib/components/project/globalDeclaration/GlobalDeclaration.svelte
@@ -22,7 +22,6 @@
 		color: inherit;
 		font: inherit;
 		border: none;
-		border-bottom: 1px solid black;
 		padding: 0;
 		width: 100%;
 	}
@@ -32,6 +31,11 @@
 		outline-offset: -1px;
 	}
 
+	p {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	#global-dec {
 		background-color: var(--sidebar-element-color);
 		transition: var(--sidebar-element-transition);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9713da87..5f53ed5d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,18 @@
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import ContextMenu from "$lib/components/contextMenu/ContextMenu.svelte";
+
+	if (browser) {
+		/**
+		 * This is a temporary fix to not show the popover elements in Firefox, which has not enabled support for popover elements yet
+		 * TOOO: remove this when the popover element is enabled by default: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility
+		 */
+		if (!Object.hasOwnProperty.call(HTMLElement.prototype, "popover")) {
+			const style = document.createElement("style");
+			document.head.appendChild(style);
+			style.sheet?.insertRule("div[popover] { display: none; }");
+		}
+	}
 </script>
 
 <svelte:head>
diff --git a/tests/lib/components/project/project.test.ts b/tests/lib/components/project/project.test.ts
index bf10f85d..9c127d34 100644
--- a/tests/lib/components/project/project.test.ts
+++ b/tests/lib/components/project/project.test.ts
@@ -3,7 +3,11 @@ import { test, expect } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
 	await page.goto("/");
 	await page.waitForLoadState();
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 	await page.click("#start-new-project");
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 });
 
 test("Starts only with Global Declaration", async ({ page }) => {
@@ -28,6 +32,7 @@ test("Add 10 components", async ({ page }) => {
 
 	for (let i = 0; i < 10; i++) {
 		await page.click("#add-component");
+		await page.waitForLoadState();
 	}
 
 	await expect(page.locator(".project-item.component")).toHaveCount(10);
@@ -55,7 +60,13 @@ test("Add 5 systems and 5 components", async ({ page }) => {
 	await expect(page.locator(".project-item.system")).toHaveCount(5);
 });
 
-test("Delete a component", async ({ page }) => {
+test("Delete a component", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await expect(page.locator(".project-item.component")).toHaveCount(0);
 	await page.click("#add-component");
 	await expect(page.locator(".project-item.component")).toHaveCount(1);
@@ -67,7 +78,13 @@ test("Delete a component", async ({ page }) => {
 	await expect(page.locator(".project-item.component")).toHaveCount(0);
 });
 
-test("Delete a system", async ({ page }) => {
+test("Delete a system", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await expect(page.locator(".project-item.system")).toHaveCount(0);
 	await page.click("#add-system");
 	await expect(page.locator(".project-item.system")).toHaveCount(1);
@@ -79,11 +96,17 @@ test("Delete a system", async ({ page }) => {
 	await expect(page.locator(".project-item.system")).toHaveCount(0);
 });
 
-test("Delete 10 systems", async ({ page }) => {
+test("Delete 10 systems", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await expect(page.locator(".project-item.system")).toHaveCount(0);
 
 	for (let i = 0; i < 10; i++) {
-		await page.click("#add-system");
+		await page.locator("#add-system").click();
 	}
 
 	await expect(page.locator(".project-item.system")).toHaveCount(10);
@@ -99,7 +122,13 @@ test("Delete 10 systems", async ({ page }) => {
 	await expect(page.locator(".project-item.system")).toHaveCount(0);
 });
 
-test("Delete 10 components", async ({ page }) => {
+test("Delete 10 components", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await expect(page.locator(".project-item.component")).toHaveCount(0);
 
 	for (let i = 0; i < 10; i++) {
@@ -119,7 +148,13 @@ test("Delete 10 components", async ({ page }) => {
 	await expect(page.locator(".project-item.component")).toHaveCount(0);
 });
 
-test("Delete the 2.nd with a given color component", async ({ page }) => {
+test("Delete the 2nd component", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	for (let i = 1; i <= 3; i++) {
 		await page.click("#add-component");
 
@@ -150,7 +185,13 @@ test("Delete the 2.nd with a given color component", async ({ page }) => {
 	);
 });
 
-test("Can toggle includeInPeriodicCheck", async ({ page }) => {
+test("Can toggle includeInPeriodicCheck", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await page.click("#add-component");
 
 	const svgPath = page
@@ -182,17 +223,26 @@ test("Can toggle includeInPeriodicCheck", async ({ page }) => {
 	expect(firstPath).toBe(thirdPath);
 });
 
-test("Description should stay the same after edited", async ({ page }) => {
-	await page.click("#add-component");
+test("Description should stay the same after edited", async ({
+	page,
+	browserName,
+}) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
 
-	await page.click("#component-1-button");
+	await page.locator("#add-component").click();
+
+	await page.locator("#component-1-button").click();
 	await page
 		.locator("#component-1-menu")
 		.getByRole("textbox")
 		.fill("This is a new description.");
 	await page.keyboard.press("Escape");
 
-	await page.click("#component-1-button");
+	await page.locator("#component-1-button").click();
 	await expect(
 		page.locator("#component-1-menu").getByRole("textbox"),
 	).toHaveValue("This is a new description.");
diff --git a/tests/lib/components/query/query.test.ts b/tests/lib/components/query/query.test.ts
index bb48b3e3..9adb94c9 100644
--- a/tests/lib/components/query/query.test.ts
+++ b/tests/lib/components/query/query.test.ts
@@ -3,7 +3,11 @@ import { test, expect } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
 	await page.goto("/");
 	await page.waitForLoadState();
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 	await page.click("#start-new-project");
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 });
 
 test("starts with no queries", async ({ page }) => {
@@ -26,7 +30,13 @@ test("add 10 queries", async ({ page }) => {
 	await expect(page.locator(".query")).toHaveCount(10);
 });
 
-test("delete any query", async ({ page }) => {
+test("delete any query", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await expect(page.locator(".query")).toHaveCount(0);
 	await page.click("#add-query");
 	await expect(page.locator(".query")).toHaveCount(1);
@@ -35,7 +45,13 @@ test("delete any query", async ({ page }) => {
 	await expect(page.locator(".query")).toHaveCount(0);
 });
 
-test("delete all 10 queries", async ({ page }) => {
+test("delete all 10 queries", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await expect(page.locator(".query")).toHaveCount(0);
 
 	for (let i = 0; i < 10; i++) {
@@ -55,7 +71,13 @@ test("delete all 10 queries", async ({ page }) => {
 	await expect(page.locator(".query")).toHaveCount(0);
 });
 
-test("delete a specific query", async ({ page }) => {
+test("delete a specific query", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await expect(page.locator(".query")).toHaveCount(0);
 
 	for (let i = 0; i < 3; i++) {
@@ -153,7 +175,13 @@ test("can change backend to all options", async ({ page }) => {
 	}
 });
 
-test("can change isPeriodic", async ({ page }) => {
+test("can change isPeriodic", async ({ page, browserName }) => {
+	// TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility
+	test.skip(
+		browserName === "firefox" || browserName === "webkit",
+		"Popover not supported yet",
+	);
+
 	await page.click("#add-query");
 
 	const svgPath = page
diff --git a/tests/lib/components/settings/colorSettings.test.ts b/tests/lib/components/settings/colorSettings.test.ts
index 67732bdf..e95d9141 100644
--- a/tests/lib/components/settings/colorSettings.test.ts
+++ b/tests/lib/components/settings/colorSettings.test.ts
@@ -3,7 +3,11 @@ import { test, expect, type Dialog } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
 	await page.goto("/");
 	await page.waitForLoadState();
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 	await page.click("#start-new-project");
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 
 	await page.getByRole("button", { name: "Options", exact: true }).hover();
 	await page
@@ -54,6 +58,8 @@ test("can use color picker to update a valid color", async ({ page }) => {
 
 	await page.locator("#add-color").click();
 
+	await page.waitForSelector(".bottom .custom-color");
+
 	const colorInputs = await page.locator(`input[type="color"]`).all();
 
 	await colorInputs[1].fill("#ff00ff");
@@ -77,6 +83,8 @@ test("can update valid color", async ({ page }) => {
 
 	await page.locator("#add-color").click();
 
+	await page.waitForSelector('.bottom .custom-color input[type="number"]');
+
 	const modifiedColorFields = await page
 		.locator(".bottom .custom-color")
 		.first()
@@ -129,6 +137,10 @@ test("can delete invalid color", async ({ page }) => {
 
 		await page.locator("#add-color").click();
 
+		await page.waitForSelector(
+			'.bottom .custom-color input[type="number"]',
+		);
+
 		const modifiedColorFields = await page
 			.locator(".bottom .custom-color")
 			.first()
@@ -173,6 +185,8 @@ test("cannot update invalid color", async ({ page }) => {
 
 	await page.locator("#add-color").click();
 
+	await page.waitForSelector('.bottom .custom-color input[type="number"]');
+
 	const modifiedColorFields = await page
 		.locator(".bottom .custom-color")
 		.first()
diff --git a/tests/lib/components/settings/fontSettings.test.ts b/tests/lib/components/settings/fontSettings.test.ts
index b1679779..6fc56042 100644
--- a/tests/lib/components/settings/fontSettings.test.ts
+++ b/tests/lib/components/settings/fontSettings.test.ts
@@ -5,7 +5,11 @@ const testFilesPath = "tests/lib/components/settings/testfiles";
 test.beforeEach(async ({ page }) => {
 	await page.goto("/");
 	await page.waitForLoadState();
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 	await page.click("#start-new-project");
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 
 	await page.getByRole("button", { name: "Options", exact: true }).hover();
 	await page
diff --git a/tests/lib/components/settings/settings.test.ts b/tests/lib/components/settings/settings.test.ts
index 46dd980f..00012cbc 100644
--- a/tests/lib/components/settings/settings.test.ts
+++ b/tests/lib/components/settings/settings.test.ts
@@ -3,7 +3,11 @@ import { test, expect, type Page, type Locator } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
 	await page.goto("/");
 	await page.waitForLoadState();
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 	await page.click("#start-new-project");
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 
 	await page.getByRole("button", { name: "Options", exact: true }).hover();
 	await page
diff --git a/tests/lib/components/sidePanel/sidePanel.test.ts b/tests/lib/components/sidePanel/sidePanel.test.ts
index 69d65eb0..a0bfb373 100644
--- a/tests/lib/components/sidePanel/sidePanel.test.ts
+++ b/tests/lib/components/sidePanel/sidePanel.test.ts
@@ -3,7 +3,11 @@ import { test, expect } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
 	await page.goto("/");
 	await page.waitForLoadState();
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 	await page.click("#start-new-project");
+	await page.waitForLoadState("load");
+	await page.waitForLoadState("domcontentloaded");
 });
 
 test("side panels exist", async ({ page }) => {