AI Tools for QA Engineers

AI is transforming software testing and QA engineering by improving test creation, maintenance, bug analysis, reporting, and CI/CD automation. Modern QA engineers now use AI tools for:

Automated test generation
Self-healing locators
Visual testing
API testing
Test data generation
Root cause analysis
Intelligent reporting
Agentic test execution
Code assistance

Here are the top AI tools every QA engineer should know in 2026.

Best AI Tools for QA Engineers

1. ChatGPT by OpenAI

OpenAI

Best For

Test case generation
API automation support
SQL query writing
Bug analysis
Framework design
Playwright/Selenium code generation

Key Features

Generates automation scripts
Converts manual test cases into automated tests
Explains errors and stack traces
Creates test data
Generates BDD scenarios

Example Use Cases

Generate Playwright test scripts
Create JSON payloads
Write XPath/CSS locators
Convert requirements into test scenarios

Popular With

Playwright, Selenium, Cypress, REST Assured, Appium users

2. GitHub Copilot

GitHub

Best For

AI coding assistance inside IDEs

Key Features

Auto-completes test scripts
Suggests assertions
Generates reusable methods
Helps debug failing tests

Supported IDEs

VS Code
IntelliJ
WebStorm

Why QA Engineers Love It

Speeds up automation framework development significantly.

3. Cursor AI Editor

Cursor

Best For

AI-assisted automation framework development

Key Features

Entire codebase understanding
AI agent for debugging
Refactoring support
Multi-file updates

Excellent For

Large Playwright frameworks
API automation projects
CI/CD pipeline maintenance

NVIDIA reportedly uses Cursor internally across software development and QA workflows.

4. Applitools

Applitools

Best For

Visual testing and UI validation

Key Features

AI-powered visual comparison
Detects UI regressions
Cross-browser validation
Smart maintenance

Works With

Playwright
Selenium
Cypress
Appium

Major Advantage

Reduces flaky UI tests dramatically.

5. Testim

Testim

Best For

Low-code AI automation testing

Key Features

Self-healing locators
AI-based test stabilization
Fast UI test creation
Smart waits

Ideal For

Teams moving from manual to automation testing.

6. Mabl

Mabl

Best For

Cloud-based intelligent testing

Key Features

Auto-healing tests
API + UI testing
Performance monitoring
AI-generated insights

Strong Point

Excellent CI/CD integration.

7. QA Wolf

QA Wolf

Best For

End-to-end Playwright automation

Key Features

AI-generated Playwright tests
Managed testing platform
Parallel execution
Automatic maintenance

QA Wolf is considered one of the leading agentic testing tools in 2026.

8. KaneAI by LambdaTest

LambdaTest

Best For

Natural language test automation

Key Features

Write tests using English prompts
AI debugging
Cross-browser execution
Smart test generation

Example

“Login with valid credentials and verify dashboard.”

AI converts this into automation scripts.

9. BrowserStack Test Observability

BrowserStack

Best For

AI-driven test analytics

Key Features

Failure clustering
Root cause analysis
Test insights
Flaky test detection

Excellent For

Large enterprise automation suites.

10. Functionize

Functionize

Best For

Enterprise AI test automation

Key Features

NLP-based test creation
Self-healing
Cloud execution
Intelligent maintenance

Good Choice For

Large enterprise QA teams.

AI Tools for Specific QA Activities

QA Activity	Recommended AI Tools
Test Case Generation	ChatGPT, KaneAI, Testim
Playwright Automation	ChatGPT, Cursor, QA Wolf
Selenium Automation	GitHub Copilot, Testim
Visual Testing	Applitools
API Testing	ChatGPT, Postman AI
Self-Healing Tests	Mabl, Testim, Functionize
Bug Analysis	BrowserStack Observability
CI/CD Testing	Mabl, QA Wolf
Test Management	TestRail AI, Xray AI
Root Cause Analysis	BrowserStack, Launchable

AI Skills QA Engineers Should Learn

Essential Skills

Prompt engineering
AI-assisted coding
Automation framework architecture
API testing with AI
CI/CD integration
AI-generated test strategy

Recommended Learning Path

Beginner

ChatGPT
GitHub Copilot
Playwright + AI assistance

Intermediate

Applitools
Testim
BrowserStack AI

Advanced

Agentic AI testing tools
AI-based CI/CD pipelines
Autonomous testing systems

Most In-Demand AI + QA Combination

The hottest combination in 2026 is:

Playwright
AI agents
Self-healing automation
CI/CD pipelines
Cloud execution
Visual testing

Industry reports show AI-assisted QA is becoming mainstream across enterprise engineering teams.

Final Recommendation

If you are a QA engineer starting with AI today, focus on this stack first:

This combination gives you:

AI-assisted coding
Fast automation development
Smart debugging
Stable UI testing
Modern enterprise QA skills

Fundamentals of Agentic AI for Beginners

What is Agentic AI?

Agentic AI refers to AI systems that can:

Understand goals
Make decisions
Plan actions
Use tools
Execute tasks autonomously
Learn from results

Unlike traditional AI that only responds to prompts, Agentic AI behaves more like a digital assistant with reasoning abilities.

Example:

Traditional AI → Answers a question.
Agentic AI → Answers, searches data, creates files, sends reports, and retries if something fails.

Simple Definition

Agentic AI = AI + Decision Making + Planning + Action Execution

Real-World Examples of Agentic AI

Example	Agent Behavior
Customer Support Bot	Understands issue → checks database → creates ticket → responds
AI Coding Assistant	Writes code → runs tests → fixes errors
Travel Planner	Finds flights → compares hotels → creates itinerary
Automation Bot	Reads emails → extracts data → updates Excel sheet

Core Components of Agentic AI

1. Goal

Every AI agent starts with a goal.

Example:

“Book the cheapest flight”
“Generate weekly test reports”
“Fix failed Playwright tests”

2. Memory

Agents remember:

Previous actions
User preferences
Past conversations
Task history

Types of Memory

Type	Description
Short-Term Memory	Current task information
Long-Term Memory	Stored knowledge/history

3. Planning

The agent breaks large tasks into smaller steps.

Example:
Goal → “Create automation framework”

Plan:

Create project
Install dependencies
Configure Playwright
Create test structure
Run tests

4. Reasoning

The AI thinks before acting.

Example:

If login fails → retry
If API unavailable → wait and rerun
If file missing → create it

5. Tool Usage

Agents use external tools:

Browser
APIs
Databases
Files
Terminal
GitHub
Excel

Example:
An AI agent can:

Open browser
Search website
Download report
Save PDF

6. Action Execution

After planning, the agent performs actions automatically.

Example:

Click buttons
Send emails
Generate code
Execute scripts

Architecture of Agentic AI

User Goal
    ↓
AI Agent
    ↓
Planning Engine
    ↓
Reasoning Layer
    ↓
Tool Execution
    ↓
Memory Storage
    ↓
Final Result

Difference Between AI Chatbot and AI Agent

Feature	Chatbot	Agentic AI
Answers Questions	Yes	Yes
Uses Tools	Limited	Yes
Planning	No	Yes
Autonomous Actions	No	Yes
Memory	Minimal	Advanced
Multi-Step Tasks	Weak	Strong

Types of AI Agents

1. Reactive Agents

Respond only to current input.

Example:

Simple chatbot

2. Goal-Based Agents

Work toward achieving a goal.

Example:

Route optimization system

3. Learning Agents

Improve using feedback and history.

Example:

Recommendation systems

4. Multi-Agent Systems

Multiple agents collaborate together.

Example:

One agent writes code
Another tests it
Another deploys it

Agentic AI Workflow Example

Example: AI Testing Agent

Goal

Run automation tests and generate report.

Workflow

Read test cases
Execute Playwright tests
Capture failures
Retry failed tests
Generate HTML report
Send report to team

Key Technologies Used in Agentic AI

Technology	Purpose
Large Language Models (LLMs)	Thinking and reasoning
Vector Databases	Memory storage
APIs	Tool integration
Automation Frameworks	Action execution
Workflow Engines	Task orchestration

Popular Agentic AI Frameworks

Framework	Use
LangChain	AI workflows and agents
CrewAI	Multi-agent collaboration
AutoGen	Conversational agents
OpenAI Agents SDK	Tool-based AI agents
LlamaIndex	Data-connected agents

Agentic AI vs Generative AI

Generative AI	Agentic AI
Creates content	Performs actions
Text/Image generation	Decision-making
Prompt-response	Goal execution
Passive	Autonomous

Benefits of Agentic AI

Automation

Handles repetitive tasks automatically.

Productivity

Completes multi-step workflows quickly.

Decision Support

Analyzes data before acting.

Scalability

Can manage many tasks simultaneously.

Challenges in Agentic AI

Challenge	Description
Hallucination	Wrong decisions
Tool Failures	API/browser errors
Security	Unsafe actions
Cost	Multiple AI calls
Memory Management	Storing context efficiently

Agentic AI Use Cases

Software Testing

Self-healing tests
Bug analysis
Auto-reporting

DevOps

Deployment automation
Monitoring systems

Healthcare

Patient workflow automation

Finance

Fraud detection agents

Education

Personalized tutors

Agentic AI + Playwright Example

Since you are learning automation, this is highly relevant.

AI Agent Workflow for Testing

Receive test request
      ↓
Open browser
      ↓
Login to application
      ↓
Execute test steps
      ↓
Analyze failures
      ↓
Retry failed tests
      ↓
Generate report

Important Beginner Concepts

Prompt Engineering

Writing effective instructions for agents.

RAG (Retrieval-Augmented Generation)

AI retrieves external knowledge before answering.

Example:

Read company documents
Then answer user questions

Vector Database

Stores embeddings for semantic search.

Popular databases:

Pinecone
ChromaDB
Weaviate

Function Calling

Allows AI to invoke tools/APIs.

Example:

AI → callWeatherAPI()
AI → createExcelReport()

Skills to Learn for Agentic AI

Programming

JavaScript
Python
TypeScript

AI Concepts

LLMs
Embeddings
Prompt engineering

Automation

Playwright
Selenium
API testing

Cloud & APIs

REST APIs
Docker
GitHub Actions

Beginner Learning Roadmap

Phase 1 — Basics

Learn AI fundamentals
Understand LLMs
Learn APIs

Phase 2 — Automation

Learn Playwright
Browser automation
API automation

Phase 3 — AI Integration

OpenAI APIs
LangChain basics
Tool calling

Phase 4 — Build Agents

Memory systems
Multi-step workflows
Autonomous agents

Simple Beginner Project Ideas

Project	Difficulty
AI To-Do Agent	Easy
AI Email Summarizer	Easy
AI Browser Automation Agent	Medium
AI Playwright Test Generator	Medium
AI Bug Analyzer	Advanced

Example of a Very Simple Agent

const goal = "Search latest Playwright version";

plan();
searchWeb();
summarizeResult();
displayOutput();

Future of Agentic AI

Agentic AI is becoming important in:

Software development
Testing automation
Customer support
Research
Business workflows

Future systems will:

Work independently
Collaborate with humans
Use multiple tools
Continuously improve

Final Summary

Agentic AI combines:

Intelligence
Planning
Memory
Tool usage
Autonomous execution

It is the next major evolution after traditional Generative AI.

Recommended Beginner Learning Order

JavaScript/Python
APIs
Playwright automation
AI fundamentals
LLM APIs
LangChain/CrewAI
Build simple AI agents
Multi-agent systems

Step-by-Step Guide to Integrate BDD Behavior in Playwright with POM

This guide explains how to integrate:

Playwright
BDD (Behavior Driven Development)
Cucumber
Page Object Model (POM)

using JavaScript/TypeScript.

The framework structure will support:

Readable feature files
Reusable page objects
Clean step definitions
Scalable automation framework
HTML reports
Cross-browser execution

1. What You Will Build

You will create a framework like this:

PlaywrightBDDFramework/
│
├── features/
│   ├── login.feature
│   └── step-definitions/
│       └── login.steps.ts
│
├── pages/
│   └── LoginPage.ts
│
├── hooks/
│   └── hooks.ts
│
├── utils/
│   └── helper.ts
│
├── reports/
│
├── playwright.config.ts
├── cucumber.js
├── package.json
└── tsconfig.json

2. Install Node.js

Install Node.js from:

Node.js Official Website

Verify installation:

node -v
npm -v

3. Create Project

mkdir PlaywrightBDDFramework
cd PlaywrightBDDFramework

Initialize project:

npm init -y

4. Install Required Dependencies

Install Playwright

npm install -D @playwright/test

Install browsers:

npx playwright install

Install Cucumber + TypeScript Support

npm install -D @cucumber/cucumber
npm install -D typescript ts-node
npm install -D @types/node

Install Reporting Packages

npm install -D multiple-cucumber-html-reporter
npm install -D cucumber-html-reporter

5. Configure TypeScript

Create:

`tsconfig.json`

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "types": ["node"],
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

6. Configure Cucumber

Create:

`cucumber.js`

module.exports = {
  default: {
    require: [
      "features/step-definitions/*.ts",
      "hooks/*.ts"
    ],
    format: [
      "progress",
      "json:reports/cucumber-report.json"
    ],
    requireModule: ["ts-node/register"],
    paths: ["features/*.feature"]
  }
};

7. Create Playwright Config

`playwright.config.ts`

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './features',
  timeout: 60000,
  use: {
    headless: false,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure'
  }
});

8. Create Feature File

`features/login.feature`

Feature: Login Functionality

  Scenario: Successful Login

    Given User launches the application
    When User enters username and password
    And User clicks on login button
    Then User should navigate to dashboard

9. Create Page Object Model (POM)

`pages/LoginPage.ts`

import { Page } from '@playwright/test';

export class LoginPage {

    constructor(private page: Page) {}

    username = '#username';
    password = '#password';
    loginBtn = '#loginBtn';

    async launchApplication() {
        await this.page.goto('https://example.com');
    }

    async enterUsername(username: string) {
        await this.page.fill(this.username, username);
    }

    async enterPassword(password: string) {
        await this.page.fill(this.password, password);
    }

    async clickLogin() {
        await this.page.click(this.loginBtn);
    }
}

10. Create Hooks File

Hooks help initialize browser and cleanup.

`hooks/hooks.ts`

import {
  Before,
  After,
  BeforeAll,
  AfterAll
} from '@cucumber/cucumber';

import { chromium, Browser, Page } from '@playwright/test';

let browser: Browser;
let page: Page;

BeforeAll(async () => {
    browser = await chromium.launch({
        headless: false
    });
});

Before(async function () {
    const context = await browser.newContext();
    page = await context.newPage();

    this.page = page;
});

After(async function () {
    await page.close();
});

AfterAll(async () => {
    await browser.close();
});

11. Create Step Definitions

`features/step-definitions/login.steps.ts`

import { Given, When, Then } from '@cucumber/cucumber';
import { expect } from '@playwright/test';

import { LoginPage } from '../../pages/LoginPage';

let loginPage: LoginPage;

Given('User launches the application', async function () {

    loginPage = new LoginPage(this.page);

    await loginPage.launchApplication();
});

When('User enters username and password', async function () {

    await loginPage.enterUsername('admin');

    await loginPage.enterPassword('admin123');
});

When('User clicks on login button', async function () {

    await loginPage.clickLogin();
});

Then('User should navigate to dashboard', async function () {

    await expect(this.page).toHaveURL(/dashboard/);
});

12. Add Scripts in package.json

Update:

`package.json`

"scripts": {
  "test": "cucumber-js",
  "test:headed": "cucumber-js --tags '@SmokeTest'",
  "report": "node report.js"
}

13. Execute Tests

Run:

npm test

14. Generate HTML Reports

Create:

`report.js`

const report = require('multiple-cucumber-html-reporter');

report.generate({
  jsonDir: 'reports',
  reportPath: 'reports/html-report',
  metadata: {
    browser: {
      name: 'chrome',
      version: 'latest'
    },
    device: 'Local Machine',
    platform: {
      name: 'windows',
      version: '11'
    }
  }
});

Run:

node report.js

15. Add Tags in Feature Files

@SmokeTest
Feature: Login Functionality

Run specific tags:

npx cucumber-js --tags "@SmokeTest"

16. Add Environment Support

Create:

`.env`

BASE_URL=https://example.com
USERNAME=admin
PASSWORD=admin123

Install dotenv:

npm install dotenv

Use:

import dotenv from 'dotenv';

dotenv.config();

process.env.BASE_URL

17. Best Framework Structure

framework/
│
├── features/
├── pages/
├── hooks/
├── utils/
├── locators/
├── test-data/
├── reports/
├── screenshots/
├── videos/
├── logs/
└── config/

18. Advanced Improvements

You can enhance the framework with:

Feature	Benefit
Parallel Execution	Faster execution
CI/CD Integration	Automated pipeline
Retry Logic	Stable execution
API + UI Framework	Hybrid testing
Docker Support	Easy setup
Allure Reports	Better reporting
Faker Data	Dynamic test data
Database Validation	End-to-end validation

19. Real-Time Industry Best Practices

Use Separate Layers

Page Layer

Locators
Page actions

Step Definition Layer

BDD mapping only

Utility Layer

Reusable functions

Test Data Layer

JSON/CSV/Excel data

20. Recommended Design Pattern

Hybrid Framework

Combine:

POM
BDD
Data-Driven
Utility Helpers
API Helpers
Reporting
CI/CD

21. Sample Execution Flow

Feature File
     ↓
Step Definition
     ↓
Page Object
     ↓
Playwright Actions
     ↓
Browser Execution

22. Advantages of BDD with POM

BDD	POM
Readable scenarios	Reusable code
Business friendly	Maintainable
Better collaboration	Easy scaling
Easy reporting	Cleaner structure

23. Common Interview Questions

What is BDD?

BDD is a development approach where application behavior is written in simple language using Gherkin syntax.

Why use POM?

POM improves:

Reusability
Maintainability
Scalability

Difference Between Playwright Test and Cucumber?

Playwright Test	Cucumber
Technical	Business readable
Fast execution	BDD support
Built-in fixtures	Gherkin support

24. Recommended Learning Path

Playwright Basics
TypeScript Fundamentals
POM Design
BDD Concepts
Cucumber Framework
Reporting
CI/CD
Docker
API Automation
AI-assisted Automation

25. Official Documentation

How to read data from CSV file in Playwright

1. Install CSV Parser

Run:

npm install csv-parser

2. Create CSV File

Create a file named testdata.csv

username,password
admin,admin123
testuser,test123
demo,demo123

3. Create Utility to Read CSV

Create readCSV.js

const fs = require('fs');
const csv = require('csv-parser');

function readCSV(filePath) {
    return new Promise((resolve, reject) => {
        const results = [];

        fs.createReadStream(filePath)
            .pipe(csv())
            .on('data', (data) => results.push(data))
            .on('end', () => resolve(results))
            .on('error', (error) => reject(error));
    });
}

module.exports = readCSV;

4. Use CSV Data in Playwright Test

Create example.spec.js

const { test, expect } = require('@playwright/test');
const readCSV = require('./readCSV');

let testData = [];

test.beforeAll(async () => {
    testData = await readCSV('./testdata.csv');
});

test.describe('Login Tests Using CSV Data', () => {

    for (const data of testData) {

        test(`Login test for ${data.username}`, async ({ page }) => {

            await page.goto('https://example.com/login');

            await page.fill('#username', data.username);
            await page.fill('#password', data.password);

            await page.click('button[type="submit"]');

            // Example validation
            await expect(page).toHaveURL(/dashboard/);
        });
    }
});

Better Approach (Recommended)

Because Playwright loads tests before beforeAll, the loop may not work correctly.

Use this cleaner approach:

const { test, expect } = require('@playwright/test');
const readCSV = require('./readCSV');

test.describe('CSV Driven Tests', () => {

    let testData;

    test.beforeAll(async () => {
        testData = await readCSV('./testdata.csv');
    });

    test('Run all CSV rows', async ({ page }) => {

        for (const data of testData) {

            console.log(`Testing with ${data.username}`);

            await page.goto('https://example.com/login');

            await page.fill('#username', data.username);
            await page.fill('#password', data.password);

            await page.click('button[type="submit"]');

            await expect(page).toHaveURL(/dashboard/);
        }
    });
});

Best Practice for Large Frameworks

For scalable automation frameworks:

Keep test data in data/ folder
Use Page Object Model (POM)
Create reusable CSV utility
Separate:
- Test Data
- Test Logic
- Page Actions

Example structure:

project/
│
├── tests/
├── pages/
├── utils/
│   └── readCSV.js
├── data/
│   └── testdata.csv
└── playwright.config.js

Alternative (Recommended for Playwright)

Playwright works better with JSON than CSV for parameterized tests.

You can convert CSV → JSON and use:

testData.forEach((data) => {
   test(`Login ${data.username}`, async ({ page }) => {
      // test steps
   });
});

This gives:

Better reporting
Separate test cases
Parallel execution support
Easier debugging

Playwright Custom Fixtures with Examples

In Playwright, fixtures are reusable setup and teardown utilities that help you share test data, page objects, authentication, API clients, and configurations across tests.

Custom fixtures make your framework:

Reusable
Maintainable
Scalable
Cleaner and easier to read

1. What is a Fixture in Playwright?

A fixture is a setup environment provided to your test before execution.

Playwright already provides built-in fixtures such as:

page
browser
context
request

Example:

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

test('example test', async ({ page }) => {
  await page.goto('https://example.com');
});

Here, page is a built-in fixture.

2. Why Use Custom Fixtures?

Custom fixtures help when you want to:

Reuse login steps
Share page objects
Create API clients
Initialize test data
Setup database connections
Handle authentication
Avoid duplicate code

3. Basic Structure of Custom Fixture

import { test as base } from '@playwright/test';

export const test = base.extend({
  
  myFixture: async ({}, use) => {

    // Setup
    const data = "Hello Fixture";

    // Provide fixture
    await use(data);

    // Teardown
    console.log("Fixture cleanup");
  }
});

4. Example 1 — Simple Custom Fixture

Folder Structure

project
 ├── tests
 │    └── example.spec.ts
 │
 ├── fixtures
 │    └── testFixture.ts

Step 1: Create Fixture File

`fixtures/testFixture.ts`

import { test as base } from '@playwright/test';

type MyFixtures = {
  userName: string;
};

export const test = base.extend<MyFixtures>({
  
  userName: async ({}, use) => {

    const name = 'Deepesh';

    await use(name);

    console.log('Test completed');
  }
});

export { expect } from '@playwright/test';

Step 2: Use Fixture in Test

`tests/example.spec.ts`

import { test, expect } from '../fixtures/testFixture';

test('Custom Fixture Example', async ({ userName }) => {

  console.log(userName);

  expect(userName).toBe('Deepesh');
});

5. Example 2 — Page Object Fixture

This is the most common real-world usage.

Folder Structure

project
 ├── pages
 │    └── LoginPage.ts
 │
 ├── fixtures
 │    └── pageFixture.ts
 │
 ├── tests
 │    └── login.spec.ts

Step 1: Create Page Object

`pages/LoginPage.ts`

import { Page } from '@playwright/test';

export class LoginPage {

  constructor(private 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');
  }
}

Step 2: Create Fixture

`fixtures/pageFixture.ts`

import { test as base } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

type PageFixtures = {
  loginPage: LoginPage;
};

export const test = base.extend<PageFixtures>({

  loginPage: async ({ page }, use) => {

    const loginPage = new LoginPage(page);

    await use(loginPage);
  }
});

export { expect } from '@playwright/test';

Step 3: Use Fixture in Test

`tests/login.spec.ts`

import { test, expect } from '../fixtures/pageFixture';

test('Login Test', async ({ loginPage }) => {

  await loginPage.navigate();

  await loginPage.login(
    'admin',
    'password123'
  );
});

6. Example 3 — Authentication Fixture

This is extremely useful in enterprise frameworks.

Authentication Fixture

import { test as base } from '@playwright/test';

type AuthFixtures = {
  authenticatedPage: any;
};

export const test = base.extend<AuthFixtures>({

  authenticatedPage: async ({ page }, use) => {

    await page.goto('https://example.com/login');

    await page.fill('#username', 'admin');
    await page.fill('#password', 'admin123');

    await page.click('#login');

    // Reuse logged-in page
    await use(page);

    // Optional cleanup
    await page.close();
  }
});

export { expect } from '@playwright/test';

Test File

import { test, expect } from '../fixtures/authFixture';

test('Dashboard Test', async ({ authenticatedPage }) => {

  await authenticatedPage.goto(
    'https://example.com/dashboard'
  );

  await expect(
    authenticatedPage.locator('h1')
  ).toContainText('Dashboard');
});

7. Example 4 — API Fixture

Useful for API automation frameworks.

`fixtures/apiFixture.ts`

import { test as base, request } from '@playwright/test';

type ApiFixture = {
  apiContext: any;
};

export const test = base.extend<ApiFixture>({

  apiContext: async ({}, use) => {

    const apiContext = await request.newContext({

      baseURL: 'https://reqres.in/api',

      extraHTTPHeaders: {
        'Accept': 'application/json'
      }
    });

    await use(apiContext);

    await apiContext.dispose();
  }
});

export { expect } from '@playwright/test';

API Test

import { test, expect } from '../fixtures/apiFixture';

test('Get Users API', async ({ apiContext }) => {

  const response = await apiContext.get('/users?page=2');

  expect(response.status()).toBe(200);

  const body = await response.json();

  console.log(body);
});

8. Worker Fixture vs Test Fixture

Playwright supports two fixture scopes.

Fixture Type	Scope	Runs
Test Fixture	Per Test	Every test
Worker Fixture	Per Worker	Once per worker

Example of Worker Fixture

import { test as base } from '@playwright/test';

type WorkerFixture = {
  token: string;
};

export const test = base.extend<{}, WorkerFixture>({

  token: [async ({}, use) => {

    console.log('Generate Token');

    const token = 'ABC123TOKEN';

    await use(token);

  }, { scope: 'worker' }]
});

9. Auto Fixtures

Auto fixtures execute automatically before every test.

Example

import { test as base } from '@playwright/test';

export const test = base.extend({

  autoLogger: [async ({}, use) => {

    console.log('Before Test');

    await use();

    console.log('After Test');

  }, { auto: true }]
});

10. Best Practices

Use Fixtures For

Login handling
API clients
Database setup
Page objects
Environment setup
Test data generation

Avoid

Very large fixtures
Too much business logic
Circular dependencies
Hardcoded credentials

11. Real Enterprise Framework Structure

project
 ├── fixtures
 │    ├── authFixture.ts
 │    ├── apiFixture.ts
 │    ├── pageFixture.ts
 │
 ├── pages
 │    ├── LoginPage.ts
 │    ├── DashboardPage.ts
 │
 ├── tests
 │    ├── ui
 │    ├── api
 │
 ├── utils
 ├── test-data
 ├── playwright.config.ts

12. Advantages of Custom Fixtures

Benefit	Description
Reusability	Avoid duplicate code
Scalability	Easier framework growth
Maintainability	Centralized setup
Clean Tests	Better readability
Faster Development	Reuse common logic

13. Interview Questions

Q1. What is a fixture in Playwright?

A reusable setup/teardown utility used in tests.

Q2. Difference between built-in and custom fixtures?

Built-in fixtures are provided by Playwright.
Custom fixtures are user-defined.

Q3. What is worker scope?

Fixture executes once per worker process.

Q4. Why use fixtures with Page Object Model?

To inject reusable page object instances into tests.

14. Recommended Real-World Usage

Most companies use fixtures for:

Authentication
Page Object initialization
API clients
Environment configuration
Test reporting
Database utilities
Logging

15. Summary

Custom fixtures are one of the most important concepts in Playwright frameworks because they:

Reduce code duplication
Improve maintainability
Support scalable automation frameworks
Work perfectly with POM and API automation

Most enterprise Playwright frameworks heavily depend on custom fixtures.

JavaScript Exception Handling

Exception handling in JavaScript is used to manage runtime errors without stopping the entire program. It helps developers write stable and reliable applications.

What is an Exception?

An exception is an unexpected error that occurs while the program is running.

Examples:

Dividing by invalid values
Accessing undefined variables
Invalid JSON parsing
Network/API failures
Custom validation errors

Why Exception Handling is Important

Exception handling helps to:

Prevent application crashes
Show meaningful error messages
Debug applications easily
Handle API/database failures gracefully
Improve user experience

JavaScript Error Types

1. Syntax Error

Occurs when JavaScript code has invalid syntax.

console.log("Hello"

Output:

SyntaxError: missing ) after argument list

2. Reference Error

Occurs when accessing an undefined variable.

console.log(userName);

Output:

ReferenceError: userName is not defined

3. Type Error

Occurs when an operation is performed on the wrong data type.

let num = 10;
num.toUpperCase();

Output:

TypeError: num.toUpperCase is not a function

4. Range Error

Occurs when a value is outside the allowed range.

let arr = new Array(-1);

Output:

RangeError: Invalid array length

5. URI Error

Occurs when URI functions are used incorrectly.

decodeURIComponent("%");

Output:

URIError: URI malformed

try…catch Statement

The try...catch block is the core of exception handling.

Syntax

try {
    // risky code
} catch(error) {
    // error handling code
}

Basic Example

try {
    let result = 10 / 0;
    console.log(result);
} catch(error) {
    console.log("Something went wrong");
}

Example with Actual Error

try {
    console.log(user);
} catch(error) {
    console.log("Error Name:", error.name);
    console.log("Error Message:", error.message);
}

Output:

Error Name: ReferenceError
Error Message: user is not defined

Error Object Properties

The error object contains useful information.

Property	Description
`name`	Error type
`message`	Error description
`stack`	Stack trace

finally Block

The finally block always executes whether an error occurs or not.

Syntax

try {
    // code
} catch(error) {
    // handle error
} finally {
    // always runs
}

Example

try {
    console.log("Start");
    console.log(data);
} catch(error) {
    console.log("Error handled");
} finally {
    console.log("Execution completed");
}

Output:

Start
Error handled
Execution completed

throw Statement

The throw keyword is used to create custom exceptions.

Syntax

throw "Custom Error";

throw new Error("Invalid input");

Custom Error Example

let age = 15;

try {
    if(age < 18) {
        throw new Error("Age must be 18 or above");
    }

    console.log("Eligible");
} catch(error) {
    console.log(error.message);
}

Output:

Age must be 18 or above

Nested try…catch

You can use multiple try-catch blocks.

try {
    try {
        console.log(userName);
    } catch(error) {
        console.log("Inner Catch");
    }

    console.log(data);
} catch(error) {
    console.log("Outer Catch");
}

Exception Handling in Functions

function divide(a, b) {
    try {
        if(b === 0) {
            throw new Error("Division by zero not allowed");
        }

        return a / b;

    } catch(error) {
        return error.message;
    }
}

console.log(divide(10, 0));

Exception Handling with JSON

Very common in API automation and backend development.

let jsonData = '{"name":"Deepesh"}';

try {
    let user = JSON.parse(jsonData);
    console.log(user.name);

} catch(error) {
    console.log("Invalid JSON");
}

Invalid JSON Example

let jsonData = '{"name":"Deepesh"';

try {
    let user = JSON.parse(jsonData);

} catch(error) {
    console.log("JSON Parsing Failed");
}

Async Exception Handling

Used with async/await.

Example

async function fetchData() {

    try {
        let response = await fetch("https://dummyjson.com/users/1");

        let data = await response.json();

        console.log(data);

    } catch(error) {
        console.log("API Error:", error.message);
    }
}

fetchData();

Best Practices

1. Use Specific Error Messages

throw new Error("Password cannot be empty");

2. Avoid Empty catch Blocks

❌ Bad

catch(error) {

}

✅ Good

catch(error) {
    console.log(error.message);
}

3. Use finally for Cleanup

Useful for:

Closing database connections
Clearing resources
Stopping loaders

4. Do Not Overuse try…catch

Use it only around risky code.

Real-World Example

Form Validation

function login(username, password) {

    try {

        if(!username) {
            throw new Error("Username is required");
        }

        if(!password) {
            throw new Error("Password is required");
        }

        console.log("Login Successful");

    } catch(error) {
        console.log(error.message);
    }
}

login("", "12345");

Playwright Framework Read Data from a JSON File

Using JSON files in a Playwright framework is a common way to manage:

Test data
Environment configuration
User credentials
API payloads
Multiple datasets for data-driven testing

1. Project Structure Example

playwright-framework/
│
├── test-data/
│   ├── users.json
│   └── loginData.json
│
├── tests/
│   └── login.spec.ts
│
├── utils/
│   └── jsonReader.ts
│
├── playwright.config.ts
├── package.json
└── tsconfig.json

2. Create a JSON File

`test-data/loginData.json`

{
  "validUser": {
    "username": "admin",
    "password": "admin123"
  },
  "invalidUser": {
    "username": "wronguser",
    "password": "wrongpass"
  }
}

3. Read JSON Directly in Playwright Test

`tests/login.spec.ts`

import { test, expect } from '@playwright/test';
import loginData from '../test-data/loginData.json';

test('Login with valid user', async ({ page }) => {

    await page.goto('https://example.com/login');

    await page.fill('#username', loginData.validUser.username);

    await page.fill('#password', loginData.validUser.password);

    await page.click('#loginBtn');

    await expect(page).toHaveURL(/dashboard/);
});

4. Enable JSON Imports in TypeScript

Update your tsconfig.json.

`tsconfig.json`

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

5. Reading JSON Using `fs` Module (Dynamic Read)

This approach is useful when:

File changes frequently
Large datasets
Runtime data loading
External config management

`utils/jsonReader.ts`

import fs from 'fs';

export function readJsonFile(path: string) {

    const data = fs.readFileSync(path, 'utf-8');

    return JSON.parse(data);
}

Usage in Test

import { test, expect } from '@playwright/test';
import { readJsonFile } from '../utils/jsonReader';

test('Login using JSON data', async ({ page }) => {

    const testData = readJsonFile('./test-data/loginData.json');

    await page.goto('https://example.com/login');

    await page.fill('#username', testData.validUser.username);

    await page.fill('#password', testData.validUser.password);

    await page.click('#loginBtn');

    await expect(page).toHaveURL(/dashboard/);
});

6. Data-Driven Testing Using JSON

`test-data/users.json`

[
  {
    "username": "user1",
    "password": "pass1"
  },
  {
    "username": "user2",
    "password": "pass2"
  },
  {
    "username": "user3",
    "password": "pass3"
  }
]

Data-Driven Playwright Test

import { test } from '@playwright/test';
import users from '../test-data/users.json';

users.forEach((user) => {

    test(`Login test for ${user.username}`, async ({ page }) => {

        await page.goto('https://example.com/login');

        await page.fill('#username', user.username);

        await page.fill('#password', user.password);

        await page.click('#loginBtn');
    });
});

7. Best Practice in Enterprise Playwright Framework

Keep Separate JSON Files For

Purpose	Example File
Login Data	`loginData.json`
API Payloads	`payloads.json`
Environment Data	`env.json`
Test Users	`users.json`
Configurations	`config.json`

8. Recommended Folder Structure

test-data/
│
├── ui/
│   ├── login.json
│   └── checkout.json
│
├── api/
│   ├── createUser.json
│   └── updateUser.json
│
└── environments/
    ├── qa.json
    └── prod.json

9. Example: Environment Configuration

`environments/qa.json`

{
  "baseURL": "https://qa.example.com",
  "username": "qauser",
  "password": "qapass"
}

Usage

import env from '../test-data/environments/qa.json';

test('Environment Test', async ({ page }) => {

    await page.goto(env.baseURL);
});

10. Async JSON Read Example

import fs from 'fs/promises';

export async function readJson(path: string) {

    const data = await fs.readFile(path, 'utf-8');

    return JSON.parse(data);
}

11. Real-World Enterprise Utility Class

`utils/dataManager.ts`

import fs from 'fs';

export class DataManager {

    static getTestData(filePath: string) {

        const data = fs.readFileSync(filePath, 'utf-8');

        return JSON.parse(data);
    }
}

Usage

import { test } from '@playwright/test';
import { DataManager } from '../utils/dataManager';

test('Enterprise JSON Example', async ({ page }) => {

    const data = DataManager.getTestData(
        './test-data/loginData.json'
    );

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

    console.log(data.validUser.username);
});

12. Common Errors and Fixes

Error	Solution
Cannot find JSON module	Add `resolveJsonModule: true`
Unexpected token JSON	Use `JSON.parse()` properly
Path not found	Use correct relative path
Undefined values	Verify JSON structure

13. Recommended Best Practices

Use JSON When

✅ Static test data
✅ Small-medium datasets
✅ Config management
✅ API request payloads

Playwright API Automation with POM

API Automation with Page Object Model (POM)

What is API Automation in Playwright?

Playwright is not only used for UI automation; it also supports powerful API testing using built-in HTTP request methods.

API automation helps to:

Validate backend services
Test REST APIs
Verify response data
Perform authentication testing
Integrate API + UI workflows

Why Use Page Object Model (POM) for API Testing?

Page Object Model is a design pattern used to:

Separate API logic from test logic
Improve code reusability
Make framework scalable
Reduce code duplication
Improve maintenance

Recommended Project Structure

playwright-api-framework/
│
├── tests/
│   ├── user.spec.ts
│   └── booking.spec.ts
│
├── api/
│   ├── UserAPI.ts
│   └── BookingAPI.ts
│
├── utils/
│   ├── apiClient.ts
│   └── testData.ts
│
├── fixtures/
│   └── auth.json
│
├── playwright.config.ts
├── package.json
└── tsconfig.json

Step 1: Install Playwright

Initialize Project

npm init -y

Install Playwright

npm init playwright@latest

Choose:

TypeScript
VS Code
GitHub Actions (optional)

Step 2: Configure Playwright

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    baseURL: 'https://reqres.in/api',
    extraHTTPHeaders: {
      'Content-Type': 'application/json'
    }
  }
});

Step 3: Create Base API Client

utils/apiClient.ts

This class handles common API operations.

import { APIRequestContext, request } from '@playwright/test';

export class APIClient {
  private apiContext!: APIRequestContext;

  async createContext() {
    this.apiContext = await request.newContext({
      baseURL: 'https://reqres.in/api',
      extraHTTPHeaders: {
        'Content-Type': 'application/json'
      }
    });
  }

  getContext() {
    return this.apiContext;
  }
}

Step 4: Create API Page Object

api/UserAPI.ts

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

export class UserAPI {
  readonly request: APIRequestContext;

  constructor(request: APIRequestContext) {
    this.request = request;
  }

  async getUsers(pageNumber: number) {
    const response = await this.request.get(`/users?page=${pageNumber}`);

    expect(response.status()).toBe(200);

    return await response.json();
  }

  async createUser(name: string, job: string) {
    const response = await this.request.post('/users', {
      data: {
        name,
        job
      }
    });

    expect(response.status()).toBe(201);

    return await response.json();
  }

  async updateUser(id: number, name: string, job: string) {
    const response = await this.request.put(`/users/${id}`, {
      data: {
        name,
        job
      }
    });

    expect(response.status()).toBe(200);

    return await response.json();
  }

  async deleteUser(id: number) {
    const response = await this.request.delete(`/users/${id}`);

    expect(response.status()).toBe(204);
  }
}

Step 5: Write API Test Cases

tests/user.spec.ts

import { test, request, expect } from '@playwright/test';
import { UserAPI } from '../api/UserAPI';

test.describe('User API Tests', () => {

  let userAPI: UserAPI;

  test.beforeEach(async () => {
    const apiContext = await request.newContext({
      baseURL: 'https://reqres.in/api'
    });

    userAPI = new UserAPI(apiContext);
  });

  test('Get Users List', async () => {

    const response = await userAPI.getUsers(2);

    expect(response.page).toBe(2);
    expect(response.data.length).toBeGreaterThan(0);
  });

  test('Create New User', async () => {

    const response = await userAPI.createUser(
      'Deepesh',
      'QA Engineer'
    );

    expect(response.name).toBe('Deepesh');
    expect(response.job).toBe('QA Engineer');
  });

  test('Update Existing User', async () => {

    const response = await userAPI.updateUser(
      2,
      'Deepesh Updated',
      'Senior QA'
    );

    expect(response.name).toBe('Deepesh Updated');
  });

  test('Delete User', async () => {

    await userAPI.deleteUser(2);
  });

});

Step 6: Execute Tests

Run All Tests

npx playwright test

Run Specific File

npx playwright test tests/user.spec.ts

Run in Headed Mode

npx playwright test --headed

Generate HTML Report

npx playwright show-report

API Assertions Examples

Validate Status Code

expect(response.status()).toBe(200);

Validate Response Body

expect(responseBody.name).toBe('Deepesh');

Validate Headers

expect(response.headers()['content-type'])
  .toContain('application/json');

Authentication Example

Login API

async login(email: string, password: string) {

  const response = await this.request.post('/login', {
    data: {
      email,
      password
    }
  });

  return await response.json();
}

Token Handling Example

const token = loginResponse.token;

const apiContext = await request.newContext({
  extraHTTPHeaders: {
    Authorization: `Bearer ${token}`
  }
});

Reusable Test Data

utils/testData.ts

export const users = {
  adminUser: {
    name: 'Deepesh',
    job: 'Automation Engineer'
  }
};

Advanced Framework Enhancements

You can extend this framework with:

Feature	Purpose
Environment Config	DEV/UAT/PROD support
Logger	API request-response logs
Allure Reports	Advanced reporting
Retry Mechanism	Handle flaky APIs
CI/CD	Jenkins/GitHub Actions
Database Validation	Backend verification
Schema Validation	Validate JSON structure
Faker Library	Dynamic test data
Parallel Execution	Faster execution

