When working in playwright , it is very important to understand the in-built fixtures such as Browser , context, page

Just imagine how you will access a particular website.

1. You will open a browser . This does the below tasks in the background

   1. Opens up your profile (so cookies, logged in sessions can be reused)

      

   2. Creates a new tab automatically

      

2. you will hit the url in the url textbox

   1. 

just like above, we can do the things manually in the playwright code but why not preferred

test.only("validate orange hrm portal", async ({}) => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
})

1. Playwright creates browser and context behind the scenes because all tests need the page for sure, code redundancy is removed with this.

2. This will overwrite the project configuration from playwright.config.json file and will execute in that browser mentioned in the test only . here it will be chromium. you have to make code change to run it in firefox, webkit

import { test, expect } from "@playwright/test";

test.only("validate orange hrm portal", async ({ page }) => {
  await page.goto(
    "https://opensource-demo.orangehrmlive.com/web/index.php/dashboard/index"
  );
});

Playwright decides which browser to open based on the playwright.config.json file

Now let’s explore the Browser, context, page with examples

1. Browser

This below code creates a browser but if you run this, you won’t see anything on the screen. because playwright is super-fast

import { test, chromium, firefox, webkit } from "@playwright/test";
test.only("validate orange hrm portal", async ({}) => {
 const browser = await chromium.launch({ headless: false });
 const fireFox = await firefox.launch({ headless: false });
 const Safari = await webkit.launch({ headless: false });
})

2. Context

This creates profile so each tests run in a new profile hence so isolated. But again this code won’t show anything on the screen

test.only("validate orange hrm portal", async ({}) => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
})

3. Page

Now when you create a page which is equal to a tab then it will show something on the UI

test.only("validate orange hrm portal", async ({}) => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  await context.newPage();
})

But that also will be closed very quickly.

Run this to see the 3 browsers open

import { test, chromium, firefox, webkit } from "@playwright/test";

test.only("validate orange hrm portal", async ({}) => {
  const chrome = await chromium.launch({ headless: false });
  const fireFox = await firefox.launch({ headless: false });
  const Safari = await webkit.launch({ headless: false });

  const chromeCntext= await chrome.newContext();
  const fireCntext= await fireFox.newContext();
  const safariCntext= await Safari.newContext();

  await chromeCntext.newPage();
  await fireCntext.newPage();
  await safariCntext.newPage();

});

Now comes the fun part, let’s see it visually the execution.

Scenario1: playing with multiple page (tab)

import { test, chromium, expect } from "@playwright/test";

test.only("validate orange hrm portal", async ({}) => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage(); //creating first page

  await page.goto(
    "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login"
  );
  await page.getByPlaceholder("Username").fill("Admin");
  await page.getByPlaceholder("Password").fill("admin123");
  await page.getByRole("button", { name: "Login" }).click();
  await expect(
    page.getByText("Employee Distribution by Sub Unit")
  ).toBeVisible();

 const page2 = await context.newPage(); //creating second page using same context
 await page2.goto(
    "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login"
  );
 await expect(
    page2.getByText("Employee Distribution by Sub Unit")
  ).toBeVisible();

});

Code explanation

1. Have hit the HRM site

2. Logged in the site in the first page

3. Created a second page (Tab)

4. hitting the logged in URL in second page

   1. It got logged in already rather than asking me to login.

   2. Because the sessions are shared between tabs

Output:

you see there are 2 tabs, the home page is visible in both the screens rather than login screen

Scenario2: playing with multiple context (profile) and page (tab)

import { test, chromium, expect } from "@playwright/test";

test.only("validate orange hrm portal", async ({}) => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto(
    "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login"
  );
  await page.getByPlaceholder("Username").fill("Admin");
  await page.getByPlaceholder("Password").fill("admin123");
  await page.getByRole("button", { name: "Login" }).click();
  await expect(
    page.getByText("Employee Distribution by Sub Unit")
  ).toBeVisible();
 const context2 = await browser.newContext(); //creating 2nd context here
  const page2 = await context2.newPage(); //creating 2nd page using 2nd context
 await page2.goto(
    "https://opensource-demo.orangehrmlive.com/web/index.php/auth/login"
  );
 await expect(
    page2.getByText("Employee Distribution by Sub Unit")
  ).toBeVisible();
});

Code explanation

1. Have hit the HRM site

2. Logged in the site in the first page

3. Created new context (context2) which is like new profile or incognito session

4. Created a second page (Tab) using the second context

5. hitting the logged in URL in second page

   1. It is asking me to login.

   2. Because the sessions are not shared between tabs

Output:

you see there are 2 browser contexts opened, the home page is visible in the first page but the second page is on the login screen

Youtube link with demo