Playwright Multiple Browser Contexts

Profile picture for user arilio666

Now, we know that an independent browser session, for example, an incognito mode, can be called a browser context. They are isolated environments within a single browser instance.

The playwright can create multiple browser contexts within a single test scenario. This is useful when we need to test for multi-user functionality like chat.

Example

  • We will create two contexts and test our programsbuzz and autopract site on two pages.
  • While doing so, we will be covering a topic on getting all texts of a page on a service-based application.
  • A service-based is identified easily when it receives a call from APIs, fetches through it, and displays the page's content.

  • We can see that the calls are made for the content to display. This means this is a service-based application.
const {test, expect} = require('@playwright/test');

  test('testing', async ({browser})=> 
{

const context = await browser.newContext();
const page1 = await context.newPage();
await page1.goto('https://programsbuzz.com');
await page1.locator('.gv-icon-52').click();
await page1.locator('#edit-keys').type('Playwright');
await page1.locator('#edit-submit').click();
await page1.waitForLoadState('networkidle');
const titles = await page1.locator('h3 a').allTextContents();
console.log(titles)

const context2 = await browser.newContext();
const page2 = await context2.newPage();
await page2.goto('http://autopract.com/selenium/form5/')
await page2.locator("input[value='four']").click()
await page2.locator("input[value='IN']").click()
});
  • Two contexts and pages are created to automate different sites in an identical test environment.
  • So in the first context, we are doing the text display example.
  • So to wait for the call to be made and ensure all the texts are visible, we can use the waitForLoadState until the networkidle is mentioned.
  • So this waits for the calls to be made and fetches the texts from that page using allTextContents.
  • In the second context, it is a simple checkbox operation and radio button handling.