Refactored tests to follow page object pattern

pages/login.page.ts

@@ -0,0 +1,21 @@
+import { Locator, Page, expect } from '@playwright/test';
+import { loginData } from '../test-data/login.data';
+
+export class LoginPage {
+    loginInput: Locator
+    passwordInput: Locator
+    loginButton: Locator
+
+    constructor(private page: Page) {
+        this.loginInput = this.page.getByTestId('login-input')
+        this.passwordInput = this.page.getByTestId('password-input')
+        this.loginButton = this.page.getByTestId('login-button')
+    }
+
+    async loginSuccesfully() {
+        await this.page.goto('/')
+        await this.loginInput.fill(loginData.userId);
+        await this.passwordInput.fill(loginData.userPassword)
+        await this.loginButton.click();
+    }
+}

pages/payment.page.ts

@@ -0,0 +1,43 @@
+import { Locator, Page } from "@playwright/test";
+import { paymentData } from "../test-data/payment.data";
+
+export class PaymentPage {
+    userAccount: Locator
+    paymentReceiver: Locator
+    receiverAccount: Locator
+    amountOfPayment: Locator
+    titleOfPayment: Locator
+    userEmail: Locator
+    checkboxEmail: Locator
+    checkboxListOfReceiver: Locator
+
+    constructor(private page: Page) {
+        this.userAccount = this.page.locator('#form_account_from')
+        this.paymentReceiver = this.page.getByTestId('transfer_receiver')
+        this.receiverAccount = this.page.getByTestId('form_account_to')
+        this.amountOfPayment = this.page.getByTestId('form_amount')
+        this.titleOfPayment = this.page.getByTestId('form_title')
+        this.userEmail = this.page.locator('#form_email')
+        this.checkboxEmail = this.page.locator('#uniform-form_is_email span')
+        this.checkboxListOfReceiver = this.page.locator('#uniform-form_add_receiver span')
+    }
+
+    async fillPaymentForm(
+        userAccount: string,
+        paymentReceiver: string,
+        receiverAccount: string,
+        amountOfPayment: string,
+        titleOfPayment: string,
+        userEmail: string
+    ) {
+        await this.userAccount.selectOption(userAccount);
+        await this.paymentReceiver.fill(paymentReceiver);
+        await this.receiverAccount.fill(receiverAccount);
+        await this.amountOfPayment.fill(amountOfPayment);
+        await this.titleOfPayment.fill(titleOfPayment);
+        await this.checkboxEmail.click();
+        await this.userEmail.fill(userEmail);
+        await this.checkboxListOfReceiver.click();
+
+    }
+}

test-data/payment.data.ts

@@ -0,0 +1,8 @@
+export const paymentData = {
+    userAccount: '[KO] konto na życie [13 159,20 PLN] 4141...0000',
+    paymentReceiver: 'Anna Kowalska',
+    reciverAccount: '34 5676 6767 6769 8798 7897 9878',
+    amountOfPayment: '350',
+    titleOfPayment: 'na prezent',
+    userEmail: 'jan.demobankowy@gmail.com',
+}

tests/login.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { loginData } from '../test-data/login.data';
+import { LoginPage } from '../pages/login.page';
 
 test.describe('User login', () => {
   test.beforeEach(async ({ page }) => {
@@ -8,16 +9,12 @@ test.describe('User login', () => {
 
   test('successful login with correct credentials', async ({ page }) => {
     // Arrange
-    const userId = loginData.userId;
-    const userPassword = loginData.userPassword;
     const expectedUserName = loginData.expectedUserName;
 
     // Act
-    await page.getByTestId('login-input').fill(userId);
-    await page.getByTestId('password-input').fill(userPassword);
-    await page.getByTestId('login-button').click();
+    await new LoginPage(page).loginSuccesfully();
 
-    //Assert
+    // Assert
     await expect(page.getByTestId('user-name')).toHaveText(expectedUserName);
   });
 
@@ -27,10 +24,11 @@ test.describe('User login', () => {
     const expectedTextForShortUsername = 'identyfikator ma min. 8 znaków';
 
     // Act
-    await page.getByTestId('login-input').fill(userId);
-    await page.getByTestId('password-input').click();
+    const loginPage = new LoginPage(page)
+    await loginPage.loginInput.fill(userId);
+    await loginPage.passwordInput.click();
 
-    //Assert
+    // Assert
     await expect(page.getByTestId('error-login-id')).toHaveText(expectedTextForShortUsername);
   });
 
@@ -41,9 +39,10 @@ test.describe('User login', () => {
     const expectedTextForTooShortPassword = 'hasło ma min. 8 znaków';
 
     // Act
-    await page.getByTestId('login-input').fill(userId);
-    await page.getByTestId('password-input').fill(userPassword);
-    await page.getByTestId('password-input').blur();
+    const loginPage = new LoginPage(page)
+    await loginPage.loginInput.fill(userId);
+    await loginPage.passwordInput.fill(userPassword);
+    await loginPage.passwordInput.blur();
 
     // Assert
     await expect(page.getByTestId('error-login-password')).toHaveText(expectedTextForTooShortPassword);

tests/logout.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test';
-import { logIn } from '../test-utils/utils';
+import { LoginPage } from '../pages/login.page';
 
 test.describe('User logout', () => {
   test('successful logout', async ({ page }) => {
     // Act
-    await logIn(page);
+    await new LoginPage(page).loginSuccesfully();
     await page.getByTestId('logout-button').click();
 
     // Assert

tests/payment.spec.ts

@@ -1,51 +1,32 @@
 import { test, expect, Page } from '@playwright/test';
-import { logIn } from '../test-utils/utils';
+import { LoginPage } from '../pages/login.page';
+import { paymentData } from '../test-data/payment.data';
+import { PaymentPage } from '../pages/payment.page';
 
-test.describe('User payments (from menu)', () => {
+test.describe('User payments from menu', () => {
     test.beforeEach(async ({ page }) => {
-        await logIn(page);
+        await new LoginPage(page).loginSuccesfully();
         await page.getByRole('link', { name: 'płatności' }).click();
-    })
-
-    async function fillPaymentForm(
-        page: Page,
-        userAccount: string,
-        paymentReceiver: string,
-        receiverAccount: string,
-        amountOfPayment: string,
-        titleOfPayment: string,
-        userEmail: string
-    ) {
-        await page.locator('#form_account_from').selectOption(userAccount);
-        await page.getByTestId('transfer_receiver').fill(paymentReceiver);
-        await page.getByTestId('form_account_to').fill(receiverAccount);
-        await page.getByTestId('form_amount').fill(amountOfPayment);
-        await page.getByTestId('form_title').fill(titleOfPayment);
-        await page.getByLabel('ekspresowy').click();
-        await page.locator('#uniform-form_is_email span').click();
-        await page.locator('#form_email').fill(userEmail);
-        await page.locator('#uniform-form_add_receiver span').click();
-    }
+    });
 
     test('successful payment with required form data', async ({ page }) => {
         // Arrange
-        const userAccount = '[KO] konto na życie [13 159,20 PLN] 4141...0000';
-        const paymentReceiver = 'Anna Kowalska';
-        const reciverAccount = '34 5676 6767 6769 8798 7897 9878';
-        const amountOfPayment = '350';
-        const titleOfPayment = 'na prezent';
-        const userEmail = 'jan.demobankowy@gmail.com';
+        const userAccount = paymentData.userAccount;
+        const paymentReceiver = paymentData.paymentReceiver;
+        const receiverAccount = paymentData.reciverAccount;
+        const amountOfPayment = paymentData.amountOfPayment;
+        const titleOfPayment = paymentData.titleOfPayment;
+        const userEmail = paymentData.userEmail;
 
         // Act
-        await fillPaymentForm(
-            page,
+        await new PaymentPage(page).fillPaymentForm(
             userAccount,
             paymentReceiver,
-            reciverAccount,
+            receiverAccount,
             amountOfPayment,
             titleOfPayment,
             userEmail
-        );
+        )
         await page.getByRole('button', { name: 'wykonaj przelew' }).click();
 
         // Assert
@@ -58,16 +39,15 @@ test.describe('User payments (from menu)', () => {
 
     test('unsuccessful payment with missing receiver', async ({ page }) => {
         // Arrange
-        const userAccount = '[KO] konto na życie [13 159,20 PLN] 4141...0000';
+        const userAccount = paymentData.userAccount;
         const paymentReceiver = '';
-        const receiverAccount = '34 5676 6767 6769 8798 7897 9878';
-        const amountOfPayment = '350';
-        const titleOfPayment = 'na prezent';
-        const userEmail = 'jan.demobankowy@gmail.com';
+        const receiverAccount = paymentData.reciverAccount;
+        const amountOfPayment = paymentData.amountOfPayment;
+        const titleOfPayment = paymentData.titleOfPayment;
+        const userEmail = paymentData.userEmail;
 
         // Act
-        await fillPaymentForm(
-            page,
+        await new PaymentPage(page).fillPaymentForm(
             userAccount,
             paymentReceiver,
             receiverAccount,
@@ -83,16 +63,15 @@ test.describe('User payments (from menu)', () => {
 
     test('unsuccessful payment with missing receiver account', async ({ page }) => {
         // Arrange
-        const userAccount = '[KO] konto na życie [13 159,20 PLN] 4141...0000';
-        const paymentReceiver = 'Anna Kowalska';
+        const userAccount = paymentData.userAccount;
+        const paymentReceiver = paymentData.paymentReceiver;
         const receiverAccount = '';
-        const amountOfPayment = '350';
-        const titleOfPayment = 'na prezent';
-        const userEmail = 'jan.demobankowy@gmail.com';
+        const amountOfPayment = paymentData.amountOfPayment;
+        const titleOfPayment = paymentData.titleOfPayment;
+        const userEmail = paymentData.userEmail;
 
         // Act
-        await fillPaymentForm(
-            page,
+        await new PaymentPage(page).fillPaymentForm(
             userAccount,
             paymentReceiver,
             receiverAccount,
@@ -105,4 +84,4 @@ test.describe('User payments (from menu)', () => {
         await expect(page.getByTestId('error-widget-2-transfer-account'))
             .toContainText('pole wymagane');
     });
-});
+});

tests/session.spec.ts

@@ -1,9 +1,9 @@
 import { test, expect, Page } from '@playwright/test';
-import { logIn } from '../test-utils/utils';
+import { LoginPage } from '../pages/login.page';
 
 test.describe('session time', () => {
   test.beforeEach(async ({ page }) => {
-    await logIn(page)
+    await new LoginPage(page).loginSuccesfully()
   });
 
   async function getSessionLeftMinutes(page: Page) {
@@ -29,5 +29,5 @@ test.describe('session time', () => {
     await page.waitForTimeout(1500)
     const timeAfter = await getSessionLeft(page)
     await expect(timeAfter).toBe('09:59')
-  })
-})
+  });
+});

tests/transfer.spec.ts

@@ -1,9 +1,9 @@
 import { test, expect, Page } from '@playwright/test';
-import { logIn } from '../test-utils/utils';
+import { LoginPage } from '../pages/login.page';
 
 test.describe('User quick money transfer', () => {
   test.beforeEach(async ({ page }) => {
-    await logIn(page)
+    await new LoginPage(page).loginSuccesfully()
   });
 
   async function readBalance(page: Page) {