playwright poc

playwright/fixtures/app.ts

@@ -1,27 +1,35 @@
 import { test as base } from "@playwright/test";
 import { MenuPage } from "../pages/menu.page";
-import { OnboardingPage } from "../pages/onboarding.page";
 import { CreateSliceModalPage } from "../pages/slices/createSliceModal.page";
+import { CreateTypeModalPage } from "../pages/types/createTypeModal.page";
 import { SliceDetailsPage } from "../pages/slices/sliceDetails.page";
 import { SliceListPage } from "../pages/slices/sliceList.page";
-import { AddFieldModalPage } from "../pages/slices/addFieldModal.page";
+import { CustomTypesListPage } from "../pages/types/customTypesList.page";
+import { PageTypesListPage } from "../pages/types/pageTypesList.page";
+import { ChangesPage } from "../pages/changes.page";
+import { ChangelogPage } from "../pages/changelog.page";
+import { CustomTypesDetailsPage } from "../pages/types/customTypesDetails.page";
+import { RenameTypeModalPage } from "../pages/types/renameTypeModal.page";
 
 // Declare the types of your fixtures.
 type MyFixtures = {
   createSliceModalPage: CreateSliceModalPage;
   sliceDetailsPage: SliceDetailsPage;
   sliceListPage: SliceListPage;
-  onboardingPage: OnboardingPage;
+  customTypesListPage: CustomTypesListPage;
+  customTypesDetailsPage: CustomTypesDetailsPage;
+  createTypeModalPage: CreateTypeModalPage;
+  renameTypeModalPage: RenameTypeModalPage;
+  pageTypesListPage: PageTypesListPage;
+  changesPage: ChangesPage;
+  changelogPage: ChangelogPage;
   menu: MenuPage;
 };
 
 export const test = base.extend<MyFixtures>({
   menu: async ({ page }, use) => {
     await use(new MenuPage(page));
   },
-  onboardingPage: async ({ page }, use) => {
-    await use(new OnboardingPage(page));
-  },
   createSliceModalPage: async ({ page }, use) => {
     await use(new CreateSliceModalPage(page));
   },
@@ -31,6 +39,27 @@ export const test = base.extend<MyFixtures>({
   sliceListPage: async ({ page }, use) => {
     await use(new SliceListPage(page));
   },
+  customTypesListPage: async ({ page }, use) => {
+    await use(new CustomTypesListPage(page));
+  },
+  customTypesDetailsPage: async ({ page }, use) => {
+    await use(new CustomTypesDetailsPage(page));
+  },
+  pageTypesListPage: async ({ page }, use) => {
+    await use(new PageTypesListPage(page));
+  },
+  createTypeModalPage: async ({ page }, use) => {
+    await use(new CreateTypeModalPage(page));
+  },
+  renameTypeModalPage: async ({ page }, use) => {
+    await use(new RenameTypeModalPage(page));
+  },
+  changesPage: async ({ page }, use) => {
+    await use(new ChangesPage(page));
+  },
+  changelogPage: async ({ page }, use) => {
+    await use(new ChangelogPage(page));
+  },
 });
 
 export { expect } from "@playwright/test";

playwright/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "SliceMachine - end to end tests",
+  "name": "slicemachine-e2e",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

playwright/pages/changelog.page.ts

@@ -0,0 +1,13 @@
+import { Locator, Page } from "@playwright/test";
+
+export class ChangelogPage {
+  readonly page: Page;
+  readonly root: Locator;
+  readonly title: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.root = page.getByRole("main");
+    this.title = this.root.getByText("Changelog");
+  }
+}

playwright/pages/changes.page.ts

@@ -0,0 +1,15 @@
+import { Locator, Page } from "@playwright/test";
+
+export class ChangesPage {
+  readonly page: Page;
+  readonly root: Locator;
+  readonly title: Locator;
+  readonly pushButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.root = page.getByRole("main").first();
+    this.title = this.root.getByRole("link", { name: "Changes" });
+    this.title = this.root.getByRole("button", { name: "Push Changes" });
+  }
+}

playwright/pages/menu.page.ts

@@ -1,51 +1,33 @@
-import { expect, Locator, Page } from "@playwright/test";
+import { Locator, Page } from "@playwright/test";
 
 export class MenuPage {
   readonly page: Page;
+  readonly root: Locator;
   readonly appHeader: Locator;
+  readonly pageTypesLink: Locator;
   readonly customTypesLink: Locator;
   readonly slicesLink: Locator;
   readonly changesLink: Locator;
   readonly tutorialLink: Locator;
   readonly changelogLink: Locator;
   readonly appVersion: Locator;
-  readonly changesIcon: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.appHeader = page.locator("h5", { hasText: "Slice Machine" });
-    this.customTypesLink = page.locator("nav a", { hasText: "Custom Types" });
-    this.slicesLink = page.locator("nav a", { hasText: "Slices" });
-    this.changesLink = page.locator("nav a", { hasText: "Changes" });
-    this.tutorialLink = page.locator("a", { hasText: "Video tutorials" });
-    this.changelogLink = page.locator("a", { hasText: "Changelog" });
-    this.appVersion = page.locator('a[href="/changelog"] > div:nth-child(2)');
-    this.appVersion = page.getByTestId('changes-number');
-  }
-
-  async gotoCustomTypes() {
-    await this.customTypesLink.click();
-    await expect(
-      this.page.locator("main a", { hasText: "Custom Types" })
-    ).toBeVisible();
-  }
-
-  async gotoSlices() {
-    await this.slicesLink.click();
-    await expect(
-      this.page.locator("main a", { hasText: "Slices" }).first()
-    ).toBeVisible();
-  }
-
-  async gotoChanges() {
-    await this.changesLink.click();
-    await expect(
-      this.page.locator("main a", { hasText: "Changes" })
-    ).toBeVisible();
-  }
-
-  async gotoChangelog() {
-    await this.changelogLink.click();
-    await expect(this.page.getByText("All versions")).toBeVisible();
+    this.root = page.getByRole("navigation");
+    this.appHeader = this.root.locator("h5", { hasText: "Slice Machine" });
+    this.pageTypesLink = this.root.getByRole("link", { name: "Page Types" });
+    this.customTypesLink = this.root.getByRole("link", {
+      name: "Custom Types",
+    });
+    this.slicesLink = this.root.getByRole("link", { name: "Slices" });
+    this.changesLink = this.root.getByRole("link", { name: "Changes" });
+    this.tutorialLink = this.root.getByRole("link", {
+      name: "Video tutorials",
+    });
+    this.changelogLink = this.page.getByRole("link", { name: "Changelog" });
+    this.appVersion = this.root.locator(
+      'a[href="/changelog"] > div:nth-child(2)'
+    );
   }
 }

playwright/pages/slices/sliceList.page.ts

@@ -2,44 +2,50 @@ import { Locator, Page } from "@playwright/test";
 
 export class SliceListPage {
   readonly page: Page;
+  readonly title: Locator;
+  readonly root: Locator;
   readonly createButton: Locator;
   readonly actionIcon: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.createButton = page.getByRole("button", { name: "Create a Slice" }); //create-slice
-    this.actionIcon = page.getByTestId("slice-action-icon");
+    this.root = page.getByRole("main").first();
+    this.title = this.root.getByRole("link", { name: "Slices", exact: true });
+    this.createButton = this.root
+      .getByRole("button", { name: "Create one" })
+      .or(this.root.getByRole("button", { name: "Create a Slice" }));
+    this.actionIcon = this.root.getByTestId("slice-action-icon");
   }
 
   async goto() {
     await this.page.goto("/slices");
   }
 
-  getSliceCard(name: string): Locator {
-    return this.page.getByRole("button", {
+  getCard(name: string): Locator {
+    return this.root.getByRole("button", {
       name: `${name} slice card`,
       exact: true,
     });
   }
 
   async clickSliceCard(name: string) {
     // Make sure not to accidentaly click on a button that would trigger another action
-    await this.getSliceCard(name).getByRole("button", { name }).click();
+    await this.getCard(name).getByRole("button", { name }).click();
   }
 
   async openCreateModal() {
-    await this.createButton.click();
+    await this.createButton.first().click();
   }
 
   async openActionModal(name: string, action: "Rename" | "Delete") {
-    await this.getSliceCard(name)
+    await this.getCard(name)
       .getByTestId("slice-action-icon-dropdown")
       .getByText(action)
       .click();
   }
 
   async openScreenshotModal(name: string) {
-    await this.getSliceCard(name).getByRole("button", {
+    await this.getCard(name).getByRole("button", {
       name: "Update Screenshot",
     });
   }

playwright/pages/types/TypesList.page.ts

@@ -0,0 +1,47 @@
+import { Locator, Page } from "@playwright/test";
+
+export class TypesListPage {
+  readonly page: Page;
+  readonly root: Locator;
+  readonly path: string;
+  readonly title: Locator;
+  readonly createButton: Locator;
+  readonly actionIcon: Locator;
+
+  protected constructor(page: Page, title: string, path: string) {
+    this.page = page;
+    this.path = path;
+    this.root = page.getByRole("main");
+    this.title = this.root.getByLabel("Breadcrumb").getByText(title);
+    this.createButton = this.root
+      .getByTestId("create-ct")
+      .or(
+        this.root.getByRole("article").getByRole("button", { name: "Create" })
+      );
+    this.actionIcon = this.root.getByTestId("ct-action-icon");
+  }
+
+  async goto() {
+    await this.page.goto("/custom-types");
+    await this.title.isVisible();
+  }
+
+  getRow(name: string): Locator {
+    return this.page.getByRole("row", {
+      name,
+    });
+  }
+
+  async clickRow(name: string) {
+    await this.getRow(name).getByRole("button", { name }).click();
+  }
+
+  async openCreateModal() {
+    await this.createButton.first().click();
+  }
+
+  async openActionModal(name: string, action: "Rename" | "Delete") {
+    await this.getRow(name).locator('[data-testid="editDropdown"]').click();
+    await this.page.getByRole("menuitem", { name: action }).click();
+  }
+}

playwright/pages/types/createTypeModal.page.ts

@@ -0,0 +1,29 @@
+import { expect, Locator, Page } from "@playwright/test";
+
+export class CreateTypeModalPage {
+  readonly page: Page;
+  readonly title: Locator;
+  readonly nameInput: Locator;
+  readonly closeButton: Locator;
+  readonly cancelButton: Locator;
+  readonly submitButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    const root = page.getByTestId("create-ct-modal");
+    this.title = root.getByRole("heading", {
+      name: /Create a new (page|custom) type/,
+    });
+    this.nameInput = root.getByTestId("ct-name-input");
+    this.closeButton = root.getByRole("button", { name: "Close" });
+    this.cancelButton = root.getByRole("button", { name: "Cancel" });
+    this.submitButton = root.getByRole("button", { name: "Create" });
+  }
+
+  async createType(name: string) {
+    await expect(this.title).toBeVisible();
+    await this.nameInput.fill(name);
+    await this.submitButton.click();
+    await expect(this.title).not.toBeVisible();
+  }
+}

playwright/pages/types/customTypesDetails.page.ts

@@ -0,0 +1,9 @@
+import { Locator, Page } from "@playwright/test";
+import { TypesListPage } from "./TypesList.page";
+import { TypeDetailsPage } from "./typeDetails.page";
+
+export class CustomTypesDetailsPage extends TypeDetailsPage {
+  constructor(page: Page) {
+    super(page);
+  }
+}

playwright/pages/types/customTypesList.page.ts

@@ -0,0 +1,8 @@
+import { Locator, Page } from "@playwright/test";
+import { TypesListPage } from "./TypesList.page";
+
+export class CustomTypesListPage extends TypesListPage {
+  constructor(page: Page) {
+    super(page, "Custom Types", "/custom-types");
+  }
+}

playwright/pages/types/pageTypesList.page.ts

@@ -0,0 +1,8 @@
+import { Locator, Page } from "@playwright/test";
+import { TypesListPage } from "./TypesList.page";
+
+export class PageTypesListPage extends TypesListPage {
+  constructor(page: Page) {
+    super(page, "Page Types", "/page-types");
+  }
+}