Playwright Multiple Tabs using Page Objects

Handling Multiple Tabs in Playwright using Page Object is not straightforward. Let's see one of the custom solution.

Table of Contents

1. Demo Website
2. Example

Demo Website

For Demo let's click on copywright link at footer section of auto pract which will redirect us to programsbuzz website. 

After reaching to programsbuzz website let's fill in value for search textbox.

Example

ProgramsBuzz Page Objects File

import { expect, type Locator, type Page } from '@playwright/test';

export class ProgramsBuzzPage {
  readonly page: Page;
  readonly searchTxt: Locator;

  constructor(page: Page) {
    this.page = page;
    this.searchTxt = page.locator("input#edit-keys");
  }

  async fillSearchTxt(txt: string)
  {
    await this.searchTxt.fill(txt);
  }
}

Auto Pract Home Page Page Object File

import { expect, type Locator, type Page } from '@playwright/test';

export class HomePage {
  readonly page: Page;
  readonly copywrightLnk: Locator;
  readonly closeBtn: Locator;

  constructor(page: Page) {
    this.page = page;
    this.closeBtn = page.locator("button.close");
    this.copywrightLnk = page.locator("div.footer-end a");
  }

  async clickCloseBtn()
  {
    this.closeBtn.click();
  }

  async clickCopywrightLnk()
  {
    const [newPage] = await Promise.all([
      // Wait for Popup/Page Event
      this.page.waitForEvent('popup'),
      
      // Click Copywright of AutoPract to Open ProgramsBuzz
      this.copywrightLnk.click() 
    ])
    // Return Instance of New Page - ProgramsBuzz
    return newPage;
  }
}

Here  you will see clickCopywrightLnk() method where we are returning newPage instance, after clicking on copywright link. 

Test Case

import { test, expect } from '@playwright/test';
import { HomePage } from '../page-objects/home.page';
import { ProgramsBuzzPage } from '../page-objects/programsbuzz.page';


let homePageObj:HomePage;
let programsBuzzPageObj: ProgramsBuzzPage;

test.beforeEach(async ({ page }, testInfo) => {
    homePageObj = new HomePage(page);
  });

test('Handle Multiple Tabs using Page Objects', async ({ page }) => {
    
    // Visit Auto Pract Webbsite
    await page.goto("http://autopract.com");
    
    // Close Popup of Auto Pract Website
    await homePageObj.clickCloseBtn();
    
    // Print URL of Auto Pract Website
    console.log(page.url());
    
    // Receive New Page Instance After Clicking
    let newPage = await homePageObj.clickCopywrightLnk();
    
    // Print URL of New Page
    console.log(newPage.url());
    
    // Call Constructor of New Page using newPage Instance
    programsBuzzPageObj = new ProgramsBuzzPage(newPage);
    
    // Fill in Search Value for New Page
    await programsBuzzPageObj.fillSearchTxt("random");
})

You  can see we are calling clickCopywrightLnk() method which will click on copywright link and return the new page  instance of programsbuzz. After that we are calling object class of ProgramsBuzz using the new Page instance as a parameter. Then we are using programsBuzzPageObj to work with ProgramsBuzz website locators and methods.