Day 1: Playwright Training - BugKart Automation

🎯 Session Objectives

By the end of this session, you will:

✅ Understand the course structure and project goals
✅ Complete pre-assessment survey
✅ Grasp the importance of automation in testing
✅ Review JavaScript fundamentals relevant to Playwright
✅ Understand the differences between JavaScript and TypeScript
✅ Set up your development environment

📋 Session Agenda

1

Trainer Introduction

Personal introduction and course overview

⏱️ 2-3 minutes

2

Pre-Assessment Survey

Complete Google Form to understand your current automation knowledge

⏱️ 5 minutes

3

Project Roadmap

Detailed journey of building BugKart E-commerce Automation Framework

⏱️ 5 minutes

4

Why Automation?

Interactive session with real-world examples and hands-on activities

⏱️ 10 minutes

5

JavaScript Fundamentals

Core JS concepts essential for Playwright automation

⏱️ 15 minutes

6

JS vs TypeScript

Understanding the differences and benefits of TypeScript

⏱️ 5 minutes

7

Environment Setup

Setting up development environment and first test

⏱️ 10 minutes

💡 Why Automation? Interactive Activity

🎯 Real-World Scenario: E-commerce Checkout Flow

Scenario: Imagine you're testing OpenCart's Login page manually. How many times will you repeat it for Chrome, Firefox, and Edge?

// Manual Testing Process:
1. Open Chrome → Navigate to login → Test login → Close browser
2. Open Firefox → Navigate to login → Test login → Close browser  
3. Open Edge → Navigate to login → Test login → Close browser
// Total time: ~30 minutes per browser = 90 minutes total
                

🔤 JavaScript Fundamentals for Automation

⏳ Async/Await

Essential for handling asynchronous operations in Playwright

await page.click('button');
await page.fill('#email', 'test@example.com');
                    

🤝 Promises

Understanding promise-based operations

page.waitForSelector('.element')
    .then(() => page.click('.button'))
                    

⚙️ Functions

Creating reusable test functions

async function login() {
    await page.fill('#email', 'user@example.com');
    await page.fill('#password', 'password123');
}
                    

📦 Objects

Working with test data and configurations

const user = {
    email: 'test@example.com',
    password: 'password123'
};
                    

⚖️ JavaScript vs TypeScript

Feature	JavaScript	TypeScript
Type Safety	Dynamic typing - types checked at runtime	Static typing - types checked at compile time
Error Detection	Errors found only at runtime	Errors caught during development
IDE Support	Basic autocomplete and suggestions	Advanced IntelliSense and refactoring

🎯 Why TypeScript for Automation?

Better IDE Support: Autocomplete for Playwright methods
Early Error Detection: Catch typos before running tests
Better Documentation: Types serve as documentation
Refactoring Safety: Safe to rename methods and properties

🛠️ Environment Setup Guide

1

Verify Node.js Installation

node --version

Should show v18.0.0 or higher

2

Create Project Directory

mkdir bugkart-automation

Create a new folder for your project

3

Initialize npm

npm init -y

Create package.json file

4

Install Playwright

npm install playwright

Install the Playwright framework

5

Install Browsers

npx playwright install

Install browser binaries

📝 Homework Assignment

✅ Complete Environment Setup

Ensure all software is installed and working properly

🔄 Run First Test Multiple Times

Practice running the test and observe the results

📚 Read Playwright Documentation

Review basic concepts and examples

💭 Think About Test Scenarios

Consider what e-commerce features need testing

📊 Session Progress

Click through the agenda items above to track your progress!

🎯 Day 1: Playwright Training - BugKart Automation

🧑‍🏫 Meet Your Trainer

Anirudh Konduri

🎯 Session Objectives

📋 Session Agenda

Trainer Introduction

Pre-Assessment Survey

Project Roadmap

Why Automation?

JavaScript Fundamentals

JS vs TypeScript

Environment Setup

💡 Why Automation? Interactive Activity

🎯 Real-World Scenario: E-commerce Checkout Flow

✅ Automation Benefits

🔤 JavaScript Fundamentals for Automation

⏳ Async/Await

🤝 Promises

⚙️ Functions

📦 Objects

⚖️ JavaScript vs TypeScript

🎯 Why TypeScript for Automation?

🛠️ Environment Setup Guide

Verify Node.js Installation

Create Project Directory

Initialize npm

Install Playwright

Install Browsers

📝 Homework Assignment

✅ Complete Environment Setup

🔄 Run First Test Multiple Times

📚 Read Playwright Documentation

💭 Think About Test Scenarios

📊 Session Progress