test: update @playwright/test to 1.59.1 and fix e2e tests (#381)

Author: Pixel998

e2e-tests/code-editing-and-ast-interaction.test.ts

@@ -39,19 +39,9 @@ test(`should change code, then highlight code and AST nodes matching ESQuery sel
 }) => {
 	await page.goto("/");
 
-	// focus code editor textbox
 	await page
-		.getByRole("region", { name: "Code Editor Panel" })
-		.getByRole("textbox")
-		.nth(1)
-		.click();
-
-	// delete the default code
-	await page.keyboard.press("ControlOrMeta+KeyA");
-	await page.keyboard.press("Backspace");
-
-	// add new code
-	await page.keyboard.type("console.log('Hello, World!');");
+		.getByRole("textbox", { name: "Code Editor", exact: true })
+		.fill("console.log('Hello, World!');");
 
 	// add an ESQuery selector
 	await page.getByRole("textbox", { name: "ESQuery Selector" }).click();
@@ -86,22 +76,19 @@ test(`should keep ESQuery highlights aligned while typing before a matching lite
 }) => {
 	await page.goto("/");
 
-	const codeEditor = page
-		.getByRole("region", { name: "Code Editor Panel" })
-		.getByRole("textbox")
-		.nth(1);
-	const highlight = page.locator(".bg-editorHighlightedRangeColor");
+	const codeEditor = page.getByRole("textbox", {
+		name: "Code Editor",
+		exact: true,
+	});
+	const highlight = codeEditor.locator(".bg-editorHighlightedRangeColor");
 
-	await codeEditor.click();
-	await codeEditor.press("ControlOrMeta+KeyA");
-	await codeEditor.press("Backspace");
-	await codeEditor.pressSequentially("42;");
+	await codeEditor.fill("42;");
 
 	await page
 		.getByRole("textbox", { name: "ESQuery Selector" })
 		.fill("Literal");
 
-	await expect(highlight).toHaveText("42");
+	await expect(highlight).toHaveText(["42"]);
 
 	await codeEditor.click();
 	await codeEditor.press("Home");
@@ -138,5 +125,5 @@ test(`should keep ESQuery highlights aligned while typing before a matching lite
 	expect(
 		highlightSamples.every(highlightText => highlightText === "42"),
 	).toBe(true);
-	await expect(highlight).toHaveText("42");
+	await expect(highlight).toHaveText(["42"]);
 });

e2e-tests/persistence.test.ts

@@ -47,18 +47,6 @@ async function getStoredHashValue(page: Page): Promise<string> {
 	}, storageKey);
 }
 
-async function replaceEditorValue(page: Page, value: string) {
-	const codeEditor = page
-		.getByRole("region", { name: "Code Editor Panel" })
-		.getByRole("textbox")
-		.nth(1);
-
-	await codeEditor.click();
-	await codeEditor.press("ControlOrMeta+KeyA");
-	await codeEditor.press("Backspace");
-	await codeEditor.pressSequentially(value);
-}
-
 //-----------------------------------------------------------------------------
 // Tests
 //-----------------------------------------------------------------------------
@@ -70,8 +58,12 @@ test("should persist unicode code safely in the URL hash", async ({ page }) => {
 	await page.goto("/");
 
 	const unicodeCode = 'const \u03C0 = "\u{1F600}";';
+	const codeEditor = page.getByRole("textbox", {
+		name: "Code Editor",
+		exact: true,
+	});
 
-	await replaceEditorValue(page, unicodeCode);
+	await codeEditor.fill(unicodeCode);
 
 	await expect.poll(() => getPersistedJavaScriptCode(page)).toBe(unicodeCode);
 	await expect.poll(() => getStoredHashValue(page)).toContain("v2.");
@@ -83,7 +75,7 @@ test("should persist unicode code safely in the URL hash", async ({ page }) => {
 	}, storageKey);
 	await page.goto(`/${persistedHash}`);
 
-	await expect(page.locator(".cm-content")).toContainText(unicodeCode);
+	await expect(codeEditor).toContainText(unicodeCode);
 });
 
 test("should still load state from legacy hash links", async ({ page }) => {
@@ -93,8 +85,12 @@ test("should still load state from legacy hash links", async ({ page }) => {
 	await page.goto("/");
 
 	const legacyCode = "console.log('legacy hash');";
+	const codeEditor = page.getByRole("textbox", {
+		name: "Code Editor",
+		exact: true,
+	});
 
-	await replaceEditorValue(page, legacyCode);
+	await codeEditor.fill(legacyCode);
 
 	await expect.poll(() => getPersistedJavaScriptCode(page)).toBe(legacyCode);
 
@@ -114,7 +110,7 @@ test("should still load state from legacy hash links", async ({ page }) => {
 	}, storageKey);
 	await page.goto(`/#${legacyHash}`);
 
-	await expect(page.locator(".cm-content")).toContainText(legacyCode);
+	await expect(codeEditor).toContainText(legacyCode);
 });
 
 test("should fall back to localStorage when a v2 hash is malformed", async ({
@@ -126,8 +122,12 @@ test("should fall back to localStorage when a v2 hash is malformed", async ({
 	await page.goto("/");
 
 	const fallbackCode = "console.log('localStorage fallback');";
+	const codeEditor = page.getByRole("textbox", {
+		name: "Code Editor",
+		exact: true,
+	});
 
-	await replaceEditorValue(page, fallbackCode);
+	await codeEditor.fill(fallbackCode);
 
 	await expect
 		.poll(() => getPersistedJavaScriptCode(page))
@@ -161,5 +161,5 @@ test("should fall back to localStorage when a v2 hash is malformed", async ({
 	);
 	await page.goto(`/#${malformedHash}`);
 
-	await expect(page.locator(".cm-content")).toContainText(fallbackCode);
+	await expect(codeEditor).toContainText(fallbackCode);
 });