Fluent Navigation

// Without fluent navigation -- manual page object creation
test('login and transfer', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const dashboardPage = new DashboardPage(page);
  const transferPage = new TransferPage(page);

  await loginPage.goto();
  await loginPage.login('john@test.com', 'password123');
  // You just KNOW that after login you land on dashboard
  // But there is no code connection between login() and DashboardPage

  await dashboardPage.clickTransfer();
  // Again, you KNOW this goes to transfer page
  // But the code does not express this

  await transferPage.transferMoney('9876543210', '500');
});

import { type Locator, type Page } from '@playwright/test';
import { BasePage } from './base.page';
import { DashboardPage } from './dashboard.page';

export class LoginPage extends BasePage {
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    super(page);
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.loginButton = page.getByRole('button', { name: 'Log in' });
    this.errorMessage = page.getByTestId('error-message');
  }

  async goto() {
    await super.goto('/banking/login');
  }

  // Returns DashboardPage -- because that is where you land
  async loginAs(email: string, password: string): Promise<DashboardPage> {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
    return new DashboardPage(this.page);
  }

  // Login that stays on login page (invalid credentials)
  async loginExpectingError(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

import { type Locator, type Page, expect } from '@playwright/test';
import { BasePage } from './base.page';
import { TransferPage } from './transfer.page';

export class DashboardPage extends BasePage {
  readonly transferButton: Locator;
  readonly balanceDisplay: Locator;

  constructor(page: Page) {
    super(page);
    this.transferButton = page.getByRole('button', { name: 'Transfer' });
    this.balanceDisplay = page.getByTestId('balance');
  }

  // Returns TransferPage -- because clicking Transfer navigates there
  async goToTransfer(): Promise<TransferPage> {
    await this.transferButton.click();
    return new TransferPage(this.page);
  }

  async expectLoaded() {
    await expect(this.balanceDisplay).toBeVisible();
  }
}

import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/login.page';

test('complete transfer with fluent navigation', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();

  // login() returns DashboardPage
  const dashboard = await loginPage.loginAs('john@test.com', 'password123');
  await dashboard.expectLoaded();

  // goToTransfer() returns TransferPage
  const transfer = await dashboard.goToTransfer();
  await transfer.transferMoney('9876543210', '500');
  await transfer.expectSuccess();
});

test('invalid login stays on login page', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();

  // This method does NOT return DashboardPage -- you stay on login
  await loginPage.loginExpectingError('wrong@test.com', 'wrongpass');
  const error = await loginPage.getErrorText();
  expect(error).toBe('Invalid email or password');
});