Fix e2e tests & playwright comment job (#2392)

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

-- "selectedChatMode": "build"
-+ "selectedChatMode": "local-agent"
 - "selectedTemplateId": "react"
 + "selectedTemplateId": "next"
\ No newline at end of file

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";
     }