[Javascript Typescript] Bài 1 - Giới thiệu và cài đặt môi trường Javascript

🚀 Phần 1: Giới thiệu về JavaScript

Chắc bạn không lạ gì cảnh lướt Facebook, bấm "Thích" một cái là con số tự động nhảy lên, phải không? Hay lúc dùng Google Maps, bạn có thể kéo thả, phóng to, thu nhỏ bản đồ rất mượt mà?

Tất cả những điều "vi diệu" đó đều có chung một bí mật đằng sau: JavaScript. Hôm nay, chúng ta sẽ cùng tìm hiểu xem nó là gì mà lại có sức mạnh lớn đến vậy.

🏗️ 1. Câu chuyện về một trang web: Bộ ba không thể thiếu

Để dễ hình dung, hãy xem việc làm ra một trang web cũng giống như xây một ngôi nhà. Để ngôi nhà hoàn chỉnh, ta cần đến 3 "tay thợ" chính:

• HTML (Anh thợ xây - Dựng phần thô)

  Nhiệm vụ: Tạo ra bộ khung xương cho ngôi nhà. Đâu là tường, đâu là mái, đâu là cửa ra vào, cửa sổ... tất cả đều do HTML quyết định.

  Trên web: HTML tạo ra các thành phần cơ bản nhất như tiêu đề, đoạn chữ, hình ảnh, nút bấm... Một trang web chỉ có HTML thì sẽ rất "trần trụi" và đơn điệu.

• CSS (Chị thợ trang trí - Khoác áo mới)

  Nhiệm vụ: Sau khi có khung nhà, CSS sẽ đảm nhận việc trang trí. Sơn tường màu gì, chọn gạch lát nền ra sao, treo rèm cửa thế nào... đều là phần việc của CSS.

  Trên web: CSS sẽ tô màu, đổi font chữ, sắp xếp lại bố cục... nói chung là "trang điểm" cho trang web để nó trông đẹp hơn và dễ nhìn hơn.

• JavaScript (Kỹ sư điện nước - Thổi hồn vào ngôi nhà)

  Nhiệm vụ: Đây là nhân vật mang lại sự sống. Nhờ có "anh kỹ sư" này mà bạn bấm công tắc thì đèn sáng, nhấn chuông thì chuông kêu, mở vòi thì nước chảy. Ngôi nhà giờ đây đã có thể tương tác với bạn.

  Trên web: JavaScript chính là bộ não. Nó lắng nghe mọi hành động của người dùng như bấm chuột, cuộn trang, gõ phím... rồi phản hồi lại ngay lập tức. Nó có thể thay đổi nội dung, đổi màu sắc, tạo hiệu ứng mà không cần tải lại cả trang.

✨ Nhớ nhé: HTML dựng nên bộ khung, CSS làm cho nó đẹp, còn JavaScript làm cho nó "sống" và hoạt động được. Bộ ba này luôn đi cùng nhau như hình với bóng.

📘 2. Nói toẹt ra thì JavaScript là gì?

Nói một cách dễ hiểu nhất, JavaScript là một ngôn ngữ lập trình chuyên dùng để tạo ra sự tương tác trên các trang web.

Đây cũng là ngôn ngữ duy nhất mà tất cả các trình duyệt web như Google Chrome, Firefox hay Cốc Cốc đều có thể hiểu được ngay từ đầu mà không cần cài thêm gì.

🎭 3. Ứng dụng của JavaScript trong Playwright

Vậy JavaScript liên quan gì đến Playwright?

Playwright sử dụng JavaScript (hoặc TypeScript) làm ngôn ngữ để bạn viết chỉ dẫn và ra lệnh cho trình duyệt.

Hãy tưởng tượng như một đoàn làm phim:

• 🎬 Trình duyệt (Chrome, Firefox...): Là các diễn viên, có thể thực hiện các hành động như điều hướng trang, điền nội dung và click chuột.
• 🧭 Playwright: Là trợ lý đạo diễn. Nó hiểu rõ từng "diễn viên" và cung cấp cho bạn những công cụ mạnh như page.goto(), page.locator(), expect() để điều phối công việc.
• 👨‍💻 Bạn (Automation Tester): Là đạo diễn.
• 📜 Code JavaScript của bạn: Chính là kịch bản. Bạn viết kịch bản bằng JavaScript, Playwright đọc kịch bản đó rồi ra lệnh cho trình duyệt thực hiện đúng những gì bạn muốn.

🧩 Tại sao học JavaScript rồi vẫn cần cả TypeScript?

Sau khi hiểu vai trò của JavaScript, bạn sẽ thấy rằng hầu hết các dự án Playwright chuyên nghiệp hiện nay đều được viết bằng TypeScript.

Vậy tại sao lại cần thêm bước này? Câu trả lời ngắn gọn là: bạn hoàn toàn có thể viết Playwright bằng JavaScript thuần. Tuy nhiên, TypeScript sẽ giúp kịch bản test của bạn an toàn hơn, dễ bảo trì hơn và hiệu quả hơn rất nhiều.

• 🧱 Viết test bằng JavaScript: Giống như xây nhà bằng những viên gạch thường. Bạn vẫn có thể xây được.
• 🧩 Viết test bằng TypeScript: Giống như xây nhà bằng các viên gạch LEGO. Mọi thứ được chuẩn hóa, khớp với nhau tốt hơn, khó lắp sai hơn và dễ mở rộng hơn.

🛠️ TypeScript giải quyết những vấn đề gì của JavaScript trong Automation?

🔎 Phát hiện lỗi sớm

Với JavaScript, bạn có thể gõ nhầm tên một phương thức của Playwright, ví dụ page.clik() thay vì page.click(). Lỗi này thường chỉ lộ ra khi bạn chạy test.

Với TypeScript, trình soạn thảo code sẽ gạch chân đỏ và báo lỗi ngay khi bạn đang gõ vì nó biết phương thức clik() không tồn tại trên đối tượng page.

💡 Gợi ý code chính xác hơn

Với JavaScript, khi bạn gõ page., trình soạn thảo có thể chỉ đưa ra vài gợi ý chung chung.

Với TypeScript, nó sẽ hiển thị danh sách chính xác các hành động hợp lệ như goto(), locator(), click()..., kèm mô tả và tham số cần truyền. Điều này giúp bạn viết code nhanh hơn và ít sai hơn.

📚 Dễ đọc và dễ bảo trì hơn

So sánh hai ví dụ sau:

💻 Ví dụ JavaScript:

function login(user, pass) { ... }

💻 Ví dụ TypeScript:

function login(user: User, pass: string): Promise<void> { ... }

Phiên bản TypeScript rõ ràng hơn nhiều: nó cho bạn biết user phải là một object theo cấu trúc User, pass phải là chuỗi, và hàm này là một tác vụ bất đồng bộ.

Điều này đặc biệt hữu ích khi bạn làm việc theo nhóm hoặc xem lại code của chính mình sau một thời gian.

✅ Kết luận: Học JavaScript là điều kiện bắt buộc vì nó là ngôn ngữ nền tảng. Sau khi đã nắm vững, việc học thêm TypeScript là bước nâng cấp để bạn có thể xây dựng các framework automation chuyên nghiệp, có cấu trúc chặt chẽ và ít lỗi hơn.

🖥️ Phần 2: Cài đặt Visual Studio Code (VS Code) và Live Server

⬇️ Bước 1: Tải xuống

Truy cập trang web chính thức của VS Code tại https://code.visualstudio.com/.

Trang web sẽ tự động nhận diện hệ điều hành của bạn (Windows, macOS, Linux). Hãy nhấp vào nút tải xuống phiên bản ổn định (Stable).

⚙️ Bước 2: Cài đặt

Mở file bạn vừa tải về và thực hiện các bước cài đặt.

Trên Windows, bạn chỉ cần nhấn Next liên tục.

Quan trọng: Ở màn hình Select Additional Tasks, hãy đảm bảo bạn đã tích vào các ô sau:

• Add "Open with Code" action to Windows Explorer file context menu
• Add "Open with Code" action to Windows Explorer directory context menu
• Add to PATH (requires shell restart)

Những tùy chọn này sẽ giúp bạn mở nhanh file hoặc thư mục bất kỳ bằng VS Code trong quá trình làm việc sau này.

🧭 Bước 3: Làm quen với giao diện

Mở VS Code lên. Giao diện chính sẽ có vài khu vực bạn cần biết:

• 📁 Explorer: Cây thư mục dự án ở bên trái.
• ✍️ Editor: Khu vực bạn sẽ soạn thảo code.
• 🧰 Activity Bar: Thanh biểu tượng chứa các chức năng như Search, Git và Extensions.

🔌 Cài đặt tiện ích Live Server

1. Mở tab Extensions

Trên thanh Activity Bar bên trái, nhấp vào biểu tượng Extensions hoặc dùng tổ hợp phím Ctrl+Shift+X.

2. Tìm kiếm

Trong ô tìm kiếm ở phía trên, gõ Live Server.

Kết quả đầu tiên do Ritwick Dey phát triển chính là tiện ích bạn cần.

3. Cài đặt

Nhấp vào nút Install. Quá trình cài đặt chỉ mất vài giây. Sau khi cài xong, bạn có thể cần khởi động lại VS Code.

🧪 Phần 3: Tạo và chạy project đầu tiên

Bây giờ, chúng ta sẽ kết hợp mọi thứ lại để xem "phép màu" xảy ra.

📂 Bước 1: Tạo thư mục dự án

Trên máy tính của bạn, ví dụ ngoài Desktop, hãy tạo một thư mục mới và đặt tên là JS_TS_BASIC.

📥 Bước 2: Mở thư mục trong VS Code

Trong VS Code, vào File > Open Folder... và chọn thư mục JS_TS_BASIC mà bạn vừa tạo.

Trong Explorer, thư mục của bạn sẽ xuất hiện ở bên trái.

📝 Bước 3: Tạo file index.html

Trong Explorer, click chuột phải, chọn New Folder và đặt tên là Bai1.

Sau đó click chuột phải vào thư mục Bai1, chọn New File và đặt tên là index.html.

Gõ ! rồi nhấn Enter. VS Code sẽ tự động tạo cho bạn cấu trúc HTML cơ bản. Sau đó thêm thẻ <script> vào trước thẻ đóng </body> như sau:

💻 Mẫu file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Học JavaScript</title>
</head>
<body>
<h1>Chào mừng đến với JavaScript!</h1>
<script src="bai1.js"></script>
</body>
</html>

📄 Bước 4: Tạo file bai1.js

Tương tự, hãy tạo một file mới trong thư mục Bai1 với tên bai1.js.

Trong file này, nhập đoạn code JavaScript đầu tiên của bạn:

💻 Mẫu file bai1.js:

console.log("Hello from bai1.js!");
alert("JavaScript đang chạy!");

▶️ Bước 5: Chạy Live Server

Quay lại file index.html. Ở góc dưới cùng bên phải của VS Code, bạn sẽ thấy nút Go Live. Hãy nhấp vào đó.

Cách khác, bạn có thể click chuột phải vào file index.html trong Explorer rồi chọn Open with Live Server.

👀 Bước 6: Xem kết quả và thử thay đổi

Một cửa sổ trình duyệt mới sẽ tự động mở ra. Bạn sẽ thấy ngay một hộp thoại alert xuất hiện.

Nhấn F12 để mở Developer Tools của trình duyệt, chuyển qua tab Console, bạn sẽ thấy dòng chữ Hello from bai1.js!.

Điều thú vị nhất là: nếu bạn quay lại file bai1.js trong VS Code, sửa nội dung của alert(...) thành một câu khác, rồi nhấn Ctrl+S để lưu, trình duyệt sẽ tự động làm mới và hiển thị nội dung mới.

🎉 Chúc mừng! Bạn đã cài đặt thành công một môi trường để học JavaScript và TypeScript. Đây sẽ là nền tảng cho các bài học tiếp theo.

⚡ Phần 4: Cài đặt Code Runner - Chạy code siêu tốc không cần trình duyệt

Ở Phần 3, chúng ta đã dùng Live Server để chạy JavaScript kết hợp với giao diện web (HTML). Tuy nhiên, khi bạn chỉ muốn test nhanh một đoạn thuật toán, một vòng lặp hay cấu trúc dữ liệu mà không muốn phải tạo file HTML, thì tiện ích Code Runner là giải pháp rất gọn.

⚠️ Lưu ý quan trọng: Để Code Runner có thể chạy được JavaScript trực tiếp ngay trong VS Code, máy tính của bạn bắt buộc phải cài sẵn Node.js. Nếu chưa có, hãy truy cập https://nodejs.org/, tải phiên bản LTS và cài đặt theo hướng dẫn.

🔍 Bước 1: Tìm và cài đặt tiện ích

Trên thanh hoạt động bên trái, mở lại tab Extensions hoặc nhấn Ctrl+Shift+X.

Gõ Code Runner vào ô tìm kiếm.

Chọn tiện ích có biểu tượng nút chạy màu vàng của tác giả Jun Han, rồi nhấn Install.

🧾 Bước 2: Viết thử một đoạn JavaScript thuần

Trong Explorer, tạo một file mới tên là test.js. File này không cần liên kết với HTML.

Sau đó nhập đoạn code sau:

💻 Mẫu file test.js:

let a = 10;
let b = 20;
console.log("Tổng của a và b là:", a + b);

🖱️ Bước 3: Chạy code chỉ với một cú click

Nhìn lên góc trên cùng bên phải của VS Code, bạn sẽ thấy biểu tượng nút Play (▶).

Hãy click vào nút đó, hoặc dùng phím tắt Ctrl+Alt+N.

📤 Bước 4: Nhận kết quả tức thì

Ngay lập tức, khu vực điều khiển phía dưới màn hình sẽ bật lên và tự động chuyển sang tab Output.

Bạn sẽ thấy kết quả được in ra như sau:

📦 Kết quả trong tab Output:

Tổng của a và b là: 30