Attach image e2e tests (#301)

e2e-tests/helpers/test_helper.ts

@@ -20,7 +20,25 @@ class PageObject {
     await this.selectTestModel();
   }
 
-  async snapshotMessages() {
+  async snapshotMessages({
+    replaceDumpPath = false,
+  }: { replaceDumpPath?: boolean } = {}) {
+    if (replaceDumpPath) {
+      // Update page so that "[[dyad-dump-path=*]]" is replaced with a placeholder path
+      // which is stable across runs.
+      await this.page.evaluate(() => {
+        const messagesList = document.querySelector(
+          "[data-testid=messages-list]",
+        );
+        if (!messagesList) {
+          throw new Error("Messages list not found");
+        }
+        messagesList.innerHTML = messagesList.innerHTML.replace(
+          /\[\[dyad-dump-path=([^\]]+)\]\]/,
+          "[[dyad-dump-path=*]]",
+        );
+      });
+    }
     await expect(this.page.getByTestId("messages-list")).toMatchAriaSnapshot();
   }
 
@@ -41,7 +59,9 @@ class PageObject {
     await expect(iframe.contentFrame().locator("body")).toMatchAriaSnapshot();
   }
 
-  async snapshotServerDump() {
+  async snapshotServerDump({
+    onlyLastMessage = false,
+  }: { onlyLastMessage?: boolean } = {}) {
     // Get the text content of the messages list
     const messagesListText = await this.page
       .getByTestId("messages-list")
@@ -62,7 +82,9 @@ class PageObject {
     const dumpContent = fs.readFileSync(dumpFilePath, "utf-8");
 
     // Perform snapshot comparison
-    expect(prettifyDump(dumpContent)).toMatchSnapshot("server-dump.txt");
+    expect(prettifyDump(dumpContent, { onlyLastMessage })).toMatchSnapshot(
+      "server-dump.txt",
+    );
   }
 
   async waitForChatCompletion() {
@@ -85,13 +107,21 @@ class PageObject {
     return this.page.getByRole("button", { name: "Undo" });
   }
 
+  getHomeChatInputContainer() {
+    return this.page.getByTestId("home-chat-input-container");
+  }
+
+  getChatInputContainer() {
+    return this.page.getByTestId("chat-input-container");
+  }
+
+  getChatInput() {
+    return this.page.getByRole("textbox", { name: "Ask Dyad to build..." });
+  }
+
   async sendPrompt(prompt: string) {
-    await this.page
-      .getByRole("textbox", { name: "Ask Dyad to build..." })
-      .click();
-    await this.page
-      .getByRole("textbox", { name: "Ask Dyad to build..." })
-      .fill(prompt);
+    await this.getChatInput().click();
+    await this.getChatInput().fill(prompt);
     await this.page.getByRole("button", { name: "Send message" }).click();
     await this.waitForChatCompletion();
   }
@@ -310,22 +340,29 @@ export const test = base.extend<{
   ],
 });
 
-function prettifyDump(dumpContent: string) {
+function prettifyDump(
+  dumpContent: string,
+  { onlyLastMessage = false }: { onlyLastMessage?: boolean } = {},
+) {
   const parsedDump = JSON.parse(dumpContent) as Array<{
     role: string;
     content: string;
   }>;
 
-  return parsedDump
+  const messages = onlyLastMessage ? parsedDump.slice(-1) : parsedDump;
+
+  return messages
     .map((message) => {
-      const content = message.content
-        // We remove package.json because it's flaky.
-        // Depending on whether pnpm install is run, it will be modified,
-        // and the contents and timestamp (thus affecting order) will be affected.
-        .replace(
-          /\n<dyad-file path="package\.json">[\s\S]*?<\/dyad-file>\n/g,
-          "",
-        );
+      const content = Array.isArray(message.content)
+        ? JSON.stringify(message.content)
+        : message.content
+            // We remove package.json because it's flaky.
+            // Depending on whether pnpm install is run, it will be modified,
+            // and the contents and timestamp (thus affecting order) will be affected.
+            .replace(
+              /\n<dyad-file path="package\.json">[\s\S]*?<\/dyad-file>\n/g,
+              "",
+            );
       return `===\nrole: ${message.role}\nmessage: ${content}`;
     })
     .join("\n\n");