fix: fix some node playwright tests

Author: tefkah

packages/context-editor/playwright.config.ts

@@ -37,7 +37,6 @@ export default defineConfig({
 	use: {
 		/* Base URL to use in actions like `await page.goto('/')`. */
 		baseURL,
-
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: "on-first-retry",
 	},

packages/context-editor/playwright/attribute-panel.spec.ts

@@ -25,8 +25,9 @@ test.describe("attribute panel", () => {
 			await test.step("fill out panel while keeping it open", async () => {
 				const id = "test id";
 				const className = "test class";
-				await page.getByRole("textbox", { name: "id" }).fill(id);
-				await page.getByRole("textbox", { name: "class" }).fill(className);
+				await page.getByTestId("advanced-options-trigger").click();
+				await page.getByTestId("id-input").fill(id);
+				await page.getByTestId("class-input").fill(className);
 			});
 
 			await test.step("can close the panel by clicking the button again", async () => {
@@ -60,9 +61,11 @@ test.describe("attribute panel", () => {
 				await clickNode(page, "paragraph");
 				await page.getByTestId("attribute-panel").waitFor();
 				await expect(page.getByTestId("attribute-panel")).not.toContainText("strong");
+
+				await page.getByTestId("advanced-options-trigger").click();
 				const id = "paragraph-id";
-				await page.getByRole("textbox", { name: "id" }).fill(id);
-				await expect(page.getByRole("textbox", { name: "id" })).toHaveValue(id);
+				await page.getByTestId("id-input").fill(id);
+				await expect(page.getByTestId("id-input")).toHaveValue(id);
 			});
 
 			await test.step("click on other text", async () => {
@@ -72,7 +75,8 @@ test.describe("attribute panel", () => {
 					.getByText(text)
 					.click({ position: { x: 20, y: 0 } });
 				await expect(page.getByTestId("attribute-panel")).toContainText("strong");
-				await expect(page.getByRole("textbox", { name: "id" })).toHaveValue("");
+				await page.getByTestId("advanced-options-trigger").click();
+				await expect(page.getByTestId("id-input")).toHaveValue("");
 			});
 		});
 
@@ -91,15 +95,17 @@ test.describe("attribute panel", () => {
 				await page.getByTestId("attribute-panel").waitFor();
 				const id = "id1";
 				const className = "class1";
-				await page.getByRole("textbox", { name: "id" }).fill(id);
-				await page.getByRole("textbox", { name: "class" }).fill(className);
+				await page.getByTestId("advanced-options-trigger").click();
+				await page.getByTestId("id-input").fill(id);
+				await page.getByTestId("class-input").fill(className);
 			});
 
 			await test.step("open panel on second paragraph", async () => {
 				await clickNode(page, "paragraph", 1);
 				// Make sure the second paragraph does not have the same attrs as the first
-				await expect(page.getByRole("textbox", { name: "id" })).toHaveValue("");
-				await expect(page.getByRole("textbox", { name: "class" })).toHaveValue("");
+				await page.getByTestId("advanced-options-trigger").click();
+				await expect(page.getByTestId("id-input")).toHaveValue("");
+				await expect(page.getByTestId("class-input")).toHaveValue("");
 			});
 		});
 	});

packages/context-editor/src/components/menus/MenuFields.tsx

@@ -27,7 +27,11 @@ export const MenuInputField = ({
 							<FormLabel>{label}</FormLabel>
 							<div className="col-span-3 flex items-center gap-4">
 								<FormControl>
-									<Input {...field} placeholder="None" />
+									<Input
+										{...field}
+										placeholder="None"
+										data-testid={`${name}-input`}
+									/>
 								</FormControl>
 								{right ? right(field.value) : null}
 							</div>
@@ -60,6 +64,7 @@ export const MenuSwitchField = (props: MenuSwitchFieldProps) => {
 						<FormLabel>{label}</FormLabel>
 						<FormControl>
 							<Switch
+								data-testid={`${props.name}-switch`}
 								checked={props.value ?? field.value}
 								onCheckedChange={props.onChange ?? field.onChange}
 								className="data-[state=checked]:bg-emerald-400"