Session 1: Introduction to Programming & TypeScript

 

Session 1: Introduction to Programming & TypeScript

• What is programming (real-life examples)
• What is automation testing
• What is Playwright
• Why Playwright uses TypeScript
• Difference between JavaScript and TypeScript (simple language)
• How code is executed (human → computer)
• Installing:
• Node.js
• VS Code
• Running first command in terminal
• Creating first .ts file
• Writing first console.log()

Got it 👍
Below is a very detailed, beginner-friendly Session 1 — written as if you’re teaching someone who has never coded before.
You can read it directly in class or convert it into slides.

---

📘 Session 1: Introduction to Programming & TypeScript

(For absolute beginners – Playwright foundation)

---

1️⃣ What is Programming? (Real-Life Explanation)

Programming means:
👉 Giving step-by-step instructions to a computer to perform a task.

🧠 Real-life example:

Making tea:

1. Boil water
2. Add tea leaves
3. Add sugar
4. Pour into cup

➡️ These steps are like code instructions.

💡 Computer is very dumb:

• It does only what you tell
• It needs clear and exact steps

---

2️⃣ What is Automation Testing?

Manual Testing:

• Human opens browser
• Clicks buttons
• Enters data
• Checks result

Automation Testing:

• A program does the same work
• Faster
• No tiredness
• No mistakes

Example:

Instead of manually logging in 100 times, --- flipkart – 100 min
👉 we write a script once and run it 100 times - - - 10+20 min = 30 min

---

3️⃣ What is Playwright?

Playwright is an automation tool that:

• Opens browser (Chrome, Edge, Firefox)
• Clicks buttons
• Types text
• Validates results

What Playwright can automate:

• Web applications  - - - https://flipcart.com – URL unique – html -
• Mobile web apps –

1)native apps - - Android or iOS - - OS - -WhatsApp, Telegram, Instagram, calling, contact number,  calendar - - Appium -

      2) web apps – html code https://news.google.com/

1)chrome in mobile

2)news.google

3)result – 1^st one - -

3) hybrid apps - - native apps - -  android or ios - -OS  + web apps – html code https://news.google.com/

• Multiple browsers
• Modern websites -

💡 Playwright behaves like a real user.

---

4️⃣ Why Playwright Uses TypeScript?

Playwright supports:

• JavaScript
• TypeScript (recommended)

Why TypeScript is preferred:

• Shows errors before running
• Gives auto-suggestions
• Prevents silly mistakes
• Easy to maintain large projects

🧠 Think of TypeScript as:

JavaScript with extra safety belt

---

5️⃣ JavaScript vs TypeScript (Simple Language)

JavaScript	TypeScript
No data type checking	Data type checking
Errors come at runtime	Errors come while typing
Easy to break	Safer
Small scripts	Big projects

Example:

let age: number = 25;

age = "twenty"; // ❌ TypeScript will stop you

---

6️⃣ How Code is Executed (Human → Computer Flow)

1. Human writes code (TypeScript)
2. TypeScript checks for errors
3. Code is converted to JavaScript
4. JavaScript is run by Node.js
5. Browser performs action

📌 Flow:

Human → TypeScript → JavaScript → Node.js → Browser

---

7️⃣ Installing Node.js (Very Important)

What is Node.js?

• Allows JavaScript/TypeScript to run on a computer
• Required for Playwright

Steps:

1. Go to 👉 https://nodejs.org
2. Download LTS version
3. Install → Next → Next → Finish

Verify Installation:

Open terminal (Command Prompt / PowerShell):

node -v

npm -v

✔ If versions appear → Installed successfully

---

8️⃣ Installing VS Code (Code Editor)

What is VS Code?

• Tool to write code
• Shows errors
• Gives auto suggestions

Steps:

1. Go to 👉 https://code.visualstudio.com
2. Download
3. Install with default options

Open VS Code

• You will write all code here

---

9️⃣ Running First Command in Terminal

What is Terminal?

• Text-based way to talk to computer

Open Terminal in VS Code:

• Click Terminal → New Terminal

Run first command:

node -v

✔ This proves:

• Terminal works
• Node.js is installed

---

🔟 Creating First TypeScript (.ts) File (Very Important)

Step-by-step:

1. Open VS Code
2. Click File → Open Folder
3. Create a folder:

4.  playwright-learning

5. Open that folder in VS Code
6. Right-click → New File
7. Name the file:

8.  firstTest.ts

📌 .ts means TypeScript file

 

How to install typescript

npm install -g typescript - - command in command prompt or in terminal

 

Check Typescript install or not --- 

tsc -v

Version 5.9.3

 

Install Playwright ---

npm init playwright@latest

---

1️⃣1️⃣ Writing First console.log() (Hello World)

Inside firstTest.ts, write:

console.log("Hello TypeScript");

What does this mean?

• console.log → print message
• "Hello TypeScript" → message text

🧠 This is used to:

• Check code execution
• Debug tests

---

1️⃣2️⃣ Running the TypeScript File

Step 1: Initialize project

Open terminal inside folder:

npm init -y

Step 2: Install TypeScript

npm install -D typescript

Step 3: Compile TypeScript

npx tsc firstTest.ts

➡️ This creates:

firstTest.js

Step 4: Run JavaScript file

node firstTest.js

Output:

Hello TypeScript

🎉 Congratulations! First TypeScript program executed!

---

1️⃣3️⃣ Common Beginner Mistakes

❌ Forgetting .ts extension
❌ Typing errors
❌ Running .ts directly without compiling
❌ Not opening correct folder

✔ All normal — no worry!

---

🎯 Session 1 Summary

• Programming = instructions to computer
• Playwright automates browsers
• TypeScript adds safety
• Node.js runs code
• VS Code writes code
• .ts file is TypeScript
• console.log() prints output

---

📌 Homework (Very Easy)

1. Create another file:

2.  test2.ts

3. Print your name:

console.log("My name is Sunil");