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: