Playwright Interview Questions & Answers

🟢 1. What is Playwright?

Answer:
Playwright is an open-source automation framework developed by Microsoft for end-to-end testing of web applications.

Key Features:

Cross-browser support (Chromium, Firefox, WebKit)
Auto-waiting
Headless & headed execution
Parallel execution
Network interception

🟢 2. Why Playwright over Selenium?

Answer:

Feature	Playwright	Selenium
Auto-wait	✅ Built-in	❌ Manual
Speed	Faster	Slower
Multi-tab	Easy	Complex
Network mocking	Built-in	Limited
Modern support	Yes	Limited

🟢 3. How to install Playwright?

Answer:

npm init playwright@latest

🟢 4. Basic Test Example

import { test, expect } from '@playwright/test';test('Google search test', async ({ page }) => {
  await page.goto('https://google.com');
  await page.fill('input[name="q"]', 'Playwright');
  await page.press('input[name="q"]', 'Enter');
  await expect(page).toHaveTitle(/Playwright/);
});

🟡 5. What is Auto-Waiting?

Answer:
Playwright automatically waits for:

Elements to be visible
Elements to be stable
Network to be idle

Example:

await page.click('#submit'); // waits automatically

🟡 6. What are Locators?

Answer:
Locators are used to find elements.

page.locator('#id');
page.locator('.class');
page.getByText('Login');
page.getByRole('button', { name: 'Submit' });

🟡 7. Difference between `locator()` and `page.$()`

Answer:

locator() → Auto-wait + retry
page.$() → Returns immediately (not reliable)

🟡 8. How to handle dropdowns?

await page.selectOption('#dropdown', 'value1');

🟡 9. Handling checkboxes

await page.check('#checkbox');
await page.uncheck('#checkbox');

🟡 10. Handling alerts

page.on('dialog', async dialog => {
  await dialog.accept();
});

🔵 11. How to handle multiple tabs?

const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('#openTab')
]);await newPage.waitForLoadState();

🔵 12. File upload

await page.setInputFiles('#fileInput', 'test.pdf');

🔵 13. File download

const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.click('#downloadBtn')
]);await download.saveAs('file.pdf');

🔵 14. What is Page Object Model (POM)?

Answer:
Design pattern to separate UI and test logic.

Example:

export class LoginPage {
  constructor(private page) {}  async login(username, password) {
    await this.page.fill('#user', username);
    await this.page.fill('#pass', password);
    await this.page.click('#login');
  }
}

🔵 15. API Testing in Playwright

import { request } from '@playwright/test';test('API Test', async () => {
  const apiContext = await request.newContext();
  const response = await apiContext.get('/api/users');
  console.log(await response.json());
});

🔴 16. How to handle authentication?

test.use({ storageState: 'auth.json' });

Save session:

await page.context().storageState({ path: 'auth.json' });

🔴 17. Parallel Execution

npx playwright test --workers=4

🔴 18. Retry Failed Tests

// playwright.config.ts
retries: 2

🔴 19. How to handle dynamic elements?

await page.locator('//button[text()="Submit"]').click();

Use:

XPath
contains()
text-based locators

🔴 20. Network Interception

await page.route('**/api/users', route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify({ name: 'Mock User' })
  });
});

🧠 Advanced Scenario-Based Questions

🔥 21. Banking App Login + OTP

Solution Approach:

Mock OTP API
Use API interception

await page.route('**/otp', route => {
  route.fulfill({ body: JSON.stringify({ otp: '123456' }) });
});

🔥 22. E-commerce Add to Cart Flow

await page.click('text=Add to Cart');
await expect(page.locator('#cart')).toContainText('1 item');

🔥 23. Handling Flaky Tests

Best Practices:

Use locators instead of selectors
Avoid hard waits
Use waitForLoadState()

🔥 24. Multi-user Session (Admin + User)

const adminContext = await browser.newContext();
const userContext = await browser.newContext();const adminPage = await adminContext.newPage();
const userPage = await userContext.newPage();

🔥 25. CI/CD Integration

Use:

GitHub Actions
Jenkins

Example:

- name: Run Playwright Tests
  run: npx playwright test

26. What is Browser Context in Playwright?

Answer:
A Browser Context is an isolated session (like an incognito window).

Why important?

Test isolation
Multi-user testing
No shared cookies/session

const context = await browser.newContext();
const page = await context.newPage();

👉 Think: One browser → multiple contexts → multiple users

🔴 27. Difference between Browser, Context, and Page

Component	Description
Browser	Actual browser instance
Context	Isolated session
Page	Tab inside context

🔴 28. How to reuse login session across tests?

Answer:
Use storage state

// Save session
await context.storageState({ path: 'auth.json' });// Reuse session
test.use({ storageState: 'auth.json' });

🔴 29. How to handle iFrames?

const frame = page.frameLocator('#frameId');
await frame.locator('#input').fill('Hello');

🔴 30. Shadow DOM handling

await page.locator('css=custom-element >> text=Submit').click();

🔴 31. How to debug Playwright tests?

Answer:

Run in debug mode:

npx playwright test --debug

Use:

await page.pause();

🔴 32. Trace Viewer in Playwright

Answer:
Playwright provides a trace viewer for debugging failures.

npx playwright show-trace trace.zip

🔴 33. How to capture screenshots?

await page.screenshot({ path: 'screenshot.png' });

Full page:

await page.screenshot({ path: 'full.png', fullPage: true });

🔴 34. How to record videos?

const context = await browser.newContext({
  recordVideo: { dir: 'videos/' }
});

🔴 35. Handling dynamic waits (best approach)

Avoid:

await page.waitForTimeout(5000); ❌

Use:

await page.waitForSelector('#element'); ✅

🔴 36. Soft Assertions in Playwright

import { expect } from '@playwright/test';await expect.soft(page.locator('#status')).toHaveText('Success');

🔴 37. Hard vs Soft Assertions

Type	Behavior
Hard	Stops execution
Soft	Continues execution

🔴 38. How to run specific test file?

npx playwright test login.spec.ts

🔴 39. Run tests in headed mode

npx playwright test --headed

🔴 40. Environment configuration

// playwright.config.ts
use: {
  baseURL: 'https://staging.example.com'
}

Usage:

await page.goto('/');

🧠 Real-Time Scenario Questions (Very Important)

🔥 41. Scenario: Element is visible but click fails

Possible reasons:

Overlay present
Element not stable
Animation

Solution:

await page.locator('#btn').click({ force: true });

Better:

await expect(locator).toBeVisible();
await locator.click();

🔥 42. Scenario: Test passes locally but fails in CI

Reasons:

Timing issues
Environment difference
Headless issues

Fix:

Use proper waits
Enable retries
Use trace viewer

🔥 43. Scenario: Handling infinite scrolling

await page.evaluate(() => window.scrollBy(0, window.innerHeight));

Loop until element appears:

while (!(await page.locator('#item').isVisible())) {
  await page.mouse.wheel(0, 1000);
}

🔥 44. Scenario: Validate table data

const rows = page.locator('table tr');const count = await rows.count();for (let i = 0; i < count; i++) {
  const text = await rows.nth(i).textContent();
  console.log(text);
}

🔥 45. Scenario: Handling date picker

await page.click('#date');
await page.click('text=25');

🔥 46. Scenario: Handling authentication popup

await page.goto('https://user:pass@example.com');

🔥 47. Scenario: Drag and Drop

await page.dragAndDrop('#source', '#target');

🔥 48. Scenario: Handling file download validation

const path = await download.path();
expect(path).toContain('file');

🔥 49. Scenario: Validate API response + UI

const response = await page.waitForResponse('**/api/data');
const data = await response.json();expect(data.name).toBe('Test');

🔥 50. Scenario: Retry only failed tests

npx playwright test --retries=2

🎯 Advanced Framework Design Questions

🔷 51. How do you design a scalable Playwright framework?

Answer:

Structure:

tests/
pages/
utils/
fixtures/
config/

Best practices:

Use POM
Use fixtures
Use environment configs
Separate test data

🔷 52. What are fixtures in Playwright?

test('example', async ({ page }) => {
  // page is a fixture
});

Custom fixture:

test.extend({
  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  }
});

🔷 53. Data-driven testing

const users = ['user1', 'user2'];for (const user of users) {
  test(`login test ${user}`, async ({ page }) => {
    console.log(user);
  });
}

🔷 54. Parallel vs Serial execution

test.describe.configure({ mode: 'parallel' });

Serial:

test.describe.configure({ mode: 'serial' });

🔷 55. Tags in Playwright

test('smoke test @smoke', async () => {});

Run:

npx playwright test -g "@smoke"

⚠️ Tricky Interview Questions

❓ 56. Why Playwright is faster?

WebSocket communication
No Selenium WebDriver layer
Direct browser control

❓ 57. Can Playwright handle multiple browsers at once?

Yes:

projects: [
  { name: 'Chromium' },
  { name: 'Firefox' },
  { name: 'WebKit' }
]

❓ 58. What happens if locator matches multiple elements?

Playwright throws strict mode error

Fix:

locator.first()
locator.nth(0)

❓ 59. Difference between `waitForSelector` and locator wait

locator → auto-wait
waitForSelector → manual wait

❓ 60. How do you reduce flakiness?

✔ Use locators
✔ Avoid hard waits
✔ Use retries
✔ Mock APIs
✔ Stable selectors

🔥 61. Scenario: Banking App – Secure Login with Token

Problem:
Login uses JWT token instead of UI login.

Solution:

Call API
Inject token into storage

const requestContext = await request.newContext();const response = await requestContext.post('/api/login', {
  data: { username: 'user', password: 'pass' }
});const body = await response.json();await context.addCookies([{
  name: 'token',
  value: body.token,
  domain: 'example.com',
  path: '/'
}]);

🔥 62. Scenario: Bypass CAPTCHA (Important Interview Question)

Reality:
Playwright cannot solve CAPTCHA

Best Practice:

Disable CAPTCHA in test environment
Mock API

🔥 63. Scenario: Handling WebSocket Testing

page.on('websocket', ws => {
  ws.on('framereceived', frame => {
    console.log(frame.payload);
  });
});

🔥 64. Scenario: Test microservices-based UI

Approach:

Mock dependent APIs
Validate UI independently

await page.route('**/orders', route => {
  route.fulfill({ body: JSON.stringify({ orders: [] }) });
});

🔥 65. Scenario: Handling flaky network

await page.route('**/*', route => {
  route.continue({ timeout: 10000 });
});

🔥 66. Scenario: Validate PDF download content

const buffer = await download.createReadStream();

Then parse using Node libraries

🔥 67. Scenario: Multi-language testing

await page.goto('/?lang=fr');
await expect(page.locator('h1')).toHaveText('Bonjour');

🔥 68. Scenario: Geo-location testing

const context = await browser.newContext({
  geolocation: { latitude: 28.6139, longitude: 77.2090 },
  permissions: ['geolocation']
});

🔥 69. Scenario: Timezone testing

const context = await browser.newContext({
  timezoneId: 'Asia/Kolkata'
});

🔥 70. Scenario: Testing notifications

await context.grantPermissions(['notifications']);

🏗️ Framework Architecture Questions (Very Important)

🔷 71. How to design enterprise-level Playwright framework?

Layers:

1. Tests
2. Page Objects
3. API Layer
4. Utilities
5. Test Data
6. Config

Key Additions:

Logging
Reporting
Retry strategy
Test tagging

🔷 72. How to implement reusable utilities?

Example:

export async function login(page, user) {
  await page.fill('#user', user);
}

🔷 73. Centralized test data management

Use:

JSON files
Environment variables

const data = require('./testData.json');

🔷 74. Logging in Playwright

Use console or integrate with tools like:

Winston
Custom logger

🔷 75. Reporting tools

Playwright supports:

HTML report
Allure report

npx playwright show-report

⚙️ CI/CD + DevOps Questions

🔧 76. How to run Playwright in CI/CD?

Using GitHub Actions:

name: Playwright Testson: [push]jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install
      - run: npx playwright install
      - run: npx playwright test

🔧 77. How to run tests in Docker?

FROM mcr.microsoft.com/playwright:v1.40.0
WORKDIR /app
COPY . .
RUN npm install
CMD ["npx", "playwright", "test"]

🔧 78. Headless vs Headed execution

Mode	Use Case
Headless	CI/CD
Headed	Debugging

🔧 79. How to reduce execution time?

✔ Parallel execution
✔ API mocking
✔ Reuse authentication
✔ Run only changed tests

🔧 80. Sharding tests

npx playwright test --shard=1/3

🔍 Debugging & Optimization

🛠️ 81. How to debug failed tests in CI?

Use trace viewer
Capture video
Capture logs

🛠️ 82. Memory leak issues

Cause:

Not closing contexts

await context.close();

🛠️ 83. Handling slow tests

Remove unnecessary steps
Use API setup instead of UI
Use fixtures

🛠️ 84. Test retries strategy

retries: process.env.CI ? 2 : 0

🛠️ 85. Fail fast strategy

maxFailures: 5

🔐 Security Testing (Important)

🔒 86. How to test authentication security?

Validate token expiration
Test invalid login

🔒 87. How to test authorization?

Admin vs user roles

expect(await page.isVisible('#adminPanel')).toBeFalsy();

🔒 88. Sensitive data handling

Avoid hardcoding credentials
Use env variables

🔒 89. HTTPS validation

expect(page.url()).toContain('https');

🔒 90. Cookie testing

const cookies = await context.cookies();

🎯 Expert-Level Tricky Questions

❓ 91. Difference between `browser.newPage()` and `context.newPage()`

browser.newPage() → new default context
context.newPage() → controlled session

❓ 92. Why avoid `waitForTimeout()`?

Causes flaky tests
Slows execution

❓ 93. How Playwright handles race conditions?

Auto-waiting
Event-based execution

❓ 94. Can Playwright test backend?

Yes:

API testing
Contract testing

❓ 95. How to test file upload without UI?

await request.post('/upload', {
  multipart: { file: fs.createReadStream('file.txt') }
});

❓ 96. What is test isolation?

Each test runs independently with:

New context
Clean state

❓ 97. How to handle feature flags?

await page.goto('/?feature=true');

❓ 98. How to test performance?

Basic:

const start = Date.now();
await page.goto('/');
console.log(Date.now() - start);

❓ 99. Can Playwright run without UI?

Yes → headless mode

❓ 100. When NOT to use Playwright?

Desktop app testing
Heavy performance testing (use JMeter)

Real-World Enterprise Scenarios in Playwright

🏦 1. Banking App – End-to-End Payment Flow

🎯 Problem

User logs in → adds beneficiary → transfers money → verifies transaction.

✅ Approach

Reuse login session
Mock OTP service
Validate UI + API

💻 Example

test('Fund transfer flow', async ({ page }) => {
  await page.goto('/dashboard');  await page.click('text=Transfer');
  await page.fill('#account', '123456');
  await page.fill('#amount', '5000');
  await page.click('#submit');  await expect(page.locator('#status')).toHaveText('Success');
});

🧠 Best Practices

Avoid real payment → mock API
Validate transaction via backend API
Use test accounts

🛒 2. E-Commerce – Add to Cart + Checkout

🎯 Problem

User adds product → applies coupon → completes checkout.

✅ Approach

Use stable locators
Mock payment gateway
Validate price calculation

💻 Example

await page.click('text=Add to Cart');
await page.fill('#coupon', 'DISCOUNT10');
await page.click('#apply');await expect(page.locator('#total')).toContainText('900');

🧠 Best Practices

Mock payment APIs
Validate cart via API
Use data-driven tests

👥 3. Multi-User Role Testing (Admin vs User)

🎯 Problem

Admin creates data → user verifies it.

✅ Approach

Use multiple browser contexts

💻 Example

const adminContext = await browser.newContext();
const userContext = await browser.newContext();const adminPage = await adminContext.newPage();
const userPage = await userContext.newPage();await adminPage.goto('/admin');
await adminPage.click('#createUser');await userPage.goto('/dashboard');

🧠 Best Practices

Keep sessions isolated
Avoid shared cookies

🔐 4. Authentication Without UI (Token-Based Login)

🎯 Problem

✅ Approach

Call login API
Inject token

💻 Example

const response = await request.post('/api/login', {
  data: { username: 'user', password: 'pass' }
});const { token } = await response.json();await context.addCookies([{ name: 'token', value: token }]);

🧠 Best Practices

Avoid UI login in every test
Store auth state

🌐 5. Microservices UI – API Mocking

🎯 Problem

Frontend depends on unstable backend services

✅ Approach

Mock APIs

💻 Example

await page.route('**/orders', route => {
  route.fulfill({
    body: JSON.stringify({ orders: [] })
  });
});

🧠 Best Practices

Test UI independently
Simulate edge cases

📊 6. Data Validation Between UI and API

🎯 Problem

Ensure UI data matches backend response

💻 Example

const response = await page.waitForResponse('**/api/user');
const apiData = await response.json();const uiText = await page.locator('#username').textContent();expect(uiText).toBe(apiData.name);

🧠 Best Practices

Validate critical fields
Avoid over-validating

📱 7. Mobile Device Testing

🎯 Problem

Test responsive UI

💻 Example

import { devices } from '@playwright/test';test.use(devices['iPhone 13']);

🧠 Best Practices

Test key flows only
Avoid duplicating all tests

📦 8. File Upload & Download Validation

🎯 Problem

Upload invoice → download receipt → verify

💻 Example

await page.setInputFiles('#upload', 'invoice.pdf');const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.click('#download')
]);

🧠 Best Practices

Validate file name
Validate file content (if critical)

🔁 9. Handling Retry & Flaky Tests

🎯 Problem

Tests fail intermittently in CI

✅ Fix

retries: 2

🧠 Best Practices

Fix root cause (don’t rely only on retry)
Use trace viewer

🧾 10. Infinite Scroll / Lazy Loading

🎯 Problem

Data loads on scroll

💻 Example

while (!(await page.locator('#item').isVisible())) {
  await page.mouse.wheel(0, 1000);
}

🧠 Best Practices

Add exit condition
Avoid infinite loops

🧪 11. Feature Flag Testing

🎯 Problem

Feature enabled only for some users

💻 Example

await page.goto('/?feature=true');

🧠 Best Practices

Test both ON and OFF states

🌍 12. Localization Testing

🎯 Problem

App supports multiple languages

💻 Example

await page.goto('/?lang=hi');
await expect(page.locator('h1')).toHaveText('नमस्ते');

🧠 Best Practices

Validate key UI texts
Avoid full UI comparison

📍 13. Geo-Location Testing

🎯 Problem

Content varies by location

💻 Example

await context.setGeolocation({ latitude: 28.61, longitude: 77.20 });

🔄 14. Background Job Validation

🎯 Problem

Async job updates UI later

💻 Example

await expect(page.locator('#status')).toHaveText('Completed', { timeout: 10000 });

⚙️ 15. CI/CD Pipeline Execution

🎯 Problem

Run tests on every deployment

💻 Example

Using Jenkins or GitHub Actions

npx playwright test

🔥 16. Handling CAPTCHA in Enterprise Apps

❗ Reality

Automation tools should not bypass CAPTCHA

✅ Approach

Disable in test env
Use mock/stub

🧠 17. High Data Volume Testing (Tables)

🎯 Problem

Validate large tables

💻 Example

const rows = await page.locator('table tr');
expect(await rows.count()).toBeGreaterThan(0);

🔐 18. Role-Based Access Testing

🎯 Problem

User should not access admin pages

💻 Example

await page.goto('/admin');
await expect(page).toHaveURL('/unauthorized');

⚡ 19. Performance Check (Basic)

💻 Example

const start = Date.now();
await page.goto('/');
console.log(Date.now() - start);

Essential Linux Commands for Git Terminal

📁 1. File & Directory Navigation

1. `pwd`

Description: Shows the current working directory path.

pwd

2. `ls`

Description: Lists files and directories.

ls
ls -la   # detailed list including hidden files

3. `cd`

Description: Changes directory.

cd project-folder
cd ..        # move up one directory
cd ~         # go to home directory

📂 2. File & Directory Management

4. `mkdir`

Description: Creates a new directory.

mkdir my-repo

5. `rmdir`

Description: Removes an empty directory.

rmdir my-repo

6. `rm`

Description: Deletes files or directories.

rm file.txt
rm -r folder/    # remove directory recursively

7. `cp`

Description: Copies files or directories.

cp file.txt backup.txt
cp -r folder/ new-folder/

8. `mv`

Description: Moves or renames files.

mv file.txt newname.txt
mv file.txt folder/

📝 3. File Viewing & Editing

9. `cat`

Description: Displays file content.

cat README.md

10. `less`

Description: Views large files page by page.

less README.md

11. `nano`

Description: Simple terminal text editor.

nano file.txt

12. `vim`

Description: Advanced text editor.

vim file.txt

🔍 4. Search & Filtering

13. `grep`

Description: Searches text in files.

grep "function" file.js

14. `find`

Description: Finds files/directories.

find . -name "index.js"

⚙️ 5. Permissions & Ownership

15. `chmod`

Description: Changes file permissions.

chmod 755 script.sh

16. `chown`

Description: Changes file ownership.

chown user:user file.txt

🌐 6. Networking (Useful for Git)

17. `ssh`

Description: Connects securely to remote servers (used for GitHub SSH).

ssh -T git@github.com

18. `curl`

Description: Transfers data from URLs.

curl https://api.github.com

🧰 7. Archive & Compression

19. `tar`

Description: Creates/extracts archives.

tar -cvf project.tar folder/
tar -xvf project.tar

20. `zip` / `unzip`

Description: Compresses and extracts zip files.

zip -r project.zip folder/
unzip project.zip

🧪 8. System & Process Commands

21. `clear`

Description: Clears the terminal screen.

clear

22. `history`

Description: Shows previously used commands.

history

23. `top`

Description: Displays running processes.

top

🔄 How These Help in Git Workflow

When working with Git, these Linux commands help you:

Navigate to repositories (cd, ls)
Create/manage project files (mkdir, rm, cp)
Edit code before committing (nano, vim)
Inspect changes (cat, less)
Search code (grep, find)
Handle SSH authentication (ssh)

🚀 Example Git Workflow with Linux Commands

mkdir my-project
cd my-project
git inittouch README.md
nano README.mdgit add .
git commit -m "Initial commit"

JavaScript String Fundamentals

A string in JavaScript is a sequence of characters used to represent text.

✅ Ways to create strings

let str1 = "Hello";
let str2 = 'World';
let str3 = `Hello World`; // Template literal

String Methods

🔹 1. `length`

Description: Returns the number of characters in a string.

let str = "Hello";
console.log(str.length); // 5

🔹 2. `toUpperCase()`

Description: Converts all characters to uppercase.

"hello".toUpperCase(); // "HELLO"

🔹 3. `toLowerCase()`

Description: Converts all characters to lowercase.

"HELLO".toLowerCase(); // "hello"

🔹 4. `trim()`

Description: Removes whitespace from both ends.

"  hi  ".trim(); // "hi"

🔹 5. `trimStart()` / `trimEnd()`

Description: Removes whitespace from start or end only.

"  hi".trimStart(); // "hi"
"hi  ".trimEnd();   // "hi"

🔹 6. `includes(substring)`

Description: Checks if string contains a substring → returns true/false.

"JavaScript".includes("Script"); // true

🔹 7. `startsWith()`

Description: Checks if string starts with given value.

"Hello".startsWith("He"); // true

🔹 8. `endsWith()`

Description: Checks if string ends with given value.

"Hello".endsWith("lo"); // true

🔹 9. `indexOf()`

Description: Returns first index of substring, or -1 if not found.

"Hello".indexOf("l"); // 2

🔹 10. `lastIndexOf()`

Description: Returns last occurrence index.

"Hello".lastIndexOf("l"); // 3

🔹 11. `slice(start, end)`

Description: Extracts part of string (supports negative index).

"JavaScript".slice(0, 4); // "Java"
"Hello".slice(-2); // "lo"

🔹 12. `substring(start, end)`

Description: Similar to slice() but does not accept negative index.

"JavaScript".substring(4, 10); // "Script"

🔹 13. `substr(start, length)` ⚠️ Deprecated

Description: Extracts substring using length (not recommended now).

"Hello".substr(1, 3); // "ell"

🔹 14. `replace(search, value)`

Description: Replaces first match.

"Hello World".replace("World", "JS"); // "Hello JS"

🔹 15. `replaceAll()`

Description: Replaces all occurrences.

"a-b-c".replaceAll("-", ","); // "a,b,c"

🔹 16. `split(separator)`

Description: Converts string into array.

"a,b,c".split(","); // ["a", "b", "c"]

🔹 17. `concat()`

Description: Joins two or more strings.

"Hello".concat(" ", "World"); // "Hello World"

🔹 18. `charAt(index)`

Description: Returns character at given index.

"Hello".charAt(1); // "e"

🔹 19. `charCodeAt(index)`

Description: Returns Unicode value of character.

"A".charCodeAt(0); // 65

🔹 20. `repeat(n)`

Description: Repeats string n times.

"Hi ".repeat(3); // "Hi Hi Hi "

🔹 21. `padStart(length, char)`

Description: Pads string from start.

"5".padStart(3, "0"); // "005"

🔹 22. `padEnd(length, char)`

Description: Pads string from end.

"5".padEnd(3, "0"); // "500"

🔹 23. `match(regex)`

Description: Returns matches based on regex.

"abc123".match(/\d+/); // ["123"]

🔹 24. `matchAll(regex)`

Description: Returns all matches (iterator).

[..."a1b2".matchAll(/\d/g)]; // ["1", "2"]

🔹 25. `search(regex)`

Description: Returns index of first match.

"hello123".search(/\d/); // 5

🔹 26. `localeCompare()`

Description: Compares two strings (useful for sorting).

"a".localeCompare("b"); // -1

