DEV Community: SIYAMALA G

download playwright & learn Test Case - JS

SIYAMALA G — Thu, 16 Jul 2026 10:09:08 +0000

Download the playwright :

Step 1 : Install Node.js
1.Go to the Node.js website.
2.Download the LTS (Long-Term Support) version.
3.Install it.

After installation, verify it:

node -v / npm -v

Both Command display version numbers.

Step 2 :Create a Project Folder
Open Command Prompt

1.mkdir PlaywrightProject
2.cd PlaywrightProject

Step 3 : Initialize a Node.js Project

npm init -y

This creates a package.json file.

Step 4 : Install Playwright

npm init playwright@latest

During installation, you should Answer a few question :

✔ Do you want to use TypeScript or JavaScript?
> JavaScript

✔ Where to put your tests?
> tests

✔ Add a GitHub Actions workflow?
> No

✔ Install Playwright browsers?
> Yes

Step 5: Verify the Installation

npx playwright test

If everything is installed correctly, Playwright will execute the sample tests.

What Is Test Case ?

A test case is a set of steps used to verify whether a particular feature of an application works as expected.

For example,
1.Open the website.
2.Verify that the page loads successfully.
3.Check that the page title is correct.

Basic Test Case Structure

import { test, expect } from '@playwright/test' test('Open Google Homepage', async({ page }) =>{ 
   await page.goto('https://www.google.com');

await expect(page).toHaveTitle(/Google/);
});

Understanding the Code

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

1.test is used to create a test case.
2.expect is used to verify the expected result.

test('Open Google Homepage', async ({ page }) => {

1.test() defines a new test case.
2.'Open Google Homepage' is the name of the test.
3.page represents a browser tab where all browser actions are performed.

await page.goto('https://www.google.com');

1.page.goto() navigates to the specified URL.
2.await waits until the page finishes loading before moving to the next step.

await expect(page).toHaveTitle(/Google/);

This assertion checks whether the page title contains the word Google.

If the title matches, the test passes. Otherwise, it fails.

This assertion checks whether the page title contains the word Google.

If the title matches, the test passes. Otherwise, it fails.

Playwright-JS

SIYAMALA G — Sun, 12 Jul 2026 16:47:30 +0000

What is Playwright?
=> It is an open-source automation framework developed by Microsoft
=> It is a tool used to automate web browsers for test websites and web applications.

How to Work?
Developers build the website, and testers check if all its features are working correctly. They verify things like:

Does the website open when the URL is entered?
Does the username and password work?
Is the Login button clickable?
After clicking Login, does the dashboard or next page open?
Are all other features working as expected?

Types of Testing
1. Functional Testing
It is the automated verification that every feature of a web application behaves as expected when users interact with it.
Example

Features to test:

Login
Search for products
Add items to cart
Remove items from cart
Checkout
Logout

Playwright can automate all these functional tests instead of a tester performing them manually every time.

2.End-to-End (E2E) Testing
It means testing your application the same way a real user would interact with it—from opening the website to completing a full workflow.

🤖 opens browser
↓
Visits website
↓
Clicks Login
↓
Types username
↓
Types password
↓
Clicks Sign In
↓
Checks "Welcome, Siyamala"

3. Regression Testing
Regression Testing means checking that old features still work after you make changes to your application.

4. Cross-Browser Testing
Cross-Browser Testing means checking that your website works correctly in different web browsers.

✅ Google Chrome
✅ Microsoft Edge
✅ Mozilla Firefox
✅ Safari

5. UI Testing
UI (User Interface) Testing means checking that the visible parts of a website work and appear correctly.

+---------------------+
| Username [________] |
| Password [________] |
|                     |
|  [ Login Button ]   |
+---------------------+

✅ Buttons
✅ Text boxes
✅ Colors
✅ Images
✅ Menus
✅ Forms
✅ Labels
✅ Links

6. Smoke Testing
Smoke Testing means running a small set of important tests to quickly check whether the application is basically working.

7. API Testing
API Testing in Playwright is the process of sending HTTP requests to an API and verifying that the responses are correct, without interacting with the application's user interface.

Playwright verifies that:

The response status code is 200 OK.
The response contains the expected data.
A valid authentication token is returned.

*Common API Requests *

GET – Retrieve data
POST – Create new data
PUT – Update existing data
DELETE – Remove data

String - JS

SIYAMALA G — Sat, 11 Jul 2026 08:37:39 +0000

String - A string is a sequence of characters in single quotes ('), double quotes ("), or backticks (`).

javascript const firstName = "Siyamala"; const lastName = 'Manikandan'; const message =Welcome to JavaScript`;

console.log(firstName);
console.log(lastName);
console.log(message);
`

OutPut
plaintext Siyamala Manikandan Welcome to JavaScript
1.Length
returns the total number of characters in a string.
javascript const language = "JavaScript"; console.log(language.length);

OutPut
plaintext 10
2.Uppercase
convert all characters to uppercase.
javascript const text = "javascript"; console.log(text.toUpperCase());
Out
JAVASCRIPT
`markdown
**3.Lowercase
convert all characters to lowercase.

` const text = "JAVASCRIPT"; console.log(text.toLowerCase()); `plaintext

OutPut
` javascript `markdown
4.Access Characters
Use the index position to access individual characters.
` const word = "Coding"; console.log(word[0]); console.log(word[3]); `plaintext

OutPut
` C i `markdown
5.indexOf()
returns the Character Position
` const text = "JavaScript"; console.log(text.indexOf("S")); `plaintext

OutPut
` 4 `markdown
6.includes()
used to check whether a specific value exists in an array
` const course = "JavaScript Basics"; console.log(course.includes("Script")); `plaintext
OutPut
` true `markdown
7.replace()
replaces the first matching value.
` const sentence = "I love Java"; const result = sentence.replace("Java", "JavaScript"); console.log(result); `plaintext

OutPut
` I love JavaScript `markdown

8.slice()
extracts a portion of a string.
` const text = "JavaScript"; console.log(text.slice(0, 4)); `plaintext

OutPut
` Java `markdown

9.split()
Convert a string into an array.
` const fruits = "Apple,Banana,Mango"; console.log(fruits.split(",")); `plaintext

OutPut
` ["Apple", "Banana", "Mango"] `markdown

10.trim()
remove whitespace from both ends.
` const username = " Sherin "; console.log(username.trim()); `plaintext

OutPut
` Sherin `markdown
11.repeat()
repeats a string a specified number of times.
` console.log("Hi ".repeat(3)); `plaintext

OutPut
` Hi Hi Hi `

Object - Javascript

SIYAMALA G — Sat, 11 Jul 2026 04:25:32 +0000

Object used to store multiple values in a single variable using key-value pairs.

const person = {

     name : "Sherin",
     age : 25,
     role : "Software Tester"
};
console.log(person);

*OutPut *

`{name: 'Anees', age: 23, role: 'Software Tester'}`

Object Properties :

1.Dot Notation :

`console.log(person.name);
console.log(person.age);`

OutPut

`Sherin
25`

2.Bracket Notation :

`console.log(person["Role"]);`

OutPut

`Software Testing`

3.Add New Properties :

`person.country = "India";
console.log(person);`

*OutPut *

`{
  name: "Sherin",
  age: 23,
  role: "Software Tester",
  country: "India"
}`

4.Updating Properties :

`person.age = 24;
console.log(person.age);`

*OutPut *

`24`

5.Deleting Properties :

`delete person.role;
console.log(person);`

OutPut

`{
  name: "Sherin",
  age: 24,
  country: "India"
}`

Object with Method

object can contain functions.
`const student = {
  name: "Sherin",

  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

console.log(student.greet());`

OutPut

`Hello, I'm Sherin`

Nested Objects

Objects can contain other objects.

`const employee = {
  name: "Sherin",
  address: {
    city: "Chennai",
    pincode: 600001
  }
};

console.log(employee.address.city);`

OutPut

`Chennai`

Object Methods

1.Object.keys()
Returns all keys.

`console.log(Object.keys(person));`

OutPut

`["name", "age", "country"]`

2.Object.values()
Returns all values.

`console.log(Object.values(person));`

OutPut

`["Sherin", 24, "India"]`

3.Object.entries()
Returns key-value pairs.

`console.log(Object.entries(person));`

OutPut

`[
  ["name", "Anees"],
  ["age", 24],
  ["country", "India"]
]`

Object Spread Operator

Merge the objects.

`const personal = {
  name: "Sherin",
  age: 25
};

const professional = {
  role: "Software Tester",
  country: "India"
};

const profile = {
  ...personal,
  ...professional
};

console.log(profile);`

OutPut

`{
  name: "Sherin",
  age: 23,
  role: "Software Tester",
  country: "India"
}`

Array Search

SIYAMALA G — Sun, 19 Apr 2026 07:33:11 +0000

Array Search means finding a value inside an array.

1. includes()

=>checks if value exists

const a=[2,99,45,76,54];

console.log(a.includes(45));
console.log(a.includes(12));

//true
//false

2. indexOf()

=>finds indexvalue and it print first occurrence

const a=[2,99,45,76,45,54];

console.log(a.indexOf(45));

2  //first occurance

3.lastIndexOf()

=>same as indexOf but it print last occurance

const a=[2,99,45,76,45,54];

console.log(a.lastIndexOf(45));

4 //last occurance

4.find()

=>finds value with condition and return first matching value.
=>check from frist(start->end).

const a=[2,99,45,76,54];
const b=a.find(n=>n>40);
console.log(b);

5.findLast()

=>same as find but it check from last (end->start)

const a=[2,99,45,76,54];
const b=a.find(n=>n>40);
console.log(b);

6.findIndex()

=>find indexvalue with condition.
=>return first matching indexvalue.

const a=[2,9,4,7,14];
const b=a.findIndex(n=>n>40);
console.log(b);

const a=[2,8,4,77,14];
const b=a.findIndex(n=>n>40);
console.log(b);

-1  //no match

3

7.findLastIndex()

=>same as findIndex but it return last matching indexvalue.

const a=[2,9,4,6,8];
const b=a.findLastIndex(n=>n>5);
console.log(b);

Array Iterations

SIYAMALA G — Sat, 18 Apr 2026 13:33:16 +0000

What is Iteration?
It is a repeating process,usually with the aim of approaching a desired result.

filter()
creating a new array containing only the element that pass a specific condition.

let a=["apple","grap","banana","watermelon"];
let b=a.filter((x)=>(x.length>6));
console.log(b);

watermelon

flatMap()
first map all the element in the array,Then create new array.

let a=[2,7,3,1,0];
let b =a.flatMap((x)=>[x,x+1]);
console.log(b);

2,3,7,8,3,4,1,2,0,1

reduce()
procees the array and return single value.

let num=[2,7,3,1,0];
let a=num.reduce(x);

function x(c,d){
T=c+d;
return T;
}
console.log(a);

13  //(2+7=>9+3=>12+1=>13+0=13)

reduceRight()
same as reduce but it is work from (right-to-left) opposite direction.

let num =["h","e","l","l","o"];
let a=num.reduce(sum);
let b=num.reduceRight(sum);

function sum(x,y){
return x+y;
}
console.log(a);
console.log(b);

hello
olleh

every()
it return false ==> condition not satisfied
otherwise,it return true.(like AND operator)

let a=[4,8,11];
let b =a.every((a)=>(a%2==0);
console.log(b);

false

some()
if it is return false ==> no one is sastisfied the condition otherwise,it is return true(like OR operator)

let a=[2,5,7,9,11];
let b=a.some((a)=>(a%2==0));
console.log(b);

true

from()(To be discussed)
create a new copied array from iterable object.

let a="TEASHOP";
let b=Array.from(a);
console.log(b);

"T","E","A","S","H","O","P"

keys()
object type==>return keys
array type==>return values(index value)

const a={
   age:35,
   id:1258,
   height:5.2,

 };
  const b=Object.keys(a);
  console.log(b);

age
id
height

another example

const a=[5,8,9,3];
    const b=a.keys();
    console.log(...b);

entries()
it's return both index and values of an array

const a=[5,8,9,3];
const b=a.entries();
console.log([...b]);

[0,5]
[1,8]
[2,9]
[3,3]

with()
create a new array by changing/replace one element at a specific index without modifying the original array.

 const a=[5,8,"hel",3];
 const b=a.with(2,"hello");
 console.log(b);

5,8,hello,3

CALLBACK FUNCTION- EXAMPLES

SIYAMALA G — Thu, 16 Apr 2026 13:22:03 +0000

What is callback Function ?
A function that you pass into another function, so it can be used (called) later.

1.Bus Travel :

function conductor(ticket){
    console.log("where to go");
     ticket();
}

function passenger()
{
    console.log("Ooty");
}

conductor(passenger);

OUTPUT:

where to go
Ooty

2.G-pay process :

function Gpay(money){
    console.log("enter the amount");
    money();
}

function PIN(){
    console.log("enter the 4 digit PIN");
}

function credit(){
    console.log("sucessfully credited");
}
Gpay(PIN);
credit();

OUTPUT:

enter the amount
enter the 4 digit PIN
sucessfully credited

3.Login Process:

function Web(signin){
    console.log("Email/Mobile no");
    signin();
}

function password(){
    console.log("enter your password");
}

function OTP(){
    console.log("enter otp");
}

function Login(){
    console.log("Sucessfully Login");
}
Web(password);
OTP();
Login();

OUTPUT:

Email/Mobile no
enter your password
enter otp
Sucessfully Login

4.ClassRoom Attendance

function ClassA(attendance){
    console.log("Roll no 1");
}

function ask(){
    console.log("Aishwarya present");
}

function student1(){
    consolee.log("Rool.no 2");
}

function student2(){
    console.log("Bharathi present");
}
ClassA(ask);
student1();
student2();

OUTPUT:

Roll.no 1
Aishwarya present
Roll.no 2
Bharathi present

5.ATM Machine Process

function ATM(Transaction){   
   console.log("domestic/International");
   Transaction();
 }
function step1(){
   console.log("click domestic");
 }
function step2(){
   console.log("click withdraw");
}
function step3(){
   console.log("enter your pin");
}
function step4(){
      console.log("enter the amount");
}
function step5(){
      console.log("collect your amount");
}
 function step6(){
      console.log("THANK YOU");
 }
 ATM(step1);
 step2();
 step3();
 step4();
 step5();
 step6();

OUTPUT:

Domestic/International
click domestic
click withdraw
enter your pin
enter the amount
collect your amount
THANK YOU