# Phoenix Playwright Test Examples

Complete examples from the Phoenix test suite.

## Example 1: Basic CRUD Test (Prompt Management)

```typescript
import { expect, test } from "@playwright/test";
import { randomUUID } from "crypto";

test.describe("Prompt Management", () => {
  test.beforeEach(async ({ page }) => {
    page.goto(`/login`);
    await page.getByLabel("Email").fill("admin@localhost");
    await page.getByLabel("Password").fill("admin123");
    await page.getByRole("button", { name: "Log In", exact: true }).click();
    await page.waitForURL("**/projects");
  });

  test("can create a prompt", async ({ page }) => {
    await page.goto("/prompts");
    await page.waitForURL("**/prompts");
    await page.getByRole("link", { name: "New Prompt" }).click();
    await page.waitForURL("**/playground");
    await page
      .getByText("You are a chatbot")
      .fill("You are a helpful assistant");
    await page.getByRole("button", { name: "Save Prompt" }).click();
    await page.getByPlaceholder("Select or enter new prompt").click();
    const promptName = `chatbot-${randomUUID()}`;
    await page.getByPlaceholder("Select or enter new prompt").fill(promptName);
    await page.getByLabel("Prompt Description").click();
    await page.getByLabel("Prompt Description").fill("very kind chatbot");
    await page.getByRole("button", { name: "Create Prompt" }).click();
    await page.getByRole("button", { name: "View Prompt" }).click();

    await expect(page.getByRole("heading", { name: promptName })).toBeVisible();
    await expect(
      page.getByText("You are a helpful assistant").first()
    ).toBeVisible();
  });
});
```

## Example 2: User Management (Admin Actions)

```typescript
import { expect, test } from "@playwright/test";
import { randomUUID } from "crypto";

test.beforeEach(async ({ page }) => {
  page.goto(`/login`);
  await page.getByLabel("Email").fill("admin@localhost");
  await page.getByLabel("Password").fill("admin123");
  await page.getByRole("button", { name: "Log In", exact: true }).click();
  await page.waitForURL("**/projects");
});

test("can create a user", async ({ page }) => {
  await page.goto("/settings/general");
  await page.waitForURL("**/settings/general");
  await page.getByRole("button", { name: "Add User" }).click();

  const email = `member-${randomUUID()}@localhost.com`;
  await page.getByLabel("Email").fill(email);
  await page.getByLabel("Username").fill(email);
  await page.getByLabel("Password", { exact: true }).fill("member123");
  await page.getByLabel("Confirm Password").fill("member123");
  await page.getByRole("dialog").getByLabel("member", { exact: true }).click();
  await page
    .getByRole("dialog")
    .getByRole("option", { name: "member" })
    .click();
  await page
    .getByRole("dialog")
    .getByRole("button", { name: "Add User" })
    .click();

  await expect(page.getByRole("cell", { name: email })).toBeVisible();
});
```

## Example 3: Serial Tests with Shared State (Evaluators)

```typescript
import { expect, test } from "@playwright/test";
import { randomUUID } from "crypto";

test.describe.serial("Server Evaluators", () => {
  const datasetName = `test-dataset-${randomUUID()}`;
  const customEvaluatorName = `custom-eval-${randomUUID().slice(0, 8)}`;
  const updatedDescription = "Updated description for testing";

  test.beforeEach(async ({ page }) => {
    await page.goto(`/login`);
    await page.getByLabel("Email").fill("admin@localhost");
    await page.getByLabel("Password").fill("admin123");
    await page.getByRole("button", { name: "Log In", exact: true }).click();
    await page.waitForURL("**/projects");
  });

  test("can create a dataset", async ({ page }) => {
    await page.goto("/datasets");
    await page.waitForURL("**/datasets");

    await page.getByRole("button", { name: "New Dataset" }).click();
    await page.getByRole("menuitem", { name: "New Dataset" }).click();

    await page.getByLabel("Dataset Name").clear();
    await page.getByLabel("Dataset Name").fill(datasetName);
    await page.getByLabel("Description").fill("Test dataset for evaluators");

    await page.getByRole("button", { name: "Create Dataset" }).click();
    await expect(page.getByRole("dialog")).not.toBeVisible({ timeout: 10000 });

    await expect(page.getByRole("link", { name: datasetName })).toBeVisible({
      timeout: 10000,
    });
  });

  test("can create a custom LLM evaluator", async ({ page }) => {
    await page.goto("/datasets");
    await page.getByRole("link", { name: datasetName }).click();
    await page.waitForURL("**/datasets/**/examples");
    await page.getByRole("tab", { name: /Evaluators/i }).click();
    await page.waitForURL("**/evaluators");

    await page.getByRole("button", { name: "Add evaluator" }).click();
    await page
      .getByRole("menuitem", { name: "Create new LLM evaluator" })
      .click();

    await expect(
      page.getByRole("heading", { name: "Create Evaluator" })
    ).toBeVisible();

    await page
      .getByRole("textbox", { name: "Name" })
      .first()
      .fill(customEvaluatorName);
    await page
      .getByRole("textbox", { name: /Description/i })
      .fill("Initial description for custom evaluator");

    const systemSection = page.locator(
      'button:has-text("System"):not([role="menuitem"])'
    );
    const systemTextbox = systemSection
      .locator("..")
      .locator("..")
      .getByRole("textbox");
    await systemTextbox.fill("You are an evaluator.");

    const userSection = page.locator(
      'button:has-text("User"):not([role="menuitem"])'
    );
    const userTextbox = userSection
      .locator("..")
      .locator("..")
      .getByRole("textbox");
    await userTextbox.fill("Evaluate: {{output}}");

    await page.getByRole("button", { name: "Create" }).click();
    await expect(page.getByRole("dialog")).not.toBeVisible({ timeout: 10000 });

    await expect(
      page.getByRole("cell", { name: customEvaluatorName })
    ).toBeVisible();
  });

  test("can edit an LLM evaluator", async ({ page }) => {
    await page.goto("/datasets");
    await page.getByRole("link", { name: datasetName }).click();
    await page.waitForURL("**/datasets/**/examples");
    await page.getByRole("tab", { name: /Evaluators/i }).click();
    await page.waitForURL("**/evaluators");

    const evaluatorRow = page.getByRole("row").filter({
      has: page.getByRole("cell", { name: customEvaluatorName }),
    });
    await evaluatorRow.getByRole("button").last().click();
    await page.getByRole("menuitem", { name: "Edit" }).click();

    await expect(
      page.getByRole("heading", { name: "Edit Evaluator" })
    ).toBeVisible();

    const descriptionInput = page.getByRole("textbox", {
      name: /Description/i,
    });
    await descriptionInput.clear();
    await descriptionInput.fill(updatedDescription);

    await page.getByRole("button", { name: "Update" }).click();
    await expect(page.getByRole("dialog")).not.toBeVisible({ timeout: 10000 });

    await expect(
      page.getByRole("cell", { name: customEvaluatorName })
    ).toBeVisible();
  });

  test("can verify edits were saved", async ({ page }) => {
    await page.goto("/datasets");
    await page.getByRole("link", { name: datasetName }).click();
    await page.waitForURL("**/datasets/**/examples");
    await page.getByRole("tab", { name: /Evaluators/i }).click();
    await page.waitForURL("**/evaluators");

    const evaluatorRow = page.getByRole("row").filter({
      has: page.getByRole("cell", { name: customEvaluatorName }),
    });
    await evaluatorRow.getByRole("button").last().click();
    await page.getByRole("menuitem", { name: "Edit" }).click();

    const descriptionInput = page.getByRole("textbox", {
      name: /Description/i,
    });
    await expect(descriptionInput).toHaveValue(updatedDescription);

    await page.getByRole("button", { name: "Cancel" }).click();
  });
});
```

## Example 4: Role-Based Access Control

```typescript
import { expect, test } from "@playwright/test";

test.describe("Viewer Access", () => {
  test.beforeEach(async ({ page }) => {
    page.goto(`/login`);
    await page.getByLabel("Email").fill("viewer@localhost.com");
    await page.getByLabel("Password").fill("viewer123");
    await page.getByRole("button", { name: "Log In", exact: true }).click();
    await page.waitForURL("**/projects");
  });

  test("viewer cannot access settings", async ({ page }) => {
    await page.goto("/settings/general");
    // Viewer should be redirected or see access denied
    await expect(page.getByText("Access Denied")).toBeVisible();
  });
});
```

## Example 5: Testing with Playground Integration

```typescript
test("evaluators are visible in playground when dataset is selected", async ({
  page,
}) => {
  await page.goto("/datasets");
  await page.getByRole("link", { name: datasetName }).click();
  await page.waitForURL("**/datasets/**/examples");

  const datasetUrl = page.url();
  const datasetIdMatch = datasetUrl.match(/datasets\/([^/]+)/);
  const datasetIdForUrl = datasetIdMatch ? datasetIdMatch[1] : "";

  await page.goto(`/playground?datasetId=${datasetIdForUrl}`);
  await page.waitForURL("**/playground**");

  await expect(
    page.getByRole("button", { name: new RegExp(datasetName) })
  ).toBeVisible();

  await expect(page.getByRole("heading", { name: "Experiment" })).toBeVisible();

  const experimentSection = page.locator("text=Experiment").locator("..");
  await expect(
    experimentSection.getByRole("button", { name: "Evaluators" })
  ).toBeVisible();
});
```