JavaScript for Playwright Automation
Testing
Beginner to Intermediate Notes for QA Engineers
Chapter 1: Introduction to JavaScript for Test Automation
What is JavaScript?
JavaScript is a programming language used to add logic and behavior to web pages.
For automation testers, JavaScript is used to write scripts that simulate user actions in the
browser.
Why JavaScript for Playwright?
Playwright uses JavaScript (running on [Link]) to control browsers like Chrome, Firefox,
and WebKit.
Automation Flow Diagram:
Test Script (JS)
Playwright API
Browser
v
Web Application
Example Playwright Test:
const { test, expect } = require('@playwright/test');
test('homepage title test', async ({ page }) => {
await [Link]('[Link]
const title = await [Link]();
[Link](title);
});
Practice Questions:
1. What is JavaScript and why is it used in Playwright?
2. What role does [Link] play in automation?
3. Write a simple Playwright test that opens a website.
Chapter 2: JavaScript Variables
Variables store data.
Types:
var -> old method
let -> block scoped
const -> constant value
Example:
let username = "admin";
const password = "1234";
Playwright Example:
test('login test', async ({ page }) => {
const username = "admin";
await [Link]('#username', username);
});
Graphical Idea:
Variable
+---- Name (username)
+---- Value ("admin")
Practice Questions:
1. Difference between let and const?
2. Why should const be preferred?
3. Create a variable storing a URL and open it using Playwright.
Chapter 3: Data Types
Common JavaScript Data Types:
String -> "Hello"
Number -> 10
Boolean -> true / false
Array -> list of values
Object -> key value pair
Example:
let name = "Chetan";
let age = 25;
let isLoggedIn = true;
Playwright Example:
const users = ["admin","tester","guest"];
for (const user of users) {
[Link](user);
Practice Questions:
1. What is a Boolean?
2. Create an array of 3 test usernames.
3. Print them using a loop.
Chapter 4: Conditions
Conditions allow decision making.
if statement:
if (score > 50) {
[Link]("Pass");
Playwright Example:
if (await [Link]('#error')) {
[Link]("Login failed");
Decision Flow:
Condition?
Yes -----> Execute Block A
No ------> Execute Block B
Practice Questions:
1. Write a condition checking if login button is visible.
2. Print 'Test Passed' if success message appears.
Chapter 5: Loops
Loops repeat tasks.
for loop example:
for (let i=0; i<5; i++) {
[Link](i);
Playwright Example:
const products = await [Link]('.product').all();
for (const product of products) {
[Link](await [Link]());
Loop Diagram:
Start -> Check Condition -> Execute -> Increment -> Repeat
Practice Questions:
1. Write a loop that prints numbers 1–10.
2. Use Playwright locator loop to print product names.
Chapter 6: Functions
Functions are reusable blocks of code.
function login() {
[Link]("Logging in...");
Playwright Example:
async function login(page, username, password){
await [Link]('#username', username);
await [Link]('#password', password);
await [Link]('#login');
Practice Questions:
1. Create a function to open a page.
2. Create a reusable login function.
Chapter 7: Arrays
Arrays store multiple values.
Example:
const browsers = ["Chrome","Firefox","Safari"];
Common Methods:
push()
pop()
includes()
Playwright Example:
const urls = [
'[Link]
'[Link]
];
for (const url of urls) {
await [Link](url);
Practice Questions:
1. Create array of 5 URLs.
2. Loop through them in Playwright.
Chapter 8: Objects
Objects store structured data.
Example:
const user = {
name: "admin",
password: "1234"
};
Access property:
[Link]([Link]);
Playwright Example:
const loginData = {
username: "admin",
password: "pass123"
};
await [Link]('#username', [Link]);
Practice Questions:
1. Create object storing test user data.
2. Use it in a login test.
Chapter 9: Async and Await (Very Important)
Playwright operations are asynchronous.
Without async/await, JavaScript would continue execution without waiting.
Example:
await [Link]('#login');
Execution Diagram:
Step 1 -> Action Triggered
Step 2 -> Browser Processes
Step 3 -> Script Waits
Step 4 -> Continue
Practice Questions:
1. Why is await required in Playwright?
2. What happens if await is removed?
Chapter 10: Page Object Model
Page Object Model organizes automation code.
Structure:
tests/
pages/
[Link]
Example:
class LoginPage {
constructor(page){
[Link] = page;
[Link] = '#username';
async login(user, pass){
await [Link]([Link], user);
Practice Questions:
1. Why use Page Object Model?
2. Create class for Login Page.