chore(e2e): e2e setup for the new content editor

e2e/dotcms-e2e-node/frontend/locators/globalLocators.ts

@@ -2,49 +2,48 @@
  * Locators for the iframes in the main page.
  */
 export const iFramesLocators = {
-    main_iframe: 'iframe[name="detailFrame"]',
-    dot_iframe: 'dot-iframe-dialog iframe[name="detailFrame"]',
-    wysiwygFrame: 'iframe[title="Rich Text Area\\. Press ALT-F9 for menu\\. Press ALT-F10 for toolbar\\. Press ALT-0 for help"]',
-    dataTestId:  '[data-testid="iframe"]',
-    dot_edit_iframe: 'dot-edit-contentlet iframe[name="detailFrame"]',
-}
+  main_iframe: 'iframe[name="detailFrame"]',
+  dot_iframe: 'dot-iframe-dialog iframe[name="detailFrame"]',
+  wysiwygFrame:
+    'iframe[title="Rich Text Area\\. Press ALT-F9 for menu\\. Press ALT-F10 for toolbar\\. Press ALT-0 for help"]',
+  dataTestId: '[data-testid="iframe"]',
+  dot_edit_iframe: 'dot-edit-contentlet iframe[name="detailFrame"]',
+};
 
 /**
  * Locators for the login functionality.
  */
 export const loginLocators = {
-    userNameInput: 'input[id="inputtext"]',
-    passwordInput: 'input[id="password"]',
-    loginBtn: 'submitButton'
-}
+  userNameInput: 'input[id="inputtext"]',
+  passwordInput: 'input[id="password"]',
+  loginBtn: "submitButton",
+};
 
 /**
  * Locators for the Add Content functionality.
  */
 export const addContent = {
-    addBtn: '#dijit_form_DropDownButton_0',
-    addNewContentSubMenu: 'Add New Content',
-    addNewMenuLabel: '▼'
-}
+  addBtn: "#dijit_form_DropDownButton_0",
+  addNewContentSubMenu: "Add New Content",
+  addNewMenuLabel: "▼",
+};
 
 /**
  * Locators for the Rich Text functionality.
  */
 export const contentGeneric = {
-    locator: "articleContent (Generic)",
-    label: "Content (Generic)"
-}
+  locator: "articleContent (Generic)",
+  label: "Content (Generic)",
+};
 
 export const fileAsset = {
-    locator: "attach_fileFile Asset",
-    label: "File Asset"
-}
+  locator: "attach_fileFile Asset",
+  label: "File Asset",
+};
 
 export const pageAsset = {
-    locator: "descriptionPage",
-    label: "Page"
-}
-
-export {
-} from './navigation/menuLocators';
+  locator: "descriptionPage",
+  label: "Page",
+};
 
+export {} from "./navigation/menuLocators";

e2e/dotcms-e2e-node/frontend/locators/navigation/menuLocators.ts

@@ -1,44 +1,48 @@
-import {Page, Locator} from '@playwright/test';
+import { Page, Locator } from "@playwright/test";
 
 export class GroupEntriesLocators {
-    readonly SITE: Locator;
-    readonly CONTENT: Locator;
-    readonly SCHEMA: Locator;
-
-    constructor(page: Page) {
-        this.SITE = page.getByText('Site', {exact: true});
-        this.CONTENT = page.getByRole('complementary').getByText('Content', {exact: true});
-        this.SCHEMA = page.getByText('Schema');
-
-    }
+  readonly SITE: Locator;
+  readonly CONTENT: Locator;
+  readonly CONTENT_MODEL: Locator;
+  readonly SCHEMA: Locator;
+
+  constructor(page: Page) {
+    this.SITE = page.getByText("Site", { exact: true });
+    this.CONTENT = page
+      .getByRole("complementary")
+      .getByText("Content", { exact: true });
+
+    this.CONTENT_MODEL = page.getByText("Content Model");
+    this.SCHEMA = page.getByText("Schema");
+  }
 }
 
 /**
  * Locators for the tools in the menu
  */
 export class ToolEntriesLocators {
-    readonly SEARCH_ALL: Locator;
-    readonly CONTENT_TYPES: Locator;
-    readonly CATEGORIES: Locator;
-
-
-    constructor(page: Page) {
-        this.SEARCH_ALL = page.getByRole('link', {name: 'Search All'});
-        this.CONTENT_TYPES = page.getByRole('link', {name: 'Content Types'});
-        this.CATEGORIES = page.getByRole('link', { name: 'Categories' });
-    }
+  readonly SEARCH_ALL: Locator;
+  readonly CONTENT_TYPES: Locator;
+  readonly CATEGORIES: Locator;
+
+  constructor(page: Page) {
+    this.SEARCH_ALL = page.getByRole("link", { name: "Search All" });
+    this.CONTENT_TYPES = page.getByRole("link", { name: "Content Types" });
+    this.CATEGORIES = page.getByRole("link", { name: "Categories" });
+  }
 }
 
 /**
  * Locators for the menu entries
  */
 export class MenuEntriesLocators {
-    readonly EXPAND: Locator;
-    readonly COLLAPSE: Locator;
-
-    constructor(page: Page) {
-        this.EXPAND =   page.getByRole('button', { name: '' });
-        this.COLLAPSE =  page.locator('button[ng-reflect-ng-class="[object Object]"]').first();
-
-    }
-}
+  readonly EXPAND: Locator;
+  readonly COLLAPSE: Locator;
+
+  constructor(page: Page) {
+    this.EXPAND = page.getByRole("button", { name: "" });
+    this.COLLAPSE = page
+      .locator('button[ng-reflect-ng-class="[object Object]"]')
+      .first();
+  }
+}

