QA Shastra Online Training

CSS Selectors with Playwright - Full Guide 🎯 CSS Selectors in Playwright JavaScript ✅ 1. Tag, ID, and Class Selectors Explanation: The most basic and common CSS selectors. tag – selects all elements of that tag .class – selects by class #id – selects uniquely by ID // Tag await page.click('button'); await page.locator('input').first().fill('Sample'); await page.locator('h1').textContent(); // Class await page.click('.login-btn'); await page.locator('.nav-item').nth(1).click(); await page.locator('.error-message').isVisible(); // ID await page.fill('#username', 'JohnDoe'); await page.fill('#password', 'secret'); await page.click('#submitBtn'); ✅ 2. Attribute Selectors Explanation: Use HTML attributes to target elements. [attr=value] - Exact match [attr^=value] - Starts with [attr$=value] - Ends with [attr*=value] - Contains // Exa...

🎯 Playwright Locators in JavaScript (Complete Guide) This guide explains each Playwright locator with: ✅ What it is 🕐 When to use ⚙️ How to use it 🎯 Benefits 🧪 Code Examples 🔹 1. Locator by ID ✅ What: Selects an element with a unique id . 🕐 When: Element has a unique id . ⚙️ How: page.locator('#username') 🎯 Benefit: Fast and reliable. <input id="username" /> await page.locator('#username').fill('John'); 🔹 2. Locator by Class ✅ What: Selects by class . 🕐 When: Repeated or styled elements. ⚙️ How: page.locator('.password') 🎯 Benefit: Useful for shared styling. <input class="password" /> await page.locator('.password').fill('12345'); 🔹 3. Locator by Text ✅ What: Matches visible element text. 🕐 When: For buttons, links, etc. ⚙️ How: page.getByText('Login') 🎯 Benefit: Human-readable. <button>Login...

🎥 Setup Browser, Context, Page & Run Config Test Scripts with package.json & playwright.config.js Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript) 1. Install Playwright You can install Playwright using the following command: npm init playwright@latest 2. Create a Basic Test Script Understand the core Playwright architecture: Element Description browser Controls the browser instance (like Chrome, Firefox, etc.) context Acts like a separate browser profile (cookies, localStorage are isolated) page A single browser tab where interaction happens 3. Run the Test npx playwright test example.spec.js Ways to Run TypeScript Tests Way Command Notes 🟢 Via npx npx playwright test Uses built-in TypeScript support 🟢 With s...

🎥 Hooks, Fixtures, and Grouping in Playwright - Explained with Examples 1. What is a Test and Test Case in Playwright? ✅ Test (test) A single unit of testing logic. Defined using test() function. Each test() represents a test case. import { test, expect } = require('@playwright/test'); test('Verify title of homepage', async ({ page }) => { await page.goto('https://example.com'); await expect(page).toHaveTitle(/Example Domain/); }); In this example, "Verify title of homepage" is the test case description. 🔹 2. What are before, after, beforeEach, afterEach? These are hooks to manage setup and teardown logic: 📌 beforeAll : Runs once before all tests 📌 afterAll : Runs once after all tests 📌 beforeEach : Runs before each test case 📌 afterEach : Runs after each test case 🔹 3. Step-by-Step Example const { test, expect } = require('@playwright/test'); test.beforeAll(async () => { conso...

🎥 Playwright Installation & Test Execution Using JavaScript – Step-by-Step Guide Pre-requisites The following two items should be installed: Node.js VS Code Playwright Installation & Test Execution Using JavaScript (Step-by-Step) ✅ Step 1: Create a Project Folder Open your file explorer or terminal and create a new folder: mkdir PlaywrightTest Navigate into the folder: cd PlaywrightTest ✅ Step 2: Open Folder in VS Code Open Visual Studio Code. Click File → Open Folder and select the PlaywrightTest folder. ✅ Step 3: Initialize Playwright Open the integrated terminal in VS Code: Shortcut: Ctrl + ~ or use View → Terminal Run the following command: npm init playwright@latest Follow the prompts: Select JavaScript Keep the default test folder (tests) Choose GitHub Actions workflow (optional) Press Enter to install browsers (Chromium, Firefox, WebKit) After installation, the following will be created: package.json playwri...