make it easy to write multiple e2e tests (#280)

e2e-tests/fixtures/basic.md

@@ -0,0 +1 @@
+This is a simple basic response

e2e-tests/helpers/test_helper.ts

@@ -1,9 +1,86 @@
-import { test as base } from "@playwright/test";
+import { test as base, Page, expect } from "@playwright/test";
 import { findLatestBuild, parseElectronApp } from "electron-playwright-helpers";
 import { ElectronApplication, _electron as electron } from "playwright";
 
 const showDebugLogs = process.env.DEBUG_LOGS === "true";
 
+class PageObject {
+  constructor(private page: Page) {}
+
+  async setUp() {
+    await this.goToSettingsTab();
+    await this.setUpTestProvider();
+    await this.setUpTestModel();
+    await this.goToAppsTab();
+    await this.selectTestModel();
+  }
+
+  async dumpMessages() {
+    await expect(this.page.getByTestId("messages-list")).toMatchAriaSnapshot();
+  }
+
+  async waitForChatCompletion() {
+    await expect(
+      this.page.getByRole("button", { name: "Retry" }),
+    ).toBeVisible();
+  }
+
+  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.page.getByRole("button", { name: "Start new chat" }).click();
+    await this.waitForChatCompletion();
+  }
+
+  async selectTestModel() {
+    await this.page.getByRole("button", { name: "Model: Auto" }).click();
+    await this.page.getByText("test-provider").click();
+    await this.page.getByText("test-model").click();
+  }
+
+  async setUpTestProvider() {
+    await this.page.getByText("Add custom providerConnect to").click();
+    // Fill out provider dialog
+    await this.page
+      .getByRole("textbox", { name: "Provider ID" })
+      .fill("testing");
+    await this.page.getByRole("textbox", { name: "Display Name" }).click();
+    await this.page
+      .getByRole("textbox", { name: "Display Name" })
+      .fill("test-provider");
+    await this.page.getByText("API Base URLThe base URL for").click();
+    await this.page
+      .getByRole("textbox", { name: "API Base URL" })
+      .fill("http://localhost:3500/v1");
+    await this.page.getByRole("button", { name: "Add Provider" }).click();
+  }
+
+  async setUpTestModel() {
+    await this.page
+      .getByRole("heading", { name: "test-provider Needs Setup" })
+      .click();
+    await this.page.getByRole("button", { name: "Add Custom Model" }).click();
+    await this.page
+      .getByRole("textbox", { name: "Model ID*" })
+      .fill("test-model");
+    await this.page.getByRole("textbox", { name: "Model ID*" }).press("Tab");
+    await this.page.getByRole("textbox", { name: "Name*" }).fill("test-model");
+    await this.page.getByRole("button", { name: "Add Model" }).click();
+  }
+
+  async goToSettingsTab() {
+    await this.page.getByRole("link", { name: "Settings" }).click();
+  }
+
+  async goToAppsTab() {
+    await this.page.getByRole("link", { name: "Apps" }).click();
+  }
+}
+
 // From https://github.com/microsoft/playwright/issues/8208#issuecomment-1435475930
 //
 // Note how we mark the fixture as { auto: true }.
@@ -11,7 +88,17 @@ const showDebugLogs = process.env.DEBUG_LOGS === "true";
 export const test = base.extend<{
   attachScreenshotsToReport: void;
   electronApp: ElectronApplication;
+  po: PageObject;
 }>({
+  po: [
+    async ({ electronApp }, use) => {
+      const page = await electronApp.firstWindow();
+
+      const po = new PageObject(page);
+      await use(po);
+    },
+    { auto: true },
+  ],
   attachScreenshotsToReport: [
     async ({ page }, use, testInfo) => {
       await use();

e2e-tests/main.spec.ts

@@ -8,45 +8,14 @@ test("renders the first page", async ({ electronApp }) => {
   expect(text).toBe("Build your dream app");
 });
 
-test("simple message to custom test model", async ({ electronApp }) => {
-  const page = await electronApp.firstWindow();
-  await page.getByRole("link", { name: "Settings" }).click();
-  await page.getByText("Add custom providerConnect to").click();
-
-  // Fill out provider dialog
-  await page.getByRole("textbox", { name: "Provider ID" }).fill("testing");
-  await page.getByRole("textbox", { name: "Display Name" }).click();
-  await page
-    .getByRole("textbox", { name: "Display Name" })
-    .fill("test-provider");
-  await page.getByText("API Base URLThe base URL for").click();
-  await page
-    .getByRole("textbox", { name: "API Base URL" })
-    .fill("http://localhost:3500/v1");
-  await page.getByRole("button", { name: "Add Provider" }).click();
-
-  // Create custom model
-  await page
-    .getByRole("heading", { name: "test-provider Needs Setup" })
-    .click();
-  await page.getByRole("button", { name: "Add Custom Model" }).click();
-  await page.getByRole("textbox", { name: "Model ID*" }).fill("test-model");
-  await page.getByRole("textbox", { name: "Model ID*" }).press("Tab");
-  await page.getByRole("textbox", { name: "Name*" }).fill("test-model");
-  await page.getByRole("button", { name: "Add Model" }).click();
-
-  // Go to apps page and select custom model
-  await page.getByRole("link", { name: "Apps" }).click();
-  await page.getByRole("button", { name: "Model: Auto" }).click();
-  await page.getByText("test-provider").click();
-  await page.getByText("test-model").click();
-
-  // Enter prompt and send
-  await page.getByRole("textbox", { name: "Ask Dyad to build..." }).click();
-  await page.getByRole("textbox", { name: "Ask Dyad to build..." }).fill("hi");
-  await page.getByRole("button", { name: "Start new chat" }).click();
-
-  // Make sure it's done
-  await expect(page.getByRole("button", { name: "Retry" })).not.toBeVisible();
-  await expect(page.getByTestId("messages-list")).toMatchAriaSnapshot();
+test("simple message to custom test model", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("hi");
+  await po.dumpMessages();
+});
+
+test("basic message to custom test model", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("tc=basic");
+  await po.dumpMessages();
 });

e2e-tests/snapshots/main.spec.ts_basic-message-to-custom-test-model-1.aria.yml

@@ -0,0 +1,4 @@
+- paragraph: tc=basic
+- paragraph: This is a simple basic response
+- button "Retry":
+  - img