Fix e2e tests & playwright comment job (#2392)

#skip-bb
<!-- devin-review-badge-begin -->

---

<a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2392">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->


<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixes failing Next.js e2e tests by selecting the correct chat mode and
restarting after upgrades, and improves the Playwright PR comment with
clearer run/update commands. Also increases local test timeout to reduce
flaky failures.

- **Bug Fixes**
  - Selects “build” chat mode in Next.js tests.
  - Adds restart after upgrade in select component test.
  - Updates snapshot to expect the “next” template ID.
  - Raises local timeout to 75s to reduce flakes.

- **New Features**
- Playwright PR comment now includes copy-paste commands to run and
update snapshots for each failed test.
- Uses -g "pattern" with proper escaping; groups many commands in a
collapsible section.

<sup>Written for commit 5124cf2.
Summary will update on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

Author: wwwillchen

e2e-tests/select_component.spec.ts

@@ -124,6 +124,7 @@ testSkipIfWindows("upgrade app to select component", async ({ po }) => {
   await po.clickOpenInChatButton();
   // There should be another version from the upgrade being committed.
   await expect(po.page.getByText("Version 2")).toBeVisible();
+  await po.clickRestart();
 
   await po.clickPreviewPickElement();
 
@@ -141,7 +142,7 @@ testSkipIfWindows("select component next.js", async ({ po }) => {
   await po.setUp();
 
   await po.goToHubAndSelectTemplate("Next.js Template");
-
+  await po.selectChatMode("build");
   await po.sendPrompt("tc=basic");
   await po.clickTogglePreviewPanel();
   await po.clickPreviewPickElement();

e2e-tests/snapshots/template-create-nextjs.spec.ts_create-next-js-app-1.txt

@@ -1,4 +1,2 @@
-- "selectedChatMode": "build"
-+ "selectedChatMode": "local-agent"
 - "selectedTemplateId": "react"
 + "selectedTemplateId": "next"

e2e-tests/template-create-nextjs.spec.ts

@@ -5,6 +5,7 @@ test("create next.js app", async ({ po }) => {
   await po.setUp();
   const beforeSettings = po.recordSettings();
   await po.goToHubAndSelectTemplate("Next.js Template");
+  await po.selectChatMode("build");
   po.snapshotSettingsDelta(beforeSettings);
 
   // Create an app

playwright.config.ts

@@ -7,7 +7,7 @@ const config: PlaywrightTestConfig = {
   testDir: "./e2e-tests",
   workers: 1,
   retries: process.env.CI ? 2 : 0,
-  timeout: process.env.CI ? 180_000 : 45_000,
+  timeout: process.env.CI ? 180_000 : 75_000,
   // Use a custom snapshot path template because Playwright's default
   // is platform-specific which isn't necessary for Dyad e2e tests
   // which should be platform agnostic (we don't do screenshots; only textual diffs).

scripts/generate-playwright-summary.js

@@ -70,12 +70,21 @@ function parseTestTitle(fullTitle) {
   return { specFile, testName };
 }
 
-// Generate copy-paste command for updating snapshots
-function generateUpdateCommand(fullTitle) {
+// Generate copy-paste command for running a specific test
+function generateTestCommand(fullTitle) {
   const { specFile, testName } = parseTestTitle(fullTitle);
   // Escape special characters in testName for the grep pattern
   const escapedTestName = testName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  return `npm run e2e e2e-tests/${specFile} -- --g="${escapedTestName}" --update-snapshots`;
+  return `npm run e2e e2e-tests/${specFile} -- -g "${escapedTestName}"`;
+}
+
+// Generate both run and update commands for a test
+function generateCommands(fullTitle) {
+  const testCmd = generateTestCommand(fullTitle);
+  return {
+    run: testCmd,
+    update: `${testCmd} --update-snapshots`,
+  };
 }
 
 function detectOperatingSystemsFromReport(report) {
@@ -369,22 +378,25 @@ async function run({ github, context, core }) {
     // Add macOS copy-paste commands section
     const macOsFailures = resultsByOs["macOS"]?.failures || [];
     if (macOsFailures.length > 0) {
-      comment += "### 📋 Update Snapshot Commands (macOS)\n\n";
+      comment += "### 📋 Test Commands (macOS)\n\n";
       comment +=
-        "Copy and paste these commands to update snapshots for failed tests:\n\n";
+        "Copy and paste these commands to run or update snapshots for failed tests:\n\n";
 
       if (macOsFailures.length > 5) {
-        comment += `<details>\n<summary>Show all ${macOsFailures.length} commands</summary>\n\n`;
+        comment += `<details>\n<summary>Show all ${macOsFailures.length} test commands</summary>\n\n`;
       }
 
-      comment += "```bash\n";
       for (const f of macOsFailures) {
-        comment += generateUpdateCommand(f.title) + "\n";
+        const cmds = generateCommands(f.title);
+        comment += `**\`${f.title}\`**\n`;
+        comment += "```bash\n";
+        comment += `# Run test\n${cmds.run}\n\n`;
+        comment += `# Update snapshots\n${cmds.update}\n`;
+        comment += "```\n\n";
       }
-      comment += "```\n";
 
       if (macOsFailures.length > 5) {
-        comment += "\n</details>\n";
+        comment += "</details>\n";
       }
       comment += "\n";
     }