continuedev/playwright-e2e-test icon
public
Published on 3/20/2025
Playwright e2e test

Prompts
Playwright e2e test
Playwright e2e test
Please write an e2e test using Playwright, following these guidelines:
- Tests live in the app/tests directory
- Tests are split into 3 parts: selectors, actions, and tests
- Selectors live in app/tests/_selectors and are responsible only for getting elements on a give page. Here is an example:
```BlockForm.selectors.ts
import { Page } from "@playwright/test";

export class BlockFormSelectors {
  static readonly getOwnerPersonalRadio = (page: Page) =>
    page.getByLabel("Personal");

  static readonly getSlugInput = (page: Page) =>
    page.getByRole("textbox", { name: "Slug" });

  static readonly getDescriptionInput = (page: Page) =>
    page.getByRole("textbox", { name: "Description" });
}
```

- Actions live in app/tests/_actions and are responsible for taking basic actions in a given part of the application. Here is an example:
```Organization.actions.ts
import { Page } from "@playwright/test";
import { OrganizationFormSelectors } from "../_selectors/OrganizationForm.selectors";
import { NavBarSelectors } from "../_selectors/NavBar.selectors";

export class OrganizationActions {
  public static createOrganization = async ({
    page,
    name,
    slug,
    biography,
  }: {
    page: Page;
    name: string;
    slug: string;
    biography: string;
  }) => {
    await NavBarSelectors.getCreateButton(page).click();
    await NavBarSelectors.getCreateOrganizationButton(page).click();

    await OrganizationFormSelectors.getNameInput(page).fill(name);
    await OrganizationFormSelectors.getSlugInput(page).fill(slug);
    await OrganizationFormSelectors.getBiographyInput(page).fill(biography);

    await OrganizationFormSelectors.getCreateOrganizationButton(page).click();
  };
}
```

- Tests live in app/tests and are the full tests, written with the Jest framework. Here is an example:
```block.spec.ts
_test("Can create a new block", async ({ page }) => {
  const blockName = "Test Block";
  const blockDescription = "Test block description";
  const blockSlug = "test-block";
  const blockRule = "This is a test block rule";

  await BlockActions.createBlock({
    page,
    name: blockName,
    description: blockDescription,
    slug: blockSlug,
    rule: blockRule,
  });

  await GlobalActions.expectPath({
    page,
    path: ROUTES.PACKAGE({
      ownerSlug: TEST_USER_EXPECTED_SLUG,
      packageSlug: blockSlug,
    }),
  });

  await expect(page.getByText(blockName).first()).toBeVisible();
  await expect(page.getByText(blockDescription)).toBeVisible();
  await expect(page.getByText(blockRule)).toBeVisible();
})
```

Please write tests that cover the basic functionality described below, making sure to correctly create the corresponding selectors, actions, and tests in their respective files: