POM z agregacją i refaktoryzacja testów

Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright

POM z agregacją i refaktoryzacja testów

Dodatkowe materiały

Bazujemy na kodzie lekcji L08_pom_aggregate

Kod wynikowy tej lekcji znajduje się tu: L09_pom_aggregate_refactor

Pamiętaj, aby po danej porcji pracy: uruchamiać test, commitować poprawnie działający kod 😉

Zawartość pliku payment.spec.ts:

import { test, expect } from '@playwright/test';
import { loginData } from '../test-data/login.data';
import { LoginPage } from '../pages/login.page';
import { PaymentPage } from '../pages/payment.page';
import { PulpitPage } from '../pages/pulpit.page';


test.describe('Payment tests', () => {
  let paymentPage: PaymentPage;
 
  test.beforeEach(async ({ page }) => {
    const userId = loginData.userId;
    const userPassword = loginData.userPassword;


    await page.goto('/');
    const loginPage = new LoginPage(page);
    await loginPage.login(userId, userPassword);


    const pulpitPage = new PulpitPage(page);
    await pulpitPage.sideMenuComponent.paymentLink.click();
   
    paymentPage = new PaymentPage(page);
  });


  test('simple payment', async ({ page }) => {
    // Arrange
    const transferReceiver = 'Jan Nowak';
    const transferAccount = '12 3456 7890 1234 5678 9012 34568';
    const transferAmount = '222';
    const expectedMessage = `Przelew wykonany! ${transferAmount},00PLN dla Jan Nowak`;


    // Act
    await paymentPage.makeTransfer(transferReceiver, transferAccount, transferAmount);


    // Assert
    await expect(paymentPage.messageText).toHaveText(expectedMessage);
  });
});

Zawartość pliku payment.page.ts:

import { Page } from '@playwright/test';
import { SideMenuComponent } from '../component/side-menu.component';


export class PaymentPage {
  constructor(private page: Page) {}


  sideMenuComponent = new SideMenuComponent(this.page);


  transferReceiverInput = this.page.getByTestId('transfer_receiver');
  transferToInput = this.page.getByTestId('form_account_to');
  transferAmountInput = this.page.getByTestId('form_amount');


  transferButton = this.page.getByRole('button', { name: 'wykonaj przelew' });
  actionCloseButton = this.page.getByTestId('close-button');


  messageText = this.page.locator('#show_messages');


  async makeTransfer(transferReceiver: string, transferAccount: string, transferAmount: string): Promise<void> {
    await this.transferReceiverInput.fill(transferReceiver);
    await this.transferToInput.fill(transferAccount);
    await this.transferAmountInput.fill(transferAmount);


    await this.transferButton.click();
    await this.actionCloseButton.click();
  }
}