Update E2E tests for UI label changes and editor interactions (#2611)

e2e-tests/context_window.spec.ts

@@ -14,7 +14,7 @@ testSkipIfWindows("context window", async ({ po }) => {
   await po.navigation.goToSettingsTab();
   const beforeSettings = po.settings.recordSettings();
   await po.page
-    .getByRole("combobox", { name: "Maximum number of chat turns" })
+    .getByRole("combobox", { name: "Max Chat Turns in Context" })
     .click();
   await po.page.getByRole("option", { name: "Plus (5)" }).click();
 

e2e-tests/copy_app.spec.ts

@@ -34,13 +34,17 @@ for (const { testName, newAppName, buttonName, expectedVersion } of tests) {
     await po.page.getByRole("button", { name: buttonName }).click();
 
     // Wait for the copy dialog to close
-    await expect(po.page.getByRole("dialog")).not.toBeVisible({
+    await expect(
+      po.page.getByRole("dialog", { name: new RegExp(`Copy "${newAppName}"`) }),
+    ).not.toBeVisible({
       timeout: Timeout.MEDIUM,
     });
 
     // Expect to be on the new app's detail page
     await expect(
-      po.page.getByRole("heading", { name: newAppName }),
+      po.page
+        .getByTestId("app-details-page")
+        .getByRole("heading", { name: newAppName }),
     ).toBeVisible({
       // Potentially takes a while for the copy to complete
       timeout: Timeout.MEDIUM,

e2e-tests/default_chat_mode.spec.ts

@@ -13,11 +13,11 @@ test("default chat mode - pro user defaults and setting change applies to new ch
       .getByTestId("chat-mode-selector"),
   ).toHaveText("Agent");
 
-  // Change default chat mode to "agent" (Build with MCP) in settings
+  // Change default chat mode to "Build" in settings
   await po.navigation.goToSettingsTab();
   const beforeSettings = po.settings.recordSettings();
   await po.page.getByLabel("Default Chat Mode").click();
-  await po.page.getByRole("option", { name: "Build with MCP" }).click();
+  await po.page.getByRole("option", { name: /^Build/ }).click();
   po.settings.snapshotSettingsDelta(beforeSettings);
 
   // Import an app and create a new chat to verify the default is applied
@@ -27,7 +27,7 @@ test("default chat mode - pro user defaults and setting change applies to new ch
 
   // Verify the chat mode selector shows the new default mode
   await expect(po.page.getByTestId("chat-mode-selector")).toContainText(
-    "Build (MCP)",
+    "Build",
   );
 });
 

e2e-tests/edit_code.spec.ts

@@ -4,6 +4,7 @@ import fs from "fs";
 import path from "path";
 
 test("edit code", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
   const editedFilePath = path.join("src", "components", "made-with-dyad.tsx");
   await po.sendPrompt("foo");
   const appPath = await po.appManagement.getCurrentAppPath();
@@ -12,15 +13,15 @@ test("edit code", async ({ po }) => {
 
   await po.previewPanel.selectPreviewMode("code");
   await po.page.getByText("made-with-dyad.tsx").click();
-  await po.page
-    .getByRole("code")
-    .locator("div")
-    .filter({ hasText: "export const" })
-    .nth(4)
-    .click();
-  await po.page
-    .getByRole("textbox", { name: "Editor content" })
-    .fill("export const MadeWithDyad = ;");
+  // Wait for the editor to load and then fill in the new content
+  const editorContent = po.page.getByRole("textbox", {
+    name: "Editor content",
+  });
+  await expect(editorContent).toBeVisible();
+  // Monaco editor intercepts pointer events, so we need to use force: true
+  await editorContent.click({ force: true });
+  await po.page.keyboard.press("ControlOrMeta+a");
+  await po.page.keyboard.type("export const MadeWithDyad = ;");
 
   // Save the file
   await po.page.getByTestId("save-file-button").click();
@@ -38,6 +39,7 @@ test("edit code", async ({ po }) => {
 });
 
 test("edit code edits the right file", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
   const editedFilePath = path.join("src", "components", "made-with-dyad.tsx");
   const robotsFilePath = path.join("public", "robots.txt");
   await po.sendPrompt("foo");
@@ -51,15 +53,15 @@ test("edit code edits the right file", async ({ po }) => {
 
   await po.previewPanel.selectPreviewMode("code");
   await po.page.getByText("made-with-dyad.tsx").click();
-  await po.page
-    .getByRole("code")
-    .locator("div")
-    .filter({ hasText: "export const" })
-    .nth(4)
-    .click();
-  await po.page
-    .getByRole("textbox", { name: "Editor content" })
-    .fill("export const MadeWithDyad = ;");
+  // Wait for the editor to load and then fill in the new content
+  const editorContent = po.page.getByRole("textbox", {
+    name: "Editor content",
+  });
+  await expect(editorContent).toBeVisible();
+  // Monaco editor intercepts pointer events, so we need to use force: true
+  await editorContent.click({ force: true });
+  await po.page.keyboard.press("ControlOrMeta+a");
+  await po.page.keyboard.type("export const MadeWithDyad = ;");
 
   // Save the file by switching files
   await po.page.getByText("robots.txt").click();

e2e-tests/local_agent_run_type_checks.spec.ts

@@ -34,7 +34,7 @@ testSkipIfWindows(
     // After the agent runs type checks, the Problems panel should show errors
     // Wait for the fix button to be enabled and show errors
     await expect(fixButton).toBeEnabled({ timeout: Timeout.LONG });
-    await expect(fixButton).toContainText(/Fix \d+ problem/);
+    await expect(fixButton).toContainText(/Fix \d+ problem\(s\)/);
 
     // Verify the problems are displayed
     const problemRows = po.page.getByTestId("problem-row");

e2e-tests/mcp.spec.ts

@@ -105,8 +105,10 @@ testSkipIfWindows("mcp - call calculator via http", async ({ po }) => {
 
     await po.page.getByRole("button", { name: "Add Server" }).click();
 
-    // Wait for the server to be created and the "Add Header" button to become visible
-    const addHeaderButton = po.page.getByRole("button", { name: "Add Header" });
+    // Wait for the server to be created and the "Add Environment Variable" button (for headers) to become visible
+    const addHeaderButton = po.page.getByRole("button", {
+      name: "Add Environment Variable",
+    });
     await expect(addHeaderButton).toBeVisible({ timeout: 10000 });
     await addHeaderButton.click();
     await po.page.getByRole("textbox", { name: "Key" }).fill("Authorization");

e2e-tests/problems.spec.ts

@@ -114,7 +114,7 @@ export default App;
     // Initially, all selected: button shows Fix X problems and Clear all is visible
     const fixButton = po.page.getByTestId("fix-all-button");
     await expect(fixButton).toBeVisible();
-    await expect(fixButton).toContainText(/Fix \d+ problems/);
+    await expect(fixButton).toContainText(/Fix \d+ problem\(s\)/);
 
     // Click first two rows to toggle off (deselect)
     const rows = po.page.getByTestId("problem-row");
@@ -124,7 +124,7 @@ export default App;
     await rows.nth(1).click();
 
     // Button should update to reflect remaining selected
-    await expect(fixButton).toContainText(/Fix 1 problem/);
+    await expect(fixButton).toContainText(/Fix 1 problem\(s\)/);
 
     // Clear all should switch to Select all when none selected
     // Deselect remaining rows
@@ -141,7 +141,7 @@ export default App;
     await selectButton.click();
     // Unselect the second row
     await rows.nth(1).click();
-    await expect(fixButton).toContainText(/Fix 2 problems/);
+    await expect(fixButton).toContainText(/Fix 2 problem\(s\)/);
 
     await fixButton.click();
     await po.chatActions.waitForChatCompletion();
@@ -170,13 +170,13 @@ export default App;
   await po.previewPanel.selectPreviewMode("problems");
   const fixButton = po.page.getByTestId("fix-all-button");
   await expect(fixButton).toBeEnabled({ timeout: Timeout.LONG });
-  await expect(fixButton).toContainText(/Fix 1 problem/);
+  await expect(fixButton).toContainText(/Fix 1 problem\(s\)/);
 
   fs.unlinkSync(badFilePath);
 
   await po.previewPanel.clickRecheckProblems();
   await expect(fixButton).toBeDisabled({ timeout: Timeout.LONG });
-  await expect(fixButton).toContainText(/Fix 0 problems/);
+  await expect(fixButton).toContainText(/Fix 0 problem\(s\)/);
 });
 
 testSkipIfWindows("problems - manual edit (next.js)", async ({ po }) => {
@@ -200,11 +200,11 @@ testSkipIfWindows("problems - manual edit (next.js)", async ({ po }) => {
   await po.previewPanel.selectPreviewMode("problems");
   const fixButton = po.page.getByTestId("fix-all-button");
   await expect(fixButton).toBeEnabled({ timeout: Timeout.LONG });
-  await expect(fixButton).toContainText(/Fix 1 problem/);
+  await expect(fixButton).toContainText(/Fix 1 problem\(s\)/);
 
   fs.unlinkSync(badFilePath);
 
   await po.previewPanel.clickRecheckProblems();
   await expect(fixButton).toBeDisabled({ timeout: Timeout.LONG });
-  await expect(fixButton).toContainText(/Fix 0 problems/);
+  await expect(fixButton).toContainText(/Fix 0 problem\(s\)/);
 });

e2e-tests/snapshots/default_chat_mode.spec.ts_default-chat-mode---pro-user-defaults-and-setting-change-applies-to-new-chat-1.txt

 - "defaultChatMode": "local-agent"
-+ "defaultChatMode": "agent"
++ "defaultChatMode": "build"
\ No newline at end of file

e2e-tests/snapshots/local_agent_run_type_checks.spec.ts_local-agent---run-type-checks-updates-problems-panel-1.aria.yml

@@ -3,7 +3,7 @@
 - button "Run checks":
   - img
 - button "Clear all"
-- button "Fix 3 problems":
+- button "Fix 3 problem(s)":
   - img
 - checkbox "Select problem src/test-errors.ts 2:7 Type 'string' is not assignable to type 'number'." [checked]:
   - checkbox "Select problem" [checked]: