TypeScript and Playwright Basics for Testers: A Git Primer

AI can write test code in seconds, but you must be able to read it and tell if it is right. This lesson covers the TypeScript and Playwright basics you need for the rest of Level 4, plus just enough Git to keep your work safe. If you are new to coding, take your time here.

---

💡 Why Learn This If AI Writes the Code?

You do not need to be a developer. You do need to follow a test line by line.

---

🔍 TypeScript in Five Minutes

type TestUser = {
  username: string;
  age: number;
  active: boolean;
};

const user: TestUser = { username: 'asha', age: 34, active: true };

function isAdult(age: number): boolean {
  return age >= 18;
}

console.log(isAdult(user.age));

This prints true. Here is what each part means:

Code	Meaning
type TestUser	Describes the shape of some data
const user	A named value that will not be reassigned
age: number	This value must be a number
function isAdult	A reusable piece of logic

For a full introduction, see TypeScript Variables.

---

🧩 Your First Playwright Test

Follow Install Playwright to set up your project. The usual start is:

npm init playwright@latest
npx playwright test

Here is a real test for our Automation Practice Page.

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

test('Load Success shows a message', async ({ page }) => {
  await page.goto('https://sqatools.in/automation-practice-page/');
  await page.getByRole('button', { name: 'Load Success' }).click();
  await expect(page.locator('#loader')).toHaveText('Data loaded successfully!');
});

Part	Job
test(...)	Names one test
page	The browser tab Playwright controls
getByRole	Finds an element the way a user sees it
expect(...)	Checks the result

---

🛠️ Why Async and Await?

A missing await is one of the most common bugs in AI-generated tests. Check for it every time.

---

📌 Git in Five Commands

git init
git status
git add .
git commit -m "Add first Playwright test"
git diff

Run git diff before committing to see exactly what changed. This matters even more when AI has edited your files. Our Git and GitHub Tutorial goes much further.

---

🧪 Try It Yourself

1. Install Playwright using the guide linked above.
2. Copy the test from this lesson into a file ending in .spec.ts inside your tests folder.
3. Run it with npx playwright test.
4. Change the expected text, and confirm that the test fails.
5. Use the prompt below to explain any line you do not understand.

---

📋 Ready-to-Copy Prompt

You are a patient automation mentor teaching a manual tester.

Explain this Playwright TypeScript test line by line in plain English:

[paste test]

Then tell me:
1. What behaviour this test really proves
2. What it does not prove
3. One way it could pass even if the feature is broken

Do not rewrite the test yet. Use simple words.

---

⚠️ Common Mistakes

• Running AI code that you cannot read
• Forgetting await before an action or web-first assertion
• Committing secrets or node_modules
• Making one giant commit instead of small ones
• Changing a failing assertion just to get a pass

---

🎯 Key Takeaways

• You need to read code well enough to judge it.
• Types help catch mistakes early.
• A test finds elements, performs actions and checks results.
• Git lets you review AI changes and undo them.

---

🎤 Interview Questions

1. Why is TypeScript useful for test automation?

Model answer: It adds types, so editors can give better suggestions and catch many mistakes before tests run. This helps in larger frameworks and when reviewing generated code.

2. What do async and await do in a Playwright test?

Model answer: Playwright actions run asynchronously and return promises. The await keyword pauses that test step until the action finishes, so steps run in the intended order.

3. What are the main parts of a Playwright test?

Model answer: A test usually has a title, a page fixture, locators to find elements, actions such as click or fill, and assertions with expect to verify the outcome.

4. What is the difference between git add and git commit?

Model answer: git add puts selected changes in the staging area. git commit saves those staged changes as a new version in the repository history.

5. How do you check code that an AI tool has changed?

Model answer: I review the diff, read each changed line, run the tests and confirm the assertions still reflect the requirement. I also look for removed checks and accidental secrets.

---

📝 Assignment

Create a project with two tests for the practice page. Commit after each test with a clear message. Then break one test on purpose, read the failure, fix it and use git diff to review your change.

---

❓ FAQ

Should I learn JavaScript first?

It helps, but you can start here and fill gaps as you go. Our Playwright course covers JavaScript variables and more.

Do I need Python instead?

No. We use TypeScript in this course, and the same ideas apply to Playwright with Python.

---

🚀 Next Steps

Well done on finishing this lesson. Complete the assignment, then continue with AI Coding Assistants for Testers: Use Your IDE Safely.