[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ả, zoom to nhỏ bản đồ 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 ghê gớm đế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ụ: Anh này sẽ 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: các tiêu đề, dòng chữ, tấm ảnh, nút bấm... Một trang web chỉ có HTML thì trông 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à, chị này sẽ vào việc. Sơn tường màu gì, chọn gạch lát nền hoa văn nào, treo rèm cửa kiểu gì cho đẹp... đều là 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 của chúng ta trông lung linh, dễ nhìn.

• Đến đây, chúng ta đã có một ngôi nhà đẹp đẽ. Nhưng nó vẫn chỉ là một ngôi nhà "chết", không hơn không kém. Bạn có thể ngắm nó, chứ không làm gì được với nó cả.

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

• Nhiệm vụ: Đây chính là nhân vật mang lại sự sống. Anh kỹ sư này sẽ lắp đặt toàn bộ hệ thống điện nước. Nhờ có anh 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 bạn (như bấm chuột, cuộn trang, gõ phím) và 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 bạn phải 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.

Nó là ngôn ngữ duy nhất mà tất cả các trình duyệt web (Google Chrome, Firefox, Cốc Cốc...) đều hiểu được ngay từ đầu mà không cần phiên dịch gì cả.

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 các chỉ dẫn và ra lệnh cho trình duyệt.

• Ví von:  Hãy tưởng tượng một đoàn làm phim:

• Trình duyệt (Chrome, Firefox...): Là các diễn viên , có khả năng thực hiện các hành động như đi lại (điều hướng trang), nói (điền text), và tương tác (click chuột).

• Playwright: Là trợ lý đạo diễn . Anh ta hiểu rõ từng diễn viên và cung cấp cho bạn các "công cụ" mạnh mẽ (như page.goto(), page.locator(), expect()) để làm việc với họ.

• Bạn (Automation Tester): Là đạo diễn .

• Code JavaScript của bạn: Chính là cuốn kịch bản . Bạn sẽ viết kịch bản bằng ngôn ngữ JavaScript để chỉ đạo người trợ lý Playwright, và người trợ lý sẽ ra lệnh cho diễn viên trình duyệt thực hiện chính xác những gì bạn muốn.
  
  

Tại sao học JavaScript rồi lại 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ó thêm bước này?

Câu trả lời ngắn gọn: Bạn có thể viết Playwright chỉ với JavaScript thuần túy. Nhưng việc sử dụng TypeScript sẽ giúp kịch bản test của bạn trở nê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ư bạn xây một ngôi nhà bằng những viên gạch thường. Bạn hoàn toàn có thể xây được.

• Viết test bằng TypeScript: Giống như bạn xây nhà bằng những viên gạch LEGO . Mọi thứ đều được chuẩn hóa, khớp với nhau một cách hoàn hảo, khó có thể lắp sai, và việc xây dựng các cấu trúc phức tạp trở nên dễ dàng hơn nhiều.

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()). Bạn sẽ chỉ phát hiện ra lỗi này khi chạy test và nó thất bại.

• 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 rằng không có phương thức nào tên là clik() tồn tại trên đối tượng page.

• Gợi ý code "thần sầu" :

• Với JavaScript: Khi bạn gõ page., trình soạn thảo có thể đưa ra một vài gợi ý chung chung.

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

• Dễ đọc và dễ bảo trì :

• Với JavaScript: function login(user, pass) { ... }

• Với 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 có cấu trúc User, pass phải là chuỗi, và hàm này là một hành động bất đồng bộ. Điều này cực kỳ hữu ích khi bạn làm việc trong một team hoặc xem lại code của mình sau này.

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. Khóa học này sẽ trang bị cho bạn cả hai.

✅ Phần 2: Cài đặt Visual Studio Code (VS Code)  và LiveServer

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 phát hiệ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 ô:

  • 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)

• Điều này sẽ giúp bạn mở một thư mục bất kỳ bằng VS Code một cách nhanh chóng sau này.

Bước 3: Làm quen 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:

• (1) Trình khám phá file (Explorer): Cây thư mục dự án của bạn ở bên trái.

• (2) Cửa sổ soạn thảo (Editor): Nơi bạn sẽ gõ code chính.

• (3) Thanh hoạt động (Activity Bar): Chứa các biểu tượng chức năng như Tìm kiếm, Git, và quan trọng nhất là Tiện ích mở rộng (Extensions)

Cài đặt Tiện ích "Live Server"

Bước 1: Mở tab Tiện ích

• Trên thanh hoạt động (Activity Bar) bên trái, nhấp vào biểu tượng các ô vuông (Extensions) hoặc nhấn tổ hợp phím Ctrl+Shift+X.

Bước 2: Tìm kiếm

• Trong ô tìm kiếm ở trên cùng, gõ "Live Server".

• Kết quả đầu tiên hiện ra, được phát triển bởi Ritwick Dey, là tiện ích chúng ta cần.

Bước 3: Cài đặt

• Nhấp vào nút Install màu xanh. 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), 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 bạn vừa tạo.

• Trình khám phá file (Explorer) bên trái bây giờ sẽ hiển thị thư mục của bạn.

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

• Click chuột phải vào Folder Bài 1 chọn "New File" và đặt tên index.html

• Gõ ! và nhấn Enter. VS Code sẽ tự động tạo cho bạn một cấu trúc file HTML cơ bản.

• Thêm thẻ <script> vào trước thẻ đóng </body> như sau:

<!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ự, tạo một file mới trong thư mục Bai1 tên là bai1.js.

• Trong file này, gõ dòng code JavaScript đầu tiên của bạn:

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 một nút có chữ "Go Live". Hãy nhấp vào đó.

• Cách khác: Nhấp chuột phải vào file index.html trong Explorer và 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 hiện lê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 tuyệt vời nhất: Bây giờ, hãy quay lại file bai1.js trong VS Code, sửa lại dòng alert(...) thành một nội dung khác (ví dụ: alert("Live Server thật tuyệt!");) và nhấn Ctrl+S (lưu file). Bạn sẽ thấy trình duyệt tự động làm mới và hiển thị hộp thoại alert mới!

Chúc mừng! Bạn đã cài đặt thành công một môi trường để học JS/TS rồi. Đây sẽ là nền tảng cho tất cả các bài học tiếp theo của chúng ta.