🔹 27. `normalize()`

Description: Normalizes Unicode characters.

"é".normalize();

🔹 28. `valueOf()`

Description: Returns primitive string value.

let str = new String("hello");
str.valueOf(); // "hello"

🔹 29. `toString()`

Description: Converts object to string.

let str = new String("hello");
str.toString(); // "hello"

🔹 30. Template Literals (`)

Description: Allows interpolation and multi-line strings.

let name = "John";
console.log(`Hello ${name}`);

⚡ Quick Categorization

🔍 Search Methods

includes(), indexOf(), search()

✂️ Extract Methods

slice(), substring(), substr()

🔄 Modify Methods

replace(), replaceAll(), trim()

🔧 Utility Methods

split(), concat(), repeat()

🔡 Case Methods

toUpperCase(), toLowerCase()

🔥 20 JavaScript String Programs (with Solutions)

✅ 1. Reverse a string

let str = "hello";
let reversed = str.split("").reverse().join("");
console.log(reversed);

✅ 2. Check palindrome

let str = "madam";
let result = str === str.split("").reverse().join("");
console.log(result);

✅ 3. Count vowels

let str = "hello";
let count = str.match(/[aeiou]/gi)?.length || 0;
console.log(count);

✅ 4. Count consonants

let str = "hello";
let count = str.match(/[^aeiou]/gi).length;
console.log(count);

✅ 5. Remove spaces

let str = "h e l l o";
console.log(str.replaceAll(" ", ""));

✅ 6. Convert first letter to uppercase

let str = "hello";
console.log(str.charAt(0).toUpperCase() + str.slice(1));

✅ 7. Find longest word

let str = "I love JavaScript programming";
let words = str.split(" ");
let longest = words.reduce((a, b) => a.length > b.length ? a : b);
console.log(longest);

✅ 8. Count words

let str = "Hello world JS";
console.log(str.split(" ").length);

✅ 9. Check substring exists

let str = "JavaScript";
console.log(str.includes("Script"));

✅ 10. Replace all vowels with *

let str = "hello";
console.log(str.replace(/[aeiou]/gi, "*"));

✅ 11. Convert string to array

let str = "hello";
console.log(str.split(""));

✅ 12. Remove duplicate characters

let str = "aabbcc";
let unique = [...new Set(str)].join("");
console.log(unique);

✅ 13. Count character frequency

let str = "hello";
let obj = {};
for (let ch of str) {
  obj[ch] = (obj[ch] || 0) + 1;
}
console.log(obj);

✅ 14. Check anagram

let a = "listen";
let b = "silent";let result = a.split("").sort().join("") === b.split("").sort().join("");
console.log(result);

✅ 15. Capitalize each word

let str = "hello world";
let result = str.split(" ").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
console.log(result);

✅ 16. Extract numbers from string

let str = "abc123xyz";
console.log(str.match(/\d+/)[0]);

✅ 17. Check if string contains only digits

let str = "12345";
console.log(/^\d+$/.test(str));

✅ 18. Repeat string N times

let str = "hi";
console.log(str.repeat(3));

✅ 19. Truncate string

let str = "JavaScript";
console.log(str.slice(0, 4));

✅ 20. Convert string to title case

let str = "javascript is fun";
let result = str.split(" ")
  .map(w => w[0].toUpperCase() + w.slice(1))
  .join(" ");
console.log(result);

Github Interview Questions And Answers

1. What is GitHub? How is it different from Git?

👉 Answer:

Git is a distributed version control system used to track code changes.
GitHub is a cloud-based platform that hosts Git repositories and adds collaboration features.

👉 Use Case:
In a team project, developers use Git locally and push code to GitHub for collaboration, reviews, and CI/CD.

2. What is a Repository?

👉 Answer:
A repository (repo) is a storage space for your project that contains code, files, and version history.

👉 Use Case:
You create a repo for a Playwright automation project where all test scripts, configs, and reports are stored.

3. What is the difference between Fork and Clone?

👉 Answer:

Fork: Copy of someone else’s repo into your GitHub account.
Clone: Copy of a repo to your local machine.

👉 Use Case:

Fork: Contributing to open-source.
Clone: Working on your team project locally.

4. What is a Branch?

👉 Answer:
A branch is a separate line of development.

👉 Use Case:
You create:

main → production code
feature/login-test → new feature work

5. What is a Pull Request (PR)?

👉 Answer:
A PR is a request to merge changes from one branch to another.

👉 Use Case:
QA automation engineer raises a PR after adding test cases → Developer reviews → merges into main.

6. What is Merge Conflict?

👉 Answer:
Occurs when Git cannot automatically merge changes.

👉 Use Case:
Two developers modify the same file → conflict → manually resolved before merge.

7. What is GitHub Actions?

👉 Answer:
A CI/CD tool in GitHub used to automate workflows.

👉 Use Case:

Run Playwright tests automatically on every PR
Deploy app after merge

8. What is .gitignore?

👉 Answer:
A file that specifies which files Git should ignore.

👉 Use Case:
Ignore:

node_modules/
test-results/
.env

9. What is Git Workflow (Branching Strategy)?

👉 Answer:
A process defining how teams use branches.

👉 Common strategies:

Git Flow
Feature Branch Workflow

👉 Use Case:

Create feature branch
Push code
Raise PR
Review → Merge

10. What is Staging in Git?

👉 Answer:
Intermediate area before committing changes.

👉 Commands:

git add .
git commit -m "message"

👉 Use Case:
You selectively add only required files before committing.

11. Difference between Commit and Push?

👉 Answer:

Commit: Save changes locally
Push: Upload changes to GitHub

👉 Use Case:
You commit multiple times locally → push once after testing.

12. What is Rebase vs Merge?

👉 Answer:

Merge: Keeps history (creates merge commit)
Rebase: Rewrites history (linear)

👉 Use Case:
Rebase keeps clean commit history before merging feature branch.

13. What is Tag in Git?

👉 Answer:
A tag marks a specific version of code.

👉 Use Case:
Mark releases like:

v1.0
v2.0

14. What is Git Stash?

👉 Answer:
Temporarily saves uncommitted changes.

👉 Use Case:
You are working on a feature but need to switch branches quickly.

15. What is Code Review in GitHub?

👉 Answer:
Process of reviewing code before merging.

👉 Use Case:

Developer checks logic
QA verifies test coverage
Ensures code quality

🔹 Scenario-Based GitHub Interview Questions

16. You pushed wrong code to main branch. What will you do?

👉 Answer:

Revert commit:

git revert <commit-id>

Reset (if safe):

git reset --hard HEAD~1

👉 Best Practice:
Avoid direct commits to main → use PR workflow.

17. Multiple developers working on same feature. How to manage?

👉 Answer:

Use feature branches
Regularly pull latest changes
Resolve conflicts early

👉 Use Case:
Each dev works on sub-features → merged via PR.

18. How do you handle large files in GitHub?

👉 Answer:
Use Git LFS (Large File Storage).

👉 Use Case:
Store large test data or binaries.

19. How do you secure sensitive data in GitHub?

👉 Answer:

Never commit secrets
Use GitHub Secrets
Use .gitignore

👉 Use Case:
Store API keys in environment variables.

20. Explain CI/CD pipeline using GitHub Actions

👉 Answer:

Code pushed to GitHub
Workflow triggers
Build runs
Tests execute
Deploy

👉 Use Case:
Playwright tests run automatically on every commit.

🔹 Advanced Practical Questions

21. How do you revert a specific file to previous version?

git checkout <commit-id> -- file.js

22. How do you squash commits?

git rebase -i HEAD~3

👉 Combine multiple commits into one.

23. What is Detached HEAD?

👉 Answer:
When you’re not on any branch.

👉 Use Case:
Checking old commit without affecting current branch.

24. How do you delete a branch?

git branch -d branch-name
git push origin --delete branch-name

25. What is Upstream in Git?

👉 Answer:
Reference to original repository (especially in forks).

👉 Use Case:
Keep your fork updated with original repo.

Mock Interview: GitHub (Real Company Style)

🔹 Round 1: Basics + Practical Understanding

❓ Q1: Explain your GitHub workflow in your current project.

👉 Strong Answer:

“We follow a feature branch workflow. Each task starts with a new branch from main. After development, we push code and raise a pull request. CI runs automatically using GitHub Actions. After code review and approvals, we merge into main. Direct commits to main are restricted.”

👉 What interviewer checks:

Real experience
Collaboration understanding
CI/CD awareness

❓ Q2: What happens when you run `git push`?

👉 Strong Answer:

“It uploads local commits from my machine (using Git) to the remote repository on GitHub, making them available to the team.”

👉 Follow-up trap:
👉 “What if push is rejected?”

✔️ Answer:

“It usually means my branch is behind. I pull the latest changes, resolve conflicts if any, and push again.”

🔹 Round 2: Scenario-Based Questions

❓ Q3: You and another developer changed the same file. Your PR shows conflict. What do you do?

👉 Strong Answer:

“I pull the latest changes from main, resolve conflicts locally, test the code, commit the fix, and push again to update the PR.”

👉 Bonus point:
Mention testing after conflict resolution.

❓ Q4: You accidentally pushed sensitive data (API key) to GitHub. What will you do?

👉 Strong Answer:

“First, I revoke the key immediately. Then I remove it from the repository, rewrite history if needed, and ensure it’s added to .gitignore. Going forward, I store secrets using GitHub Secrets.”

👉 What interviewer checks:

Security awareness
Real-world handling

❓ Q5: Your teammate’s PR broke the build. What should happen?

👉 Strong Answer:

“The CI pipeline should fail automatically. The PR should not be merged until the issue is fixed. We enforce required checks before merging.”

👉 Extra credit:
Mention branch protection rules.

🔹 Round 3: CI/CD + Automation (Very Important)

❓ Q6: How do you integrate automation tests with GitHub?

👉 Strong Answer:

“We use GitHub Actions to trigger Playwright tests on every PR. The workflow installs dependencies, runs tests, and publishes reports.”

👉 Example flow:

PR created
Tests run automatically
Pass → merge allowed
Fail → fix required

❓ Q7: How do you ensure code quality before merging?

👉 Strong Answer:

“We use a combination of:

Pull request reviews
Automated tests
Linting checks
CI validation

Only after all checks pass, the PR is merged.”

🔹 Round 4: Advanced Problem Solving

❓ Q8: Your `main` branch is broken after a merge. What will you do?

👉 Strong Answer:

“I would quickly identify the faulty commit and revert it using git revert. Then fix the issue in a new branch and raise another PR.”

👉 Important:
Avoid rewriting history in shared branches.

❓ Q9: How do you handle multiple environments (dev, staging, prod)?

👉 Strong Answer:

“We use different branches or deployment workflows. For example:

develop → dev environment
main → production
CI/CD pipelines deploy automatically based on branch.”

❓ Q10: How do you manage large teams working on the same repo?

👉 Strong Answer:

“We use:

Feature branches
Clear naming conventions
Code owners
Mandatory PR reviews
CI/CD checks

This ensures smooth collaboration and avoids conflicts.”

🔹 Round 5: Rapid Fire (Quick Checks)

❓ Difference between Fork and Clone?

👉 Fork = copy on GitHub
👉 Clone = copy on local machine

❓ What is HEAD in Git?

👉 Pointer to the current commit/branch

❓ What is Rebase?

👉 Rewrites commit history to make it linear

❓ What is Stash?

👉 Temporarily saves uncommitted changes

❓ What is a Tag?

👉 Marks a release/version

🔹 Real Interview Challenge (Hands-On Thinking)

❓ Q11: Design a GitHub workflow for automation testing.

👉 Strong Answer:

“I would:

Trigger workflow on PR and push
Install dependencies
Run Playwright tests
Generate reports
Upload artifacts
Fail build if tests fail

This ensures only tested code gets merged.”

🔹 Final HR + Practical Question

❓ Q12: Tell me a real problem you faced in GitHub and how you solved it.

👉 Sample Answer:

“We had frequent merge conflicts due to long-running branches. I suggested smaller PRs and frequent rebasing. This reduced conflicts and improved deployment speed.”

Playwright Save Login Session with POM

Here’s a complete, real-world Playwright POM framework showing how to:

Login once using beforeAll
Share the session across tests
Use Page Object Model (POM)
Follow best practices for scalability

✅ 1. Project Structure (Recommended)

playwright-project/
│
├── tests/
│   ├── login.setup.ts        # Login once & save session
│   ├── example.spec.ts       # Actual test cases
│
├── pages/
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
│
├── utils/
│   ├── baseTest.ts           # Custom fixture (optional advanced)
│
├── playwright.config.ts
└── package.json

✅ 2. Login Page (POM)

`pages/LoginPage.ts`

import { Page } from '@playwright/test';export class LoginPage {
  readonly page: Page;  constructor(page: Page) {
    this.page = page;
  }  async navigate() {
    await this.page.goto('https://example.com/login');
  }  async login(username: string, password: string) {
    await this.page.fill('#username', username);
    await this.page.fill('#password', password);
    await this.page.click('#loginBtn');
  }
}

✅ 3. Dashboard Page (POM)

`pages/DashboardPage.ts`

import { Page, expect } from '@playwright/test';export class DashboardPage {
  readonly page: Page;  constructor(page: Page) {
    this.page = page;
  }  async verifyDashboardLoaded() {
    await expect(this.page.locator('h1')).toHaveText('Dashboard');
  }
}

✅ 4. Login Setup (Runs Once Before All Tests)

👉 This is the key part (beforeAll session handling)

`tests/login.setup.ts`

import { test as setup } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';setup('Login and save session', async ({ page }) => {
  const loginPage = new LoginPage(page);  await loginPage.navigate();
  await loginPage.login('testuser', 'password123');  // Save session
  await page.context().storageState({ path: 'storageState.json' });
});

✅ 5. Playwright Config (Use Stored Session)

`playwright.config.ts`

import { defineConfig } from '@playwright/test';export default defineConfig({
  testDir: './tests',  use: {
    baseURL: 'https://example.com',
    storageState: 'storageState.json', // reuse login session
    headless: false
  },  projects: [
    {
      name: 'setup',
      testMatch: /login\.setup\.ts/,
    },
    {
      name: 'tests',
      dependencies: ['setup'], // ensures login runs first
      testMatch: /.*\.spec\.ts/,
    },
  ],
});

✅ 6. Test File (Uses Shared Session)

`tests/example.spec.ts`

import { test } from '@playwright/test';
import { DashboardPage } from '../pages/DashboardPage';test.describe('Dashboard Tests', () => {  test.beforeAll(async () => {
    console.log('Runs once before all tests');
  });  test('Verify dashboard page', async ({ page }) => {
    const dashboard = new DashboardPage(page);    await page.goto('/dashboard');
    await dashboard.verifyDashboardLoaded();
  });  test('Another test using same session', async ({ page }) => {
    await page.goto('/dashboard/settings');
    console.log('User is already logged in');
  });});

✅ 7. How This Works (Important)

🔹 Flow:

login.setup.ts runs first
Logs in and saves session → storageState.json
All test files reuse this session
No repeated login → faster execution

✅ 8. Alternative: Using `beforeAll` Without storageState (Not Recommended)

test.beforeAll(async ({ browser }) => {
  const context = await browser.newContext();
  const page = await context.newPage();  await page.goto('/login');
  await page.fill('#username', 'user');
  await page.fill('#password', 'pass');
  await page.click('#loginBtn');  // ❌ This session is NOT shared across tests automatically
});

👉 Problem:

Each test gets a new context
Session is NOT reused

✅ 9. Best Practice Summary

✔ Use storageState (Recommended)
✔ Keep login logic in setup file
✔ Use POM for maintainability
✔ Use project dependencies
✔ Avoid login in every test

✅ 10. Pro Tips (Real Project)

Store credentials in .env
Use multiple storage states for multi-users
Use fixtures for advanced reuse
Add retry logic for flaky login

Here’s a complete, real-world Playwright setup for multi-user session handling (Admin + User) using POM + storageState + project dependencies.

This is how teams handle role-based testing at scale.

✅ 1. Goal

We want to:

Login as Admin
Login as Normal User
Save both sessions separately
Run tests using either role without logging in again

✅ 2. Project Structure

playwright-project/
│
├── tests/
│   ├── setup/
│   │   ├── admin.setup.ts
│   │   ├── user.setup.ts
│   │
│   ├── admin.spec.ts
│   ├── user.spec.ts
│
├── pages/
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
│
├── storage/
│   ├── adminState.json
│   ├── userState.json
│
├── playwright.config.ts

✅ 3. Login Page (Reusable POM)

`pages/LoginPage.ts`

import { Page } from '@playwright/test';export class LoginPage {
  constructor(private page: Page) {}  async navigate() {
    await this.page.goto('/login');
  }  async login(username: string, password: string) {
    await this.page.fill('#username', username);
    await this.page.fill('#password', password);
    await this.page.click('#loginBtn');
  }
}

✅ 4. Admin Login Setup

`tests/setup/admin.setup.ts`

import { test as setup } from '@playwright/test';
import { LoginPage } from '../../pages/LoginPage';setup('Login as Admin', async ({ page }) => {
  const login = new LoginPage(page);  await login.navigate();
  await login.login('adminUser', 'adminPass');  await page.context().storageState({
    path: 'storage/adminState.json',
  });
});

✅ 5. User Login Setup

`tests/setup/user.setup.ts`

import { test as setup } from '@playwright/test';
import { LoginPage } from '../../pages/LoginPage';setup('Login as User', async ({ page }) => {
  const login = new LoginPage(page);  await login.navigate();
  await login.login('normalUser', 'userPass');  await page.context().storageState({
    path: 'storage/userState.json',
  });
});

✅ 6. Playwright Config (Multi-User Projects)

`playwright.config.ts`

import { defineConfig } from '@playwright/test';export default defineConfig({
  testDir: './tests',  use: {
    baseURL: 'https://example.com',
    headless: false,
  },  projects: [
    // 🔹 Admin Setup
    {
      name: 'admin-setup',
      testMatch: /admin\.setup\.ts/,
    },    // 🔹 User Setup
    {
      name: 'user-setup',
      testMatch: /user\.setup\.ts/,
    },    // 🔹 Admin Tests
    {
      name: 'admin-tests',
      dependencies: ['admin-setup'],
      use: {
        storageState: 'storage/adminState.json',
      },
      testMatch: /admin\.spec\.ts/,
    },    // 🔹 User Tests
    {
      name: 'user-tests',
      dependencies: ['user-setup'],
      use: {
        storageState: 'storage/userState.json',
      },
      testMatch: /user\.spec\.ts/,
    },
  ],
});

✅ 7. Admin Test Example

`tests/admin.spec.ts`

import { test, expect } from '@playwright/test';test('Admin can access admin panel', async ({ page }) => {
  await page.goto('/admin');  await expect(page.locator('h1')).toHaveText('Admin Dashboard');
});

✅ 8. User Test Example

`tests/user.spec.ts`

import { test, expect } from '@playwright/test';test('User cannot access admin panel', async ({ page }) => {
  await page.goto('/admin');  await expect(page.locator('text=Access Denied')).toBeVisible();
});

✅ 9. Advanced: Use Fixtures (Cleaner Approach)

👉 Create a reusable fixture for roles

`utils/fixtures.ts`

import { test as base } from '@playwright/test';export const test = base.extend<{
  adminPage: any;
  userPage: any;
}>({
  adminPage: async ({ browser }, use) => {
    const context = await browser.newContext({
      storageState: 'storage/adminState.json',
    });
    const page = await context.newPage();
    await use(page);
    await context.close();
  },  userPage: async ({ browser }, use) => {
    const context = await browser.newContext({
      storageState: 'storage/userState.json',
    });
    const page = await context.newPage();
    await use(page);
    await context.close();
  },
});

Use Fixture in Test

import { test } from '../utils/fixtures';test('Admin vs User behavior', async ({ adminPage, userPage }) => {
  await adminPage.goto('/dashboard');
  await userPage.goto('/dashboard');  console.log('Both sessions running in parallel');
});

✅ 10. Key Benefits

✔ No repeated login
✔ Faster test execution
✔ Role-based validation
✔ Parallel execution ready
✔ Clean separation of concerns

🚀 Real-World Use Cases

Admin vs Customer flows
RBAC (Role-Based Access Control) testing
Multi-tenant apps
Permission validation

⚠️ Common Mistakes

❌ Using same storageState for all users
❌ Logging in inside every test
❌ Hardcoding credentials
❌ Not using project dependencies

✅ Pro Tips

Use .env for credentials
Add API login for speed
Rotate test users (avoid blocking)
Keep session fresh (auto re-login if expired)

JavaScript Function

What is a Function in JavaScript?

A function is a block of code designed to perform a specific task. It runs only when it is called (invoked).

🔹 Basic Function Syntax

function functionName(parameters) {
    // code to execute
    return result;
}

🔹 1. Simple Function Example

function greet() {
    console.log("Hello, Welcome!");
}greet(); // calling function

👉 Output:

Hello, Welcome!

🔹 2. Function with Parameters

function greetUser(name) {
    console.log("Hello " + name);
}greetUser("Deepesh");

👉 Output:

Hello Deepesh

🔹 3. Function with Return Value

function add(a, b) {
    return a + b;
}let result = add(5, 3);
console.log(result);

👉 Output:

🔹 4. Function Expression

A function can also be stored in a variable.

const multiply = function(a, b) {
    return a * b;
};console.log(multiply(4, 5));

👉 Output:

🔹 5. Arrow Function (Modern Way)

Short syntax introduced in ES6.

const subtract = (a, b) => {
    return a - b;
};console.log(subtract(10, 4));

👉 Short version:

const subtract = (a, b) => a - b;

🔹 6. Default Parameters

function greet(name = "Guest") {
    console.log("Hello " + name);
}greet();        // Hello Guest
greet("Ram");   // Hello Ram

🔹 7. Function with Multiple Parameters

function userInfo(name, age, city) {
    console.log(name + " is " + age + " years old from " + city);
}userInfo("Deepesh", 25, "Bhopal");

🔹 8. Callback Function

A function passed as an argument to another function.

function processUser(name, callback) {
    console.log("Processing " + name);
    callback();
}function done() {
    console.log("Completed!");
}processUser("Deepesh", done);

🔹 9. Anonymous Function

A function without a name.

setTimeout(function() {
    console.log("Executed after 2 seconds");
}, 2000);

🔹 10. Immediately Invoked Function (IIFE)

Runs immediately after definition.

(function() {
    console.log("IIFE executed");
})();

🔹 11. Function Scope

Variables inside a function are not accessible outside.

function testScope() {
    let x = 10;
    console.log(x);
}testScope();
// console.log(x); ❌ Error

🔹 12. Rest Parameters

Used to handle multiple arguments.

function sum(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}console.log(sum(1, 2, 3, 4));

🔹 13. Higher-Order Function

Function that takes another function or returns one.

function calculator(a, b, operation) {
    return operation(a, b);
}const add = (x, y) => x + y;console.log(calculator(5, 3, add));

🔹 Real-World Usage

Functions are used in:

🔹 Form validation
🔹 API calls
🔹 Event handling (click, submit)
🔹 Reusable utilities
🔹 Automation scripts (like Playwright tests)

🔹 Example: Real Use Case (Form Validation)

function validateEmail(email) {
    return email.includes("@");
}function submitForm(email) {
    if (validateEmail(email)) {
        console.log("Form submitted");
    } else {
        console.log("Invalid email");
    }
}submitForm("test@gmail.com");

🔹 Best Practices

✔ Use meaningful function names
✔ Keep functions small and focused
✔ Use arrow functions for short logic
✔ Avoid global variables
✔ Always return values when needed

🔹 Summary

Functions make code reusable
Can take inputs (parameters)
Can return outputs
Support modern syntax (arrow functions)
Essential for real-world JavaScript development

JavaScript Loop Programs with Solutions

Print numbers from 1 to 10 (Basic `for`)

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

2️⃣ Print numbers from 10 to 1 (Reverse loop)

for (let i = 10; i >= 1; i--) {
  console.log(i);
}

3️⃣ Print even numbers (Loop with `if`)

for (let i = 1; i <= 20; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

4️⃣ Print odd numbers (Loop with `if`)

for (let i = 1; i <= 20; i++) {
  if (i % 2 !== 0) {
    console.log(i);
  }
}

5️⃣ Sum of numbers from 1 to 10

let sum = 0;for (let i = 1; i <= 10; i++) {
  sum += i;
}console.log(sum);

6️⃣ Multiplication table of 5

for (let i = 1; i <= 10; i++) {
  console.log(`5 x ${i} = ${5 * i}`);
}

7️⃣ Nested loop: Print square pattern

for (let i = 1; i <= 3; i++) {
  let row = "";
  for (let j = 1; j <= 3; j++) {
    row += "* ";
  }
  console.log(row);
}

8️⃣ Nested loop: Number pattern

for (let i = 1; i <= 3; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += j + " ";
  }
  console.log(row);
}

9️⃣ `while` loop: Print 1 to 5

let i = 1;while (i <= 5) {
  console.log(i);
  i++;
}

🔟 `while` loop: Sum of first 5 numbers

let i = 1;
let sum = 0;while (i <= 5) {
  sum += i;
  i++;
}console.log(sum);

1️⃣1️⃣ `do...while`: Print 1 to 5

let i = 1;do {
  console.log(i);
  i++;
} while (i <= 5);

1️⃣2️⃣ `do...while`: Run at least once

let i = 10;do {
  console.log(i);
} while (i < 5);

1️⃣3️⃣ `forEach`: Print array elements

let arr = [10, 20, 30];arr.forEach(num => console.log(num));

1️⃣4️⃣ `forEach`: Sum of array

let arr = [1, 2, 3, 4];
let sum = 0;arr.forEach(num => {
  sum += num;
});console.log(sum);

1️⃣5️⃣ Loop through string (characters)

let str = "Hello";for (let char of str) {
  console.log(char);
}

1️⃣6️⃣ Count vowels in a string

let str = "javascript";
let count = 0;for (let char of str) {
  if ("aeiou".includes(char)) {
    count++;
  }
}console.log(count);

1️⃣7️⃣ Loop through array using `for`

let arr = [5, 10, 15];for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

1️⃣8️⃣ Find largest number in array

let arr = [10, 5, 20, 8];
let max = arr[0];for (let i = 1; i < arr.length; i++) {
  if (arr[i] > max) {
    max = arr[i];
  }
}console.log(max);

1️⃣9️⃣ Loop through object properties (`for...in`)

let person = {
  name: "John",
  age: 25,
  city: "Delhi"
};for (let key in person) {
  console.log(key + ": " + person[key]);
}

2️⃣0️⃣ Count properties in an object

let obj = {
  a: 1,
  b: 2,
  c: 3
};let count = 0;for (let key in obj) {
  count++;
}console.log(count);

JavaScript Loop Fundamentals

Loops allow you to execute code repeatedly based on a condition.

1️⃣ Basic `for` Loop

👉 Example:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

💡 Output:

1 2 3 4 5

2️⃣ Loop with `if` Condition

👉 Example: Print even numbers

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

💡 Output:

2 4 6 8 10

3️⃣ Nested `for` Loop

👉 Example: Pattern (matrix)

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`Row ${i}, Column ${j}`);
  }
}

💡 Concept:

Outer loop → rows
Inner loop → columns

4️⃣ `while` Loop

👉 Example:

let i = 1;while (i <= 5) {
  console.log(i);
  i++;
}

💡 Use case:

When iteration count is unknown

5️⃣ `do...while` Loop

👉 Example:

let i = 1;do {
  console.log(i);
  i++;
} while (i <= 5);

💡 Key Point:

Executes at least once

6️⃣ `forEach` Loop (Array Only)

👉 Example:

let arr = [10, 20, 30];arr.forEach((value, index) => {
  console.log(index, value);
});

7️⃣ Loop with String Datatype

A string is iterable, so you can loop through characters.

👉 Example using `for`

let str = "Hello";for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

👉 Example using `for...of`

for (let char of "Hello") {
  console.log(char);
}

💡 Output:

H e l l o

8️⃣ Loop with Array Datatype

👉 Example using `for`

let numbers = [1, 2, 3, 4];for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

👉 Example using `for...of`

for (let num of numbers) {
  console.log(num);
}

👉 Example using `forEach`

numbers.forEach(num => console.log(num));

9️⃣ Loop with Object Datatype

Objects are not directly iterable like arrays, but we use for...in.

👉 Example:

let person = {
  name: "John",
  age: 25,
  city: "Delhi"
};for (let key in person) {
  console.log(key, person[key]);
}

💡 Output:

name John
age 25
city Delhi

🔥 Summary Table

Loop Type	Best Use Case
`for`	Fixed iterations
`while`	Unknown iterations
`do...while`	Runs at least once
`forEach`	Arrays
`for...of`	Arrays & strings
`for...in`	Objects

Common Mistakes

❌ Infinite Loop

for (let i = 1; i <= 5; ) {
  // missing increment
}

❌ Wrong Object Loop

for (let item of person) // ❌ Error

✔ Correct:

for (let key in person)

✅ Practice Ideas

Reverse a string using loop
Find largest number in array
Count vowels in string
Print object keys and values
Create star pattern using nested loop

GitHub Fundamentals

1. What is GitHub?

GitHub is a platform to store, manage, and collaborate on code.
It uses Git (a version control system).

👉 Think of GitHub as:

“Google Drive for code + collaboration tools for developers”

2. What is Git?

Git tracks changes in your code.
Helps you:
- Save versions
- Undo mistakes
- Work with teams

3. Repository (Repo)

A repository is a project folder stored on GitHub.

Example:

my-project/
 ├── index.html
 ├── style.css
 └── script.js

👉 This entire folder = 1 repository

4. Clone a Repository

Copy a GitHub repo to your local machine.

Command:

git clone https://github.com/user/project.git

Example:

git clone https://github.com/deepesh/my-app.git

5. Basic Git Workflow

The most important concept 👇

Working Directory → Staging Area → Repository

Steps:

git add file.js      # Add file to staging
git commit -m "Added feature"   # Save changes
git push            # Upload to GitHub

6. Commit

A commit is a snapshot of your code.

Example:

git commit -m "Fixed login bug"

👉 Good commit message = clear + meaningful

7. Branch

A branch lets you work on features without affecting main code.

Example:

git branch feature-login
git checkout feature-login

Or shortcut:

git checkout -b feature-login

8. Merge

Combine changes from one branch into another.

Example:

git checkout main
git merge feature-login

9. Pull Request (PR)

A Pull Request is used to merge code on GitHub.
You request others to review your code.

👉 Workflow:

Create branch
Push code
Open PR
Review → Merge

10. Push & Pull

Push (upload changes):

git push origin main

Pull (get latest changes):

git pull origin main

11. Fork

A fork is a copy of someone else’s repository.

👉 Used in open-source contributions.

12. .gitignore

Tells Git which files to ignore.

Example:

node_modules/
.env
*.log

13. Real Example Workflow

Let’s say you’re building a JavaScript project:

Step 1: Initialize repo

git init

Step 2: Add files

git add .

Step 3: Commit

git commit -m "Initial project setup"

Step 4: Connect GitHub

git remote add origin https://github.com/user/project.git

Step 5: Push

git push -u origin main

14. Common Commands Cheat Sheet

Command	Purpose
`git init`	Start repo
`git clone`	Copy repo
`git add`	Stage changes
`git commit`	Save changes
`git push`	Upload
`git pull`	Download updates
`git branch`	List branches
`git checkout`	Switch branch

15. Best Practices

✅ Commit often
✅ Use clear commit messages
✅ Use branches for features
✅ Pull before push
❌ Don’t push sensitive data

🎯 Mini Practice Exercise

Try this:

Create a folder
Add a file app.js
Run:
Push it to GitHub

git init
git add .
git commit -m "First commit"
git push

Pro Tip

Start with:

Personal projects
Practice branching + PRs

That’s how real developers learn GitHub fast.

16. GitHub Issues (Task Tracking)

Issues are used to track bugs, tasks, or feature requests.

Example:

You create an issue:

Title: Fix login error
Description: Login fails when password is incorrect

👉 You can:

Assign team members
Add labels (bug, feature, urgent)
Track progress

📌 17. Labels (Organizing Work)

Labels help categorize issues.

Example labels:

bug 🐛
enhancement 🚀
documentation 📄

👉 Helps teams quickly understand task types.

📊 18. GitHub Projects (Kanban Board)

GitHub provides project boards similar to Trello.

Example workflow:

To Do → In Progress → Done

👉 You can drag issues between columns.

🔐 19. README.md File

This is the first file people see in your repo.

Example:

# My AppThis is a simple JavaScript project.## Features
- Login system
- Dashboard

👉 A good README increases project visibility.

⚙️ 20. GitHub Actions (Automation)

GitHub Actions lets you automate workflows.

Example:

Run tests automatically when code is pushed.

name: Test App
on: [push]jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - run: echo "Running tests..."

👉 Used for:

CI/CD (Continuous Integration / Deployment)
Auto testing
Deployment

🔁 21. Pull vs Fetch

Git Pull:

git pull origin main

👉 Fetch + merge

Git Fetch:

git fetch

👉 Only downloads changes (no merge)

🔄 22. Merge Conflict (Important!)

Occurs when Git can’t merge automatically.

Example conflict:

<<<<<<< HEAD
console.log("Hello");
=======
console.log("Hi");
>>>>>>> branch

👉 You must manually fix it:

console.log("Hello Hi");

Then:

git add .
git commit -m "Resolved conflict"

🧪 23. Stash (Temporary Save)

Save changes without committing.

git stash

Restore:

git stash pop

👉 Useful when switching branches quickly.

📜 24. Git Log (History)

View commit history:

git log

Short version:

git log --oneline

⏪ 25. Undo Changes

Undo staged file:

git reset file.js

Undo last commit:

git reset --soft HEAD~1

Discard changes:

git checkout -- file.js

🌐 26. Remote Repository

Link your local repo to GitHub.

git remote add origin https://github.com/user/repo.git

Check:

git remote -v

🔒 27. SSH vs HTTPS

Two ways to connect GitHub:

HTTPS:

https://github.com/user/repo.git

SSH:

git@github.com:user/repo.git

👉 SSH is more secure (no need to enter password repeatedly)

📦 28. Fork + Clone + PR (Real Open Source Flow)

Step-by-step:

Fork repository on GitHub
Clone it:

git clone https://github.com/your-username/repo.git

Create branch:

git checkout -b fix-bug

Make changes + commit
Push:

git push origin fix-bug

Create Pull Request

👉 This is how open-source contributions work.

🧱 29. Rebase (Advanced Concept)

Instead of merge, you can use rebase for cleaner history.

git checkout feature
git rebase main

👉 Keeps history linear (no extra merge commits)

🏷️ 30. Tags (Versioning)

Used for releases.

git tag v1.0
git push origin v1.0

👉 Example:

v1.0 → first release
v2.0 → major update

Real-World Scenario (Important)

Scenario: Team Development

Developer A creates feature branch
Developer B works on another branch
Both create Pull Requests
Code review happens
Merge into main

👉 This prevents breaking the main codebase.

🧠 Pro Learning Tips

Practice daily with small repos
Break code → fix using Git
Try merge conflicts intentionally
Explore open-source repos

💻 Practice Tasks (Next Level)

Try these:

Create 2 branches and merge them
Create a merge conflict and resolve it
Use git stash while switching branches
Create a Pull Request on your own repo
Add a README with project details

JavaScript If-Condition Programs

Here are 20 JavaScript programs with solutions covering:
✔ if
✔ if-else
✔ if-else if
✔ nested if
✔ one-line (ternary) conditions

🔹 1. Positive number (if)

let num = 5;if (num > 0) {
  console.log("Positive");
}

🔹 2. Even or odd (if-else)

let num = 4;if (num % 2 === 0) {
  console.log("Even");
} else {
  console.log("Odd");
}

🔹 3. Voting eligibility (if-else)

let age = 16;if (age >= 18) {
  console.log("Eligible");
} else {
  console.log("Not eligible");
}

🔹 4. Largest of two numbers (if-else)

let a = 10, b = 20;if (a > b) {
  console.log("a is greater");
} else {
  console.log("b is greater");
}

🔹 5. Divisible by 3 (if)

let num = 9;if (num % 3 === 0) {
  console.log("Divisible by 3");
}

🔹 6. Grade system (if-else if)

let marks = 85;if (marks >= 90) {
  console.log("A");
} else if (marks >= 70) {
  console.log("B");
} else if (marks >= 50) {
  console.log("C");
} else {
  console.log("Fail");
}

🔹 7. Largest of three numbers (if-else if)

let a = 5, b = 8, c = 3;if (a > b && a > c) {
  console.log("a is largest");
} else if (b > c) {
  console.log("b is largest");
} else {
  console.log("c is largest");
}

🔹 8. Leap year (if-else)

let year = 2024;if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
  console.log("Leap year");
} else {
  console.log("Not leap year");
}

🔹 9. Check number range (if)

let num = 25;if (num >= 10 && num <= 50) {
  console.log("Within range");
}

🔹 10. Character type (if-else if)

let ch = 'A';if (ch >= 'A' && ch <= 'Z') {
  console.log("Uppercase");
} else if (ch >= 'a' && ch <= 'z') {
  console.log("Lowercase");
} else {
  console.log("Other");
}

🔹 11. Nested if (positive & even)

let num = 8;if (num > 0) {
  if (num % 2 === 0) {
    console.log("Positive and Even");
  }
}

🔹 12. Nested if (login system)

let username = "admin";
let password = "1234";if (username === "admin") {
  if (password === "1234") {
    console.log("Login successful");
  } else {
    console.log("Wrong password");
  }
} else {
  console.log("User not found");
}

🔹 13. Nested if (marks & distinction)

let marks = 75;if (marks >= 40) {
  if (marks >= 75) {
    console.log("Distinction");
  } else {
    console.log("Pass");
  }
} else {
  console.log("Fail");
}

🔹 14. One-line if (ternary)

let num = 10;console.log(num > 0 ? "Positive" : "Not positive");

🔹 15. One-line even/odd

let num = 7;console.log(num % 2 === 0 ? "Even" : "Odd");

🔹 16. One-line pass/fail

let marks = 35;console.log(marks >= 40 ? "Pass" : "Fail");

🔹 17. Multiple conditions (if)

let num = 15;if (num % 3 === 0 && num % 5 === 0) {
  console.log("Divisible by 3 and 5");
}

🔹 18. Temperature check (if-else if)

let temp = 30;if (temp > 40) {
  console.log("Hot");
} else if (temp > 20) {
  console.log("Warm");
} else {
  console.log("Cold");
}

🔹 19. Triangle validity (if)

let a = 3, b = 4, c = 5;if (a + b > c && a + c > b && b + c > a) {
  console.log("Valid triangle");
}

🔹 20. Simple calculator (if-else if)

let a = 10, b = 5;
let op = "+";if (op === "+") {
  console.log(a + b);
} else if (op === "-") {
  console.log(a - b);
} else if (op === "*") {
  console.log(a * b);
} else if (op === "/") {
  console.log(a / b);
} else {
  console.log("Invalid operator");
}

🟢 1. What is Playwright?

🟢 2. Why Playwright over Selenium?

🟢 3. How to install Playwright?

🟢 4. Basic Test Example

🟡 5. What is Auto-Waiting?

🟡 6. What are Locators?

🟡 7. Difference between locator() and page.$()

🟡 8. How to handle dropdowns?

🟡 9. Handling checkboxes

🟡 10. Handling alerts

🔵 11. How to handle multiple tabs?

🔵 12. File upload

🔵 13. File download

🔵 14. What is Page Object Model (POM)?

🔵 15. API Testing in Playwright

🔴 16. How to handle authentication?

🔴 17. Parallel Execution

🔴 18. Retry Failed Tests

🔴 19. How to handle dynamic elements?

🔴 20. Network Interception

🧠 Advanced Scenario-Based Questions

🔥 21. Banking App Login + OTP

🔥 22. E-commerce Add to Cart Flow

🔥 23. Handling Flaky Tests

🔥 24. Multi-user Session (Admin + User)

🔥 25. CI/CD Integration

26. What is Browser Context in Playwright?

🔴 27. Difference between Browser, Context, and Page

🔴 28. How to reuse login session across tests?

🔴 29. How to handle iFrames?

🔴 30. Shadow DOM handling

🔴 31. How to debug Playwright tests?

🔴 32. Trace Viewer in Playwright

🔴 33. How to capture screenshots?

🔴 34. How to record videos?

🔴 35. Handling dynamic waits (best approach)

🔴 36. Soft Assertions in Playwright

🔴 37. Hard vs Soft Assertions

🔴 38. How to run specific test file?

🔴 39. Run tests in headed mode

🔴 40. Environment configuration

🧠 Real-Time Scenario Questions (Very Important)

🔥 41. Scenario: Element is visible but click fails

🔥 42. Scenario: Test passes locally but fails in CI

🔥 43. Scenario: Handling infinite scrolling

🔥 44. Scenario: Validate table data

🔥 45. Scenario: Handling date picker

🔥 46. Scenario: Handling authentication popup

🔥 47. Scenario: Drag and Drop

🔥 48. Scenario: Handling file download validation

🔥 49. Scenario: Validate API response + UI

🔥 50. Scenario: Retry only failed tests

🎯 Advanced Framework Design Questions

🔷 51. How do you design a scalable Playwright framework?

🔷 52. What are fixtures in Playwright?

🔷 53. Data-driven testing

🔷 54. Parallel vs Serial execution

🔷 55. Tags in Playwright

⚠️ Tricky Interview Questions

❓ 56. Why Playwright is faster?

❓ 57. Can Playwright handle multiple browsers at once?

❓ 58. What happens if locator matches multiple elements?

❓ 59. Difference between waitForSelector and locator wait

❓ 60. How do you reduce flakiness?

🔥 61. Scenario: Banking App – Secure Login with Token

🔥 62. Scenario: Bypass CAPTCHA (Important Interview Question)

🔥 63. Scenario: Handling WebSocket Testing

🔥 64. Scenario: Test microservices-based UI

🔥 65. Scenario: Handling flaky network

🔥 66. Scenario: Validate PDF download content

🔥 67. Scenario: Multi-language testing

🔥 68. Scenario: Geo-location testing

🔥 69. Scenario: Timezone testing

🔥 70. Scenario: Testing notifications

🏗️ Framework Architecture Questions (Very Important)

🔷 71. How to design enterprise-level Playwright framework?

🔷 72. How to implement reusable utilities?

🔷 73. Centralized test data management

🔷 74. Logging in Playwright

🔷 75. Reporting tools

🟡 7. Difference between `locator()` and `page.$()`

❓ 59. Difference between `waitForSelector` and locator wait

❓ 91. Difference between `browser.newPage()` and `context.newPage()`

❓ 92. Why avoid `waitForTimeout()`?