e2e/dotcms-e2e-node/frontend/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@faker-js/faker": "9.3.0",
     "@playwright/test": "^1.48.2",
     "@types/node": "^22.5.4",
     "@typescript-eslint/eslint-plugin": "^8.19.0",
@@ -22,10 +23,11 @@
   },
   "scripts": {
     "show-report": "if [[ \"$CURRENT_ENV\" != \"ci\" ]]; then yarn playwright show-report; fi",
-    "start": "PLAYWRIGHT_JUNIT_SUITE_ID=nodee2etestsuite PLAYWRIGHT_JUNIT_SUITE_NAME='E2E Node Test Suite' PLAYWRIGHT_JUNIT_OUTPUT_FILE='../target/failsafe-reports/TEST-e2e-node-results.xml' yarn playwright test ${PLAYWRIGHT_SPECIFIC} ${PLAYWRIGHT_DEBUG}; yarn run show-report",
+    "start": "PLAYWRIGHT_JUNIT_SUITE_ID=nodee2etestsuite PLAYWRIGHT_JUNIT_SUITE_NAME='E2E Node Test Suite' PLAYWRIGHT_JUNIT_OUTPUT_FILE='../target/failsafe-reports/TEST-e2e-node-results.xml' yarn playwright test ${PLAYWRIGHT_SPECIFIC} ${PLAYWRIGHT_DEBUG} --ui; yarn run show-report",
     "start-local": "CURRENT_ENV=local yarn run start",
     "start-dev": "CURRENT_ENV=dev yarn run start",
     "start-ci": "CURRENT_ENV=ci yarn run start",
+    "codegen": "yarn playwright codegen",
     "post-testing": "PLAYWRIGHT_JUNIT_OUTPUT_FILE='../target/failsafe-reports/TEST-e2e-node-results.xml' node index.js",
     "format": "prettier --write .",
     "lint": "eslint .",

e2e/dotcms-e2e-node/frontend/pages/contentTypeForm.page.ts

@@ -0,0 +1,19 @@
+import { Page } from "@playwright/test";
+
+export class ContentTypeFormPage {
+  constructor(private page: Page) {}
+
+  async fillNewContentType() {
+    await this.addTitleField();
+  }
+
+  async addTitleField() {
+    const dropZone = this.page.locator('div[dragula="fields-bag"]');
+    await this.page
+      .locator("li")
+      .getByText("Text", { exact: true })
+      .dragTo(dropZone);
+    await this.page.locator("input#name").fill("Text Field");
+    await this.page.getByTestId("dotDialogAcceptAction").click();
+  }
+}

e2e/dotcms-e2e-node/frontend/pages/listingContentTypes.pages.ts

@@ -0,0 +1,88 @@
+import { Page, expect } from "@playwright/test";
+import { MenuEntriesLocators } from "../locators/navigation/menuLocators";
+import {
+  GroupEntriesLocators,
+  ToolEntriesLocators,
+} from "../locators/navigation/menuLocators";
+import { dotCMSUtils } from "../utils/dotCMSUtils";
+
+export class ListingContentTypesPage {
+  private cmsUtils: dotCMSUtils;
+  private menuLocators: MenuEntriesLocators;
+  private groupsLocators: GroupEntriesLocators;
+  private toolsLocators: ToolEntriesLocators;
+
+  constructor(private page: Page) {
+    this.cmsUtils = new dotCMSUtils();
+    this.menuLocators = new MenuEntriesLocators(this.page);
+    this.groupsLocators = new GroupEntriesLocators(this.page);
+    this.toolsLocators = new ToolEntriesLocators(this.page);
+  }
+
+  async goToUrl() {
+    await this.page.goto("/dotAdmin/#/content-types-angular");
+  }
+
+  async goTo() {
+    // Get the username and password from the environment variables
+    const username = process.env.USERNAME as string;
+    const password = process.env.PASSWORD as string;
+
+    // Login to dotCMS
+    await this.cmsUtils.login(this.page, username, password);
+    await this.cmsUtils.navigate(
+      this.menuLocators.EXPAND,
+      this.groupsLocators.CONTENT_MODEL,
+      this.toolsLocators.CONTENT_TYPES,
+    );
+
+    // Validate the portlet title
+    const breadcrumbLocator = this.page.locator("p-breadcrumb");
+    await expect(breadcrumbLocator).toContainText("Content Types");
+  }
+
+  async addNewContentType(name: string) {
+    await this.page.getByRole("button", { name: "" }).click();
+    await this.page.getByLabel("Content").locator("a").click();
+    await this.page
+      .locator('[data-test-id="content-type__new-content-banner"] div')
+      .nth(2)
+      .click();
+
+    await this.page.getByLabel("Content Name").fill(name);
+    await this.page.getByTestId("dotDialogAcceptAction").click();
+  }
+
+  async goToAddNewContentType(contentType: string) {
+    const capitalized =
+      contentType.charAt(0).toUpperCase() + contentType.slice(1);
+
+    await this.page
+      .getByTestId(`row-${capitalized}`)
+      .getByRole("link", { name: "View (0)" })
+      .click();
+    await this.page
+      .locator('iframe[name="detailFrame"]')
+      .contentFrame()
+      .locator("#dijit_form_DropDownButton_0")
+      .click();
+    await this.page
+      .locator('iframe[name="detailFrame"]')
+      .contentFrame()
+      .getByLabel("▼")
+      .getByText("Add New Content")
+      .click();
+  }
+
+  async deleteContentType(contentType: string) {
+    const capitalized =
+      contentType.charAt(0).toUpperCase() + contentType.slice(1);
+
+    await this.page
+      .getByTestId(`row-${capitalized}`)
+      .getByTestId("dot-menu-button")
+      .click();
+    await this.page.getByLabel("Delete").locator("a").click();
+    await this.page.getByRole("button", { name: "Delete" }).click();
+  }
+}

e2e/dotcms-e2e-node/frontend/pages/listngContent.page.ts

@@ -0,0 +1,24 @@
+import { Page } from "@playwright/test";
+
+export class ListingContentPage {
+  constructor(private page: Page) {}
+  #addBtn = this.page.locator("span[widgetid='dijit_form_DropDownButton_0']");
+  #addNewContent = this.page.locator(
+    ".dijitPopup tr[aria-label='Add New Content']",
+  );
+
+  async goTo(filter?: string) {
+    const urlPath = new URL("/c/content", this.page.url());
+
+    if (filter) {
+      urlPath.searchParams.set("filter", filter);
+    }
+
+    await this.page.goto(urlPath.toString());
+  }
+
+  async clickAddNewContent() {
+    await this.#addBtn.click();
+    await this.#addNewContent.click();
+  }
+}

e2e/dotcms-e2e-node/frontend/pages/newEditContentForm.page.ts

@@ -0,0 +1,14 @@
+import { Page } from "@playwright/test";
+
+export class NewEditContentFormPage {
+  constructor(private page: Page) {}
+
+  async fillTextField(text: string) {
+    await this.page.getByTestId("textField").fill(text);
+  }
+
+  async save() {
+    await this.page.getByRole("button", { name: "Save" }).click();
+    await this.page.waitForResponse("**/api/v1/workflow/actions/**");
+  }
+}

e2e/dotcms-e2e-node/frontend/pages/textField.page.ts

@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+
+export class TextFieldPage {
+  constructor(private page: Page) {}
+
+  async fill(variableName: string, value: string) {
+    const input = this.page.locator(`input#${variableName}`);
+    await input.fill(value);
+  }
+}