Real-World Enterprise Structure

framework/
│
├── api/
├── tests/
├── fixtures/
├── utils/
├── helpers/
├── data/
├── reports/
├── logs/
├── schemas/
├── config/
└── .github/workflows/

Best Practices

1. Keep API Logic Separate

Do not write API calls directly inside test files.

✅ Correct:

userAPI.createUser()

❌ Wrong:

request.post(...)

inside every test.

2. Use Environment Variables

BASE_URL=https://uat-api.company.com

3. Validate Response Time

expect(response.ok()).toBeTruthy();

4. Use Soft Assertions Carefully

expect.soft(response.status()).toBe(200);

5. Create Reusable Helpers

Example:

Token manager
Payload builder
Common assertions

Advantages of Playwright API Automation

Advantage	Description
Fast Execution	No browser required
Built-in Assertions	Easy validations
API + UI Combo	End-to-end workflow
Parallel Support	Faster pipelines
TypeScript Support	Better maintainability
Auto Waiting	Stable execution

API + UI Hybrid Testing Example

test('Create user via API and validate in UI', async ({ page }) => {

  // Create user via API
  await userAPI.createUser('Deepesh', 'QA');

  // Validate in UI
  await page.goto('/users');

  await expect(
    page.locator('text=Deepesh')
  ).toBeVisible();
});

Maintain Different Config Files for API and UI Tests

To maintain 2 separate config files for API and UI test cases in frameworks like Playwright Docs, the best approach is to create the following:

One config for UI tests
One config for API tests

This helps you:

Run tests independently
Use different base URLs
Use different reporters/timeouts
Execute API tests faster without browser launch
Maintain clean project structure

Recommended Project Structure

project-root/
│
├── tests/
│   ├── ui/
│   │   ├── login.spec.ts
│   │   └── dashboard.spec.ts
│   │
│   └── api/
│       ├── users.spec.ts
│       └── auth.spec.ts
│
├── playwright-ui.config.ts
├── playwright-api.config.ts
│
├── utils/
├── pages/
├── package.json
└── tsconfig.json

1. UI Config File

Create:

`playwright-ui.config.ts`

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/ui',

  timeout: 60000,

  use: {
    browserName: 'chromium',
    headless: false,
    baseURL: 'https://example-ui.com',

    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry'
  },

  reporter: [
    ['html'],
    ['list']
  ],

  projects: [
    {
      name: 'chrome',
      use: {
        browserName: 'chromium'
      }
    }
  ]
});

2. API Config File

Create:

`playwright-api.config.ts`

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/api',

  timeout: 30000,

  use: {
    baseURL: 'https://api.example.com',

    extraHTTPHeaders: {
      Accept: 'application/json'
    }
  },

  reporter: [
    ['html'],
    ['dot']
  ],

  workers: 4
});

3. Run UI Tests

npx playwright test --config=playwright-ui.config.ts

4. Run API Tests

npx playwright test --config=playwright-api.config.ts

5. Add Package.json Scripts

`package.json`

{
  "scripts": {
    "test:ui": "playwright test --config=playwright-ui.config.ts",

    "test:api": "playwright test --config=playwright-api.config.ts",

    "test:all": "npm run test:ui && npm run test:api"
  }
}

6. Environment-Specific Config (Recommended)

You can also maintain:

.env.dev
.env.qa
.env.stage

Install dotenv:

npm install dotenv

Example:

import dotenv from 'dotenv';

dotenv.config({ path: '.env.qa' });

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL
  }
});

7. Better Enterprise Approach (Best Practice)

Many companies use:

configs/
│
├── ui/
│   ├── dev.config.ts
│   ├── qa.config.ts
│   └── stage.config.ts
│
└── api/
    ├── dev.config.ts
    ├── qa.config.ts
    └── stage.config.ts

This supports:

Multiple environments
CI/CD pipelines
Parallel execution
Easy maintenance

8. Common Real-World Usage

Type	Separate Config Needed?	Why
UI Tests	Yes	Browser settings
API Tests	Yes	No browser needed
Mobile Tests	Yes	Device configs
Smoke Tests	Yes	Faster execution
Regression	Yes	Large suite handling

9. Advanced Approach Using Base Config

You can avoid duplication using a shared base config.

`playwright.base.ts`

import { defineConfig } from '@playwright/test';

export default defineConfig({
  timeout: 30000,

  reporter: 'html'
});

UI Config

import base from './playwright.base';

export default {
  ...base,

  testDir: './tests/ui',

  use: {
    browserName: 'chromium',
    baseURL: 'https://ui.example.com'
  }
};

API Config

import base from './playwright.base';

export default {
  ...base,

  testDir: './tests/api',

  use: {
    baseURL: 'https://api.example.com'
  }
};

Best Practice Recommendation

Use:

✅ Separate config files
✅ Shared base config
✅ Environment variables
✅ Separate folders for API/UI
✅ Separate reports
✅ Package.json scripts

Step-by-Step Guide to Install Git on MacOS

Method 1: Install Git Using Homebrew (Recommended)

Step 1: Open Terminal

Press:

Command (⌘) + Space
Type Terminal
Press Enter

Step 2: Check if Git is Already Installed

Run:

git --version

If Git is installed, you’ll see output like:

git version 2.45.0

If not installed, continue below.

Step 3: Install Homebrew (If Not Installed)

Run this command in Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Wait for installation to complete.

Step 4: Verify Homebrew Installation

Run:

brew --version

Example output:

Homebrew 4.3.0

Step 5: Install Git Using Homebrew

Run:

brew install git

Homebrew downloads and installs the latest Git version.

Step 6: Verify Git Installation

Run:

git --version

Example:

git version 2.45.1

Step 7: Configure Git Username

Run:

git config --global user.name "Your Name"

Example:

git config --global user.name "Deepesh Yadav"

Step 8: Configure Git Email

Run:

git config --global user.email "your-email@example.com"

Example:

git config --global user.email "deepesh@gmail.com"

Step 9: Verify Git Configuration

Run:

git config --list

Example output:

user.name=Deepesh Yadav
user.email=deepesh@gmail.com