QA Shastra Online Training

Playwright Documentation 🎥 Browser, Context & Page in Playwright | Multi-User & Login Scenarios Explained 🎯 Goal: Understand browser, context, and page in Playwright

🎥 Playwright: Browser, Context & Page - Real-time Demo and Multi-User Testing  . 🎯 Goal: Understand browser , context , and page in Playwright 🧠 1. What is a browser ? ✅ Definition: A browser in Playwright is a launched instance of a real browser (Chromium, Firefox, WebKit) that can be used for automated testing. ✅ Purpose: It starts and controls the browser process. It is the root of your test execution. Required to create contexts and pages . ✅ Code Example: ts Copy Edit import { chromium } from 'playwright' ; const browser = await chromium. launch ({ headless : false }); 🧠 2. What is a context (browser context)? ✅ Definition: A context is like a separate browser profile (or incognito tab) inside the browser. Each context is isolated — no cookies, local storage, or sessions are shared. ✅ Purpose: Simulates multiple users or sessions. Enables parallel and isolated testing. Allows setting user-specific prefer...

 This is perfect for a tutorial script or blog post on Playwright + TypeScript basics. 1. Writing Your First Test in Playwright Let’s start with a simple test to understand how Playwright works. 🔹 Step 1: Import Required Methods First, we need to import the required methods ( test and expect ) from the Playwright testing library: import { test, expect } from '@playwright/test' ; 🔹 Step 2: Write Your First Test The test method takes two parameters: A title (string) that describes the test case A callback function (arrow function) that contains the actual test code Example: test ( 'First test case' , () => { // Your test code goes here }); You can add as many test cases as you want in the same format: test ( 'Second test case' , () => { // Code for second test }); test ( 'Third test case' , () => { // Code for third test }); ✅ 2. Grouping Test Cases using test.describe To group related test cases, use the test.describe ...

🎥 Playwright: test.only, Hooks & Grouping with test.describe Explained Let’s go step-by-step , showing how to build from a single test , to using beforeEach / afterEach , and then organizing things with test.describe . ✅ Step 1: Basic Single Test with test.only import { test, expect } from '@playwright/test' ; test. only ( '🚀 Basic test - check title' , async ({ page }) => { await page. goto ( 'https://example.com' ); await expect (page). toHaveTitle ( /Example Domain/ ); }); test.only ensures only this test runs — great for debugging. ✅ Step 2: Add beforeEach and afterEach import { test, expect } from '@playwright/test' ; test. beforeEach ( async ({ page }) => { console . log ( '🔄 Setting up before each test' ); await page. goto ( 'https://example.com' ); }); test. afterEach ( async ({ page }, testInfo) => { console . log ( `📦 Finished test: ${testInfo.title} `); }); test. only ( ...

  Playwright Installation & Running Tests (Step-by-Step) Create a Project Folder Create a new folder named PlaywrightTest . Open in VS Code Open the PlaywrightTest folder using Visual Studio Code. 🎥 Playwright Installation & Running Tests – Step-by-Step Guide Open Terminal Launch the integrated terminal in VS Code. Initialize Playwright Project Run the following command to set up a new Playwright project: npm init playwright@latest Installation Completed Follow the prompts to complete the installation. Playwright will set up all the required files and configuration. Running Playwright Tests via Command Line Run All Tests To run all available tests, use: npx playwright test View Test Report After running tests, view the test report using: npx playwright show-report Run Tests in Chromium Only To run tests only in the Chromium browser: npx playwright test --project=chromium To run in Chromium with a visible browser window (headed...