Session 3: Type Safety (Why TypeScript Is Special)


📘 Session 3: Type Safety (Why TypeScript Is Special)

Playwright with TypeScript

1️⃣ What is Type Checking?

👉 Type checking means:

TypeScript checks what kind of data you are using before running the code

Examples of types:

  • string → text

  • number → numeric

  • boolean → true / false

📌 TypeScript acts like a strict teacher who checks mistakes early.

2️⃣ Compile-Time Error vs Runtime Error

🔴 Runtime Error (JavaScript)

❌ Error happens after running the program

let age = "twenty";
console.log(age.toFixed(2)); // 💥 crash at runtime

🟢 Compile-Time Error (TypeScript)

❌ Error shown while writing code

let age: number = "twenty"; // ❌ ERROR

✔ VS Code underlines it before execution

📌 This saves time, money, and production bugs

3️⃣ Why TypeScript Prevents Mistakes

TypeScript:

  • Stops wrong data assignments

  • Warns before test execution

  • Reduces flaky automation tests

Playwright example:

let timeout: number = 5000;
timeout = "fast"; // ❌ blocked by TypeScript

👉 In JavaScript this would run and fail later.

4️⃣ Declaring Type Explicitly

Syntax:

let variableName: type = value;

Examples:

let username: string = "admin";
let retryCount: number = 3;
let isVisible: boolean = true;

📌 Explicit typing = clear + safe + professional

5️⃣ Type Mismatch Examples (Very Common)

❌ Wrong type assignment

let age: number = "28"; // ERROR

❌ Boolean mismatch

let isLoggedIn: boolean = "yes"; // ERROR

❌ Number used as string

let timeout: number = 5000;
console.log(timeout.toUpperCase()); // ERROR

6️⃣ Understanding Error Messages in VS Code

VS Code will show:

  • Red underline

  • Hover message like:

Type 'string' is not assignable to type 'number'

👉 Meaning:

You are assigning wrong data type

📌 Teach students to read errors, not fear them.

7️⃣ Fixing Type Errors

Fix 1: Correct the value

let age: number = 28; // ✅

Fix 2: Change the type

let age: string = "28"; // ✅

Fix 3: Remove wrong method usage

let count: number = 10;
console.log(count.toString()); // ✅

8️⃣ Playwright Context Example

const baseUrl: string = "https://example.com";
let browserName: string = "chromium";
let pageLoadTimeout: number = 30000;
let isTestPassed: boolean = false;

console.log(`Browser: ${browserName}`);
console.log(`URL: ${baseUrl}`);
console.log(`Timeout: ${pageLoadTimeout}`);
console.log(`Test Passed: ${isTestPassed}`);

9️⃣ Why Companies Prefer TypeScript for Playwright

✅ Fewer automation failures

✅ Errors caught before execution

✅ Better IDE support (auto-suggest)

✅ Easy maintenance for big frameworks

✅ Clean and readable test code

✅ Strong team collaboration

📌 That’s why Playwright officially recommends TypeScript.

🧪 Practice Code (Must Run)

let userName: string = "Sunil";
let age: number = 28;
let isAutomationTester: boolean = true;

console.log(`Name: ${userName}`);
console.log(`Age: ${age}`);
console.log(`Automation Tester: ${isAutomationTester}`);

📝 Homework Section

🔹 Homework 1 (Easy)

Declare variables with proper types:

  • city

  • pincode

  • isMarried

🔹 Homework 2 (Error Finder)

Find and fix errors:

let price: number = "500";
let status: boolean = "true";

🔹 Homework 3 (Playwright Style)

Create variables for:

  • browser name (string)

  • timeout (number)

  • login success (boolean)

Print all using template strings.

🔹 Homework 4 (Think Like TS)

What error will TypeScript show here?

let count: number = 10;
count = "ten";

📘 Session 3 (Extended): Type Safety + Compilation & Run Commands

Playwright with TypeScript

1️⃣ How TypeScript Code Actually Runs

👉 Important truth for students:

Browsers & Node.js do NOT understand TypeScript

So flow is:

TypeScript (.ts)

      ↓ compile

JavaScript (.js)

      ↓ run

Output

📌 TypeScript is for developers
📌 JavaScript is for execution

2️⃣ Compile TypeScript → JavaScript (Manual Way)

Step 1: Check TypeScript installed

tsc --version

If not installed:

npm install -g typescript

Step 2: Create a TS file

test.ts

let name: string = "Sunil";

let age: number = 28;

 

console.log(`Name: ${name}, Age: ${age}`);

Step 3: Compile TS to JS

tsc test.ts

✔ Output:

test.js

Step 4: Run JS file

node test.js

📌 This is the traditional & interview-friendly approach.

3️⃣ What If There Is a Type Error?

let age: number = "twenty";

Run:

tsc test.ts

❌ Compilation fails:

Type 'string' is not assignable to type 'number'

👉 JS file will NOT be generated

📌 This is TypeScript’s power 💪

4️⃣ Run TypeScript Directly (No Manual Compile)

🔥 Using ts-node (Most Loved by Testers)

Install:

npm install -g ts-node

Run directly:

ts-node test.ts

✔ No .js file needed
✔ Faster for practice
✔ Great for beginners

5️⃣ One-Time Setup for Projects (Recommended)

Install locally:

npm init -y

npm install --save-dev typescript ts-node

Run:

npx ts-node test.ts

📌 This is real project style.

6️⃣ Compile Entire Project (tsconfig.json)

Create config:

tsc --init

Now compile all .ts files:

tsc

📌 Used in real Playwright frameworks.

7️⃣ Playwright Special Case (IMPORTANT)

👉 You never run ts-node manually for Playwright tests.

Playwright command:

npx playwright test

Behind the scenes:

  • Playwright automatically compiles TS
  • Runs tests using Node.js
  • Uses tsconfig.json

📌 That’s why Playwright + TS is smooth 🚀

8️⃣ Compare All Commands (Student Friendly Table)

Purpose

Command

Check TS installed

tsc --version

Compile TS → JS

tsc file.ts

Run JS

node file.js

Run TS directly

ts-node file.ts

Project run

npx ts-node file.ts

Run Playwright

npx playwright test

9️⃣ Practice Task (Must Do)

🔹 Task 1

Create sample.ts:

let browser: string = "Chromium";

let timeout: number = 30000;

let isHeadless: boolean = false;

 

console.log(browser, timeout, isHeadless);

Run using:

tsc sample.ts

node sample.js

🔹 Task 2

Run same file using:

ts-node sample.ts

🔹 Task 3 (Error Test)

Add this line:

timeout = "fast";

Run again and observe error

📝 Homework (Commands Focused)

Homework 1

  • Create a .ts file
  • Compile it
  • Run .js output

Homework 2

  • Install ts-node
  • Run TS directly
  • Explain difference in 2 lines

Homework 3 (Playwright Thinking)

Answer:

Why don’t we run ts-node manually for Playwright tests?


Comments

Post a Comment

Popular posts from this blog

K6 performance test

 Here is a Beginner k6 Learning Syllabus + API Performance Examples designed specifically for you (Automation QA → Selenium → Playwright → API Testing → Performance Testing) 🚀 🚀 Beginner k6 Learning Syllabus Module 1 — Performance Testing Basics Before learning k6 , understand: What is Performance Testing? Load Testing Stress Testing Spike Testing Endurance Testing Important Terms Term Meaning VU Virtual Users TPS Transactions per second Response Time API response duration Throughput Requests per second Latency Time before request starts Module 2 — Installing k6 Ways to Install: Chocolatey (You tried already) Winget Download Binary Verify: k6 version Module 3 — First k6 Script Create file: test.js Code: import http from 'k6/http'; export default function () { http.get('https://test.k6.io'); } Run: k6 run test.js Module 4 — Virtual Users (Load Testing) Example: import http from 'k6/http'; export const options = { vus: 10, duration: '10s', }; ...
Read more

k6 and jmeter intro

Mastering k6 and JMeter will allow you to offer "Performance Audits," which are high-value freelance services. Since you already know Java and TypeScript, you can learn these tools simultaneously by mapping them to your existing skills. Here is your focused 3-month roadmap for Performance and Security testing. Month 1: Modern Performance with k6 (TypeScript Focus) Because you know Playwright and TypeScript, k6 will feel very natural. It uses a "Performance as Code" approach.  * Week 1: Fundamentals & Scripting    * Install k6 and set up your environment.    * Learn the k6 life cycle: init, setup, default function (the VU code), and teardown.    * Task: Convert one of your Rest Assured API tests into a k6 script. Use http.get and check() for assertions.  * Week 2: Load Profiles & Scenarios    * Learn to configure Options: Virtual Users (VUs), Duration, and Ramping (Stages).    * Understand the 4 types of tests: Smoke (mi...
Read more

3 month

Moving into Security Testing is a brilliant pivot. In the 2026 freelance market, "Automation Engineers" are common, but "Security-Aware SDETs" are rare and highly paid. Since you already have a technical foundation in Java and TypeScript, you can approach security from a "Shift-Left" perspective—automating security checks directly into the code. 3-Month Learning Path: Security & Advanced QA Month 1: The "Hacker Mindset" & Web Security Before touching tools, you must understand how applications are attacked.  * Focus: The OWASP Top 10 (2026 Update). This is the "Bible" of web vulnerabilities.  * Key Concepts to Master:    * Injection: SQL Injection and the new Prompt Injection (for AI-integrated apps).    * Broken Access Control: Testing if a regular user can access admin APIs.    * SSRF (Server-Side Request Forgery): A massive risk in cloud-native apps.  * Hands-on Practice: Use "OWASP Juice Shop" (a broken web app). T...
Read more