refactor(e2e): Use POM Pattern (#31512)

### Parent Issue

#31493 

### Proposed Changes

This pull request includes several changes to the
`e2e/dotcms-e2e-node/frontend` directory, focusing on renaming files,
updating imports, and refactoring classes to improve code readability
and maintainability. The most important changes include the renaming of
utility files to page objects, updating the ESLint configuration, and
removing redundant parameters from methods.

### File Renaming and Class Refactoring:
* Renamed `accessibilityUtils.ts` to `accessibility.page.ts` and
refactored `accessibilityUtils` class to `AccessibilityPage` with
updated constructor and method signatures.
* Renamed `contentUtils.ts` to `content.page.ts` and refactored
`ContentUtils` class to `ContentPage` with removed redundant `page`
parameter from methods.
[[1]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L8-R27)
[[2]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L58)
[[3]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L67-R89)
[[4]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L129-R136)
[[5]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L152-R165)
[[6]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L185-R177)
[[7]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L233-R227)
[[8]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L264-R252)
[[9]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L291-R287)
[[10]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L309-L323)
[[11]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L333-R327)
[[12]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L356-R339)
[[13]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L382-R364)
[[14]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L413)
[[15]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L424-R409)
[[16]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L458-R442)
[[17]](diffhunk://#diff-14c98255d020377d45cd4c99080be3f77cedadb51f795a6cfbb2ed2c0eabab35L479)

### ESLint Configuration:
* Added a new script `ts:check` to the `package.json` for TypeScript
checking.

### Code Formatting and Cleanup:
* Fixed trailing comma issue in `defaultContentType.ts`.
* Updated the `ContentTypeFormPage` class for better readability by
reformatting locator definitions.

### Export Updates:
* Added exports for several page objects in `index.ts` to streamline
imports across the project.

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

e2e/dotcms-e2e-node/README.md

@@ -58,6 +58,40 @@ Two advantages of running E2E tests this way is that:
 Disadvantages:
 - Could take longer if you are adding E2E tests to a feature you are working so probably for that matter the "FrontEnd guy" approach works better for you.
 
+### Using POM pattern 
+
+To create reusable tests, we can use the POM pattern. This pattern allows us to create tests that can be reused across different projects.
+
+There are a short import in typescript that allows us to use the POM pattern:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@pages": ["./src/pages/index"],
+      "@locators/*": ["./src/locators/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@data/*": ["./src/data/*"],
+      "@models/*": ["./src/models/*"]
+    }
+  }
+}
+```
+
+And then you can use the pages, locators, utils, data and models in your tests. Pages are the main entry point for each feature and they are the ones that will be used to create the tests.
+
+```typescript
+import { LoginPage } from '@pages';
+
+test('should login', async () => {
+  await loginPage.login();
+});
+```
+
+
+
+
 ## FrontEnd guys way
 E2E tests are implemented using Playwright so you will need the following as pre-requisites:
 - Node & NPM

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

@@ -36,6 +36,7 @@
     "post-testing": "PLAYWRIGHT_JUNIT_OUTPUT_FILE='../target/failsafe-reports/TEST-e2e-node-results.xml' node index.js",
     "format": "prettier --write .",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "ts:check": "tsc -p tsconfig.json --noEmit"
   }
 }

e2e/dotcms-e2e-node/frontend/src/data/defaultContentType.ts

@@ -9,7 +9,7 @@ export function createDefaultContentType() {
     {
       title: "Site or Folder Field",
       fieldType: "siteOrFolder",
-    }
+    },
   ];
   return defaultTypes;
 }

e2e/dotcms-e2e-node/frontend/src/models/newContentType.model.ts

@@ -1,4 +1,4 @@
-/** 
+/**
  * Enumeration of available field types in the content type system.
  * @enum {string}
  */
@@ -8,7 +8,7 @@ export enum TYPES {
   Relationship = "relationship",
 }
 
-/** 
+/**
  * Union type of all possible field types.
  * @typedef {TYPES} Fields
  */
@@ -21,23 +21,23 @@ export interface GenericField {
   hintText?: string;
 }
 
-/** 
+/**
  * Interface representing a text field configuration.
  * @interface
  */
 export interface TextField extends GenericField {
   fieldType: `${TYPES.Text}`;
 }
 
-/** 
+/**
  * Interface representing a site or host field configuration.
  * @interface
  */
 export interface SiteorHostField extends GenericField {
   fieldType: `${TYPES.SiteOrFolder}`;
 }
 
-/** 
+/**
  * Interface representing a relationship field configuration.
  * @interface
  */
@@ -47,7 +47,7 @@ export interface RelationshipField extends GenericField {
   cardinality: "1-1" | "1-many" | "many-1" | "many-many";
 }
 
-/** 
+/**
  * Union type of all possible field type configurations.
  * @typedef {TextField | SiteorHostField | RelationshipField} FieldsTypes
  */

e2e/dotcms-e2e-node/frontend/src/utils/accessibilityUtils.ts → e2e/dotcms-e2e-node/frontend/src/pages/accessibility.page.ts

@@ -3,15 +3,13 @@ import { Page } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
 import { createHtmlReport } from "axe-html-reporter";
 
-export class accessibilityUtils {
-  page: Page;
+export class AccessibilityPage {
+  constructor(private page: Page) {}
 
-  constructor(page: Page) {
-    this.page = page;
-  }
-
-  async generateReport(page: Page, description: string) {
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+  async generateReport(description: string) {
+    const accessibilityScanResults = await new AxeBuilder({
+      page: this.page,
+    }).analyze();
     const reportHTML = createHtmlReport({
       results: accessibilityScanResults,
       options: {