test(RBP_TS-006): configure eslint.json & prettierignore files; fix e…

…rrors & warnings in POM & tests

.eslintrc.json

@@ -3,11 +3,21 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:playwright/recommended", "prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint"]
+  "plugins": ["@typescript-eslint", "prettier"],
+  "root": true,
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "playwright/no-wait-for-timeout": "off"
+  }
 }

.github/workflows/playwright.yml

@@ -1,27 +1,27 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
-    branches: [ main, master ]
+    branches: [main, master]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.prettierignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -5,4 +5,4 @@
   "printWidth": 200,
   "tabWidth": 2,
   "arrowParens": "always"
-}
+}

fixtures/myFixtures.ts

@@ -1,24 +1,11 @@
 import { test as base } from "@playwright/test";
 import { ReservationPage } from "../pageObjects/basePage/reservationPage";
-// import { AdminPanelPage } from "../pageObjects/adminPage/adminPanelPage";
 
-// type MyPages = {
-//   reservationPage: ReservationPage;
-//   adminPanelPage: AdminPanelPage;
-// }
+type MyPages = {
+  reservationPage: ReservationPage;
+};
 
-// export const test = base.extend<MyPages>({
-//   reservationPage: async ({page}, use) => {
-//     const reservationPage = new ReservationPage(page);
-//     await use (reservationPage);
-//   },
-//   adminPanelPage: async ({page}, use) => {
-//     const adminPanelPage = new AdminPanelPage(page);
-//     await use (adminPanelPage);
-//   }
-// })
-
-export const test = base.extend({
+export const test = base.extend<MyPages>({
   reservationPage: async ({ page }, use) => {
     const reservationPage = new ReservationPage(page);
     await use(reservationPage);

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "prettier": "prettier",
+    "prettier": "prettier --write .",
     "lint": "eslint ."
   },
   "keywords": [],
@@ -20,6 +20,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-playwright": "^0.20.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",

pageObjects/adminPage/adminPanelPage.ts

@@ -1,32 +1,30 @@
-import { Locator, Page } from "@playwright/test"
+import { Locator, Page } from "@playwright/test";
 
 export class AdminPanelPage {
   private readonly userName: Locator;
   private readonly password: Locator;
   private readonly loginButton: Locator;
 
   public constructor(private readonly page: Page) {
-   this.userName = page.locator("#username");
-   this.password = page.locator("#password");
-   this.loginButton = page.locator("button:text('Login')") 
+    this.userName = page.locator("#username");
+    this.password = page.locator("#password");
+    this.loginButton = page.locator("button:text('Login')");
   }
 
-  public async openAdminPanel (): Promise<void> {
+  public async openAdminPanel(): Promise<void> {
     await this.page.goto("/");
-    await this.page.waitForTimeout(500)
     await this.page.locator(".text-muted > a:has-text('Admin panel')").click();
   }
 
-  public async loginAsAdmin (): Promise<void> {
+  public async loginAsAdmin(): Promise<void> {
     await this.userName.fill("admin");
     await this.password.fill("password");
-    await this.page.waitForTimeout(500)
     await this.loginButton.click();
   }
 
-  public async deleteRooms (): Promise<void> {
+  public async deleteRooms(): Promise<void> {
     const room = await this.page.locator("[data-type='room']").all();
 
-    room.map((i) => i.locator(".col-sm-1 .roomDelete ::before").click())
+    room.map((i) => i.locator(".col-sm-1 .roomDelete ::before").click());
   }
-}
+}

pageObjects/hotel/bookingForm.ts

@@ -3,44 +3,44 @@ import { BookingFormFields } from "../hotel/hotel.model";
 
 export class BookingForm {
   private readonly form: Locator;
-  
- public constructor(roomContainer: Locator) {
+
+  public constructor(roomContainer: Locator) {
     this.form = roomContainer.locator(".col-sm-4");
   }
 
-public async enterFirstName(value: string): Promise<void> {
+  public async enterFirstName(value: string): Promise<void> {
     await this.form.locator(".room-firstname").fill(value);
   }
-public async enterLastName(value: string): Promise<void> {
+  public async enterLastName(value: string): Promise<void> {
     await this.form.locator(".room-lastname").fill(value);
   }
-public async enterEmail(value:string): Promise<void> {
+  public async enterEmail(value: string): Promise<void> {
     await this.form.locator(".room-email").fill(value);
   }
-public async enterPhone(value:string): Promise<void> {
+  public async enterPhone(value: string): Promise<void> {
     await this.form.locator(".room-phone").fill(value);
   }
 
-public async fillForm(formFields: BookingFormFields): Promise<void> {
+  public async fillForm(formFields: BookingFormFields): Promise<void> {
     await this.form.locator(".room-firstname").fill(formFields.firstName ?? "");
     await this.form.locator(".room-lastname").fill(formFields.lastName ?? "");
     await this.form.locator(".room-email").fill(formFields.email ?? "");
     await this.form.locator(".room-phone").fill(formFields.phone ?? "");
   }
 
-public async confirmBooking(): Promise<void> {
+  public async confirmBooking(): Promise<void> {
     await this.form.locator("button:has-text('Book')").click();
   }
 
-public async cancelBooking(): Promise<void> {
+  public async cancelBooking(): Promise<void> {
     await this.form.locator("button:has-text('Cancel')").click();
   }
 
-public async getConfirmationWindow(): Promise<Locator> {
+  public async getConfirmationWindow(): Promise<Locator> {
     return this.form.page().locator(".confirmation-modal");
   }
 
-public async getErrorMessageType(): Promise<Locator> {
+  public async getErrorMessageType(): Promise<Locator> {
     return this.form.locator(".alert-danger > p");
   }
 }

pageObjects/hotel/calendar.ts

@@ -3,11 +3,11 @@ import { Locator } from "@playwright/test";
 export class Calendar {
   private readonly calendar: Locator;
 
-public constructor(roomContainer: Locator) {
+  public constructor(roomContainer: Locator) {
     this.calendar = roomContainer.locator(".rbc-calendar");
   }
 
-public async selectDateRange(start: number, end: number): Promise<void> {
+  public async selectDateRange(start: number, end: number): Promise<void> {
     const sourceDate = this.calendar.locator(`button:text("${start}")`).nth(0);
     const targetDate = this.calendar.locator(`button:text("${end}")`).nth(0);
     const sourceBoundingBox = await sourceDate.boundingBox();
@@ -23,11 +23,11 @@ public async selectDateRange(start: number, end: number): Promise<void> {
     await this.calendar.page().waitForTimeout(50);
   }
 
-public async getReservedRange(): Promise<Locator>{
+  public async getReservedRange(): Promise<Locator> {
     return this.calendar.locator(".rbc-event-content:has-text('night(s)')").first();
   }
 
-public async pressNext(): Promise<void> {
+  public async pressNext(): Promise<void> {
     await this.calendar.locator("button:has-text('Next')").click();
   }
 }

pageObjects/hotel/hotel.model.ts

@@ -3,4 +3,4 @@ export interface BookingFormFields {
   readonly lastName?: string;
   readonly email?: string;
   readonly phone?: string;
-}
+}

pageObjects/hotel/room.ts

@@ -5,23 +5,22 @@ import { Locator } from "@playwright/test";
 export class Room {
   private readonly roomContainer: Locator;
   private readonly details: Locator;
+  public readonly calendar: Calendar;
+  public readonly form: BookingForm;
 
-  // TODO: Ask about public & private access modifiers, and way its become a problem, and why its fixed if modifier transforms into public when AdminPanelPage was added in myFixtures file? (extend base using type MyPages)!!!
-
-  private readonly calendar: Calendar;
-  private readonly form: BookingForm;
-
-public constructor(roomContainer: Locator) {
+  public constructor(roomContainer: Locator) {
     this.roomContainer = roomContainer;
     this.details = this.roomContainer.locator(".hotel-room-info").first();
-    const bookingContainer = this.roomContainer
-      .locator(".hotel-room-info")
-      .last();
+    const bookingContainer = this.roomContainer.locator(".hotel-room-info").last();
     this.calendar = new Calendar(bookingContainer);
     this.form = new BookingForm(bookingContainer);
   }
 
-public async book(): Promise<void> {
+  public async book(): Promise<void> {
     await this.roomContainer.locator("button:text('Book this room')").click();
   }
+
+  public async getRoomDetails(): Promise<Locator> {
+    return this.roomContainer.locator(".hotel-room-info").last();
+  }
 }

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * Read environment variables from file.
@@ -10,7 +10,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -20,32 +20,32 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'https://automationintesting.online/',
+    baseURL: "https://automationintesting.online/",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-    video: "on"
+    trace: "on-first-retry",
+    video: "on",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */