[Javascript Typescript] Bài 3 - Logic và rẽ nhánh

✅Câu lệnh rẽ nhánh if, else
✅Toán tử 3 ngôi
✅Truthy và falsy
✅Lựa chọn với câu lệnh switch...case

Hãy tưởng tượng kịch bản test của bạn giống như một người đang đi trên một con đường thẳng 🛣️. Câu lệnh if/else chính là những ngã rẽ. Tại mỗi ngã rẽ, người đó sẽ nhìn vào một "biển báo" (điều kiện boolean) để quyết định xem nên đi thẳng, rẽ trái, hay rẽ phải.

Điều này cho phép chúng ta viết các kịch bản linh hoạt, có thể xử lý nhiều tình huống khác nhau thay vì chỉ chạy một lèo từ trên xuống dưới.

Phần 1: Cú pháp if đơn (Ngã rẽ "có hoặc không" ✅)

Đây là dạng cơ bản nhất. Nó kiểm tra một điều kiện, nếu điều kiện đó là true, nó sẽ thực hiện một khối lệnh. Nếu là false, nó sẽ bỏ qua khối lệnh đó và đi tiếp.

Định nghĩa chung

Cú pháp: if (điều_kiện) { // Code sẽ chạy nếu điều_kiện là true }
Ví von 🗣️: "Nếu trời mưa 🌧️, thì tôi sẽ mang ô ☂️." Nếu trời không mưa, bạn đơn giản là không làm gì liên quan đến cái ô cả và tiếp tục công việc của mình.

Ví dụ cơ bản:

let nhietDo = 32;

// Chỉ thực hiện khối lệnh bên trong nếu điều kiện `nhietDo > 30` là true.
if (nhietDo > 30) {
  console.log("Trời hôm nay nóng, nên mặc áo cộc tay.");
}

console.log("Chúc bạn một ngày tốt lành!");

Ứng dụng trong Automation 🤖

Bạn sẽ dùng if đơn khi cần thực hiện một hành động không bắt buộc, chỉ xảy ra trong một số trường hợp.

Kịch bản: Kịch bản của bạn cần đóng một popup quảng cáo, nhưng popup này không phải lúc nào cũng xuất hiện.

// Giả lập kết quả từ Playwright: popup có hiển thị
const popupKhuyenMaiIsVisible = true;

console.log("Bắt đầu kiểm tra trang chủ...");

// Chỉ thực hiện click đóng nếu popup đang hiển thị
if (popupKhuyenMaiIsVisible) {
  console.log("LOG: Popup đang hiển thị. Thực hiện click nút 'Đóng'.");
  // Trong code thật: await page.locator('#popup-close-button').click();
}

console.log("Tiếp tục các bước test khác trên trang chủ...");

Phần 2: Cú pháp if...else (Ngã ba đường ↔️)

Dạng này cung cấp hai lựa chọn: một cho trường hợp true và một cho trường hợp false. Chương trình của bạn chắc chắn sẽ đi vào một trong hai nhánh.

Định nghĩa chung

Cú pháp: if (điều_kiện) { // Code nếu true } else { // Code nếu false }
Ví von 🗣️: "Nếu trời mưa 🌧️, thì tôi mang ô ☂️. Ngược lại (else), tôi sẽ đội mũ 🧢." Bạn luôn thực hiện một trong hai hành động.

Ví dụ cơ bản:

let diemTrungBinh = 4.5;

if (diemTrungBinh >= 5.0) {
  console.log("Chúc mừng, bạn đã qua môn!");
} else {
  console.log("Rất tiếc, bạn cần học lại.");
}

Ứng dụng trong Automation 🤖

Đây là cấu trúc hoàn hảo để báo cáo kết quả của một bước kiểm tra (assertion): hoặc là PASS ✅, hoặc là FAIL ❌.

Kịch bản: Kiểm tra xem tiêu đề của trang web có đúng với mong đợi hay không.
Ví dụ Automation:

const tieuDeThucTe = "Giỏ hàng"; // Lấy từ web
const tieuDeMongDoi = "Sản phẩm";

const isTitleCorrect = tieuDeThucTe === tieuDeMongDoi;

if (isTitleCorrect) {
  console.log("TEST PASS: Tiêu đề trang chính xác.");
} else {
  console.log(`TEST FAIL: Tiêu đề sai! Mong đợi: '${tieuDeMongDoi}', Thực tế: '${tieuDeThucTe}'.`);
}

Phần 3: Cú pháp if...else if...else (Nhiều ngã rẽ 🚦)

Khi bạn có nhiều hơn hai khả năng, bạn có thể nối nhiều điều kiện lại với nhau. JavaScript sẽ kiểm tra các điều kiện từ trên xuống dưới và sẽ thực thi khối lệnh của điều kiện đầu tiên mà nó thấy là true.

Định nghĩa chung

Cú pháp: if (dk1) { ... } else if (dk2) { ... } else { ... }
Ví von 🗣️: "Nếu là thứ Hai, tôi đi làm 👨‍💼. Ngược lại, nếu là thứ Bảy, tôi đi chơi 🏞️. Ngược lại, nếu là Chủ nhật, tôi ở nhà 🏠. Ngược lại, tôi làm việc khác."

Ví dụ cơ bản:

let diemSo = 7.5;


if (diemSo >= 8.0) {
  console.log("Xếp loại: Giỏi");
} else if (diemSo >= 6.5) {
  console.log("Xếp loại: Khá");
} else if (diemSo >= 5.0) {
  console.log("Xếp loại: Trung bình");
} else {
  console.log("Xếp loại: Yếu");
}

Ứng dụng trong Automation 🤖

Rất hữu ích khi bạn cần thực hiện các kịch bản test khác nhau dựa trên trạng thái hoặc dữ liệu cụ thể của ứng dụng.

Kịch bản: Chạy các luồng test khác nhau tùy thuộc vào vai trò của người dùng (admin, editor, viewer) được hiển thị trên trang.
Ví dụ Automation:

// Giả lập vai trò lấy từ web
const userRole = "editor";

console.log(`Phát hiện vai trò người dùng là: ${userRole}`);

if (userRole === "admin") {
  console.log("LOG: Thực hiện kịch bản test cho Admin (ví dụ: xóa người dùng).");
  // ... code test cho admin ...
} else if (userRole === "editor") {
  console.log("LOG: Thực hiện kịch bản test cho Editor (ví dụ: sửa bài viết).");
  // ... code test cho editor ...
} else if (userRole === "viewer") {
  console.log("LOG: Thực hiện kịch bản test cho Viewer (ví dụ: chỉ đọc).");
  // ... code test cho viewer ...
} else {
  console.log("WARNING: Không nhận diện được vai trò người dùng. Dừng test.");
}

Phần 4: Toán tử 3 ngôi

Tiếp theo, chúng ta sẽ học một "lối tắt" ⚡ cực kỳ hữu ích cho câu lệnh if...else đơn giản. Khi bạn chỉ cần gán một trong hai giá trị cho một biến dựa trên một điều kiện, việc dùng if/else đôi khi hơi dài dòng. Toán tử Ba ngôi (Ternary Operator) 🔱 sẽ giúp bạn giải quyết việc này chỉ trong một dòng duy nhất.

Định nghĩa chung 🤔

Toán tử ba ngôi là cách viết rút gọn của một câu lệnh if...else. Nó được gọi là "ba ngôi" vì có 3 phần (toán hạng) tham gia vào biểu thức.

Cú pháp:
điều_kiện ? giá_trị_nếu_true : giá_trị_nếu_false
Cách đọc:
"Điều kiện này đúng không? (?) Nếu đúng, dùng giá trị này. Ngược lại (:), dùng giá trị kia."

Ví dụ so sánh ⚖️

Hãy xem cách nó rút gọn một câu lệnh if/else thông thường.

let diem = 4;
let ketQua;

// --- CÁCH DÙNG IF/ELSE (DÀI DÒNG 📜) ---
if (diem >= 5) {
  ketQua = "Đỗ";
} else {
  ketQua = "Trượt";
}
console.log(`Kết quả (dùng if/else): ${ketQua}`);

// --- CÁCH DÙNG TOÁN TỬ BA NGÔI (NGẮN GỌN ✨) ---
const ketQuaNhanh = diem >= 5 ? "Đỗ" : "Trượt";
console.log(`Kết quả (dùng ba ngôi): ${ketQuaNhanh}`);

Ứng dụng trong Automation 🤖

Toán tử ba ngôi rất tuyệt vời để gán các giá trị cấu hình hoặc tạo các thông báo log động một cách nhanh chóng, giúp cho phần chuẩn bị dữ liệu test của bạn (test setup) trở nên sạch sẽ và gọn gàng hơn.

Kịch bản 1: Chọn URL môi trường 🌐
Kịch bản của bạn cần chạy trên các môi trường khác nhau (staging hoặc production) và bạn cần chọn đúng URL.

const isProductionTest = false; // Thay đổi giá trị này để xem kết quả

const baseURL = isProductionTest ? "https://production.example.com" : "https://staging.example.com";

console.log(`Kịch bản đang chạy trên môi trường: ${baseURL}`);
// Kết quả: Kịch bản đang chạy trên môi trường: https://staging.example.com


Kịch bản 2: Tạo log báo cáo trực quan 📝
Tạo log báo cáo kết quả test case với icon.
JavaScript
const testStatus = "Passed";

const statusIcon = testStatus === "Passed" ? "✅" : "❌";

console.log(`Kết quả Test Case 01: ${statusIcon} - ${testStatus}`);
// Kết quả: Kết quả Test Case 01: ✅ - Passed

Nâng cao: Toán tử Ba ngôi Lồng nhau 🚀

Khi bạn có nhiều hơn hai khả năng, bạn có thể đặt một toán tử ba ngôi khác vào vị trí giá_trị_nếu_false của toán tử ba ngôi bên ngoài.

So sánh với if...else if...else ⚖️

Hãy xem một cấu trúc if...else if...else quen thuộc:

let diem = 7.5;
let xepLoai;


if (diem >= 8.0) {
  xepLoai = "Giỏi";
} else if (diem >= 6.5) {
  xepLoai = "Khá";
} else {
  xepLoai = "Trung bình";
}
console.log(`Xếp loại (dùng if/else): ${xepLoai}`); // Khá

Chuyển đổi sang Toán tử Ba ngôi Lồng nhau 🪆

Logic của nó giống như một chuỗi câu hỏi:

Câu hỏi 1: diem >= 8.0 đúng không?
- Nếu đúng (?): Kết quả là "Khá".
- Nếu sai (:): Kết quả là "Trung bình".

Nếu đúng (?): Kết quả là "Giỏi".
Nếu sai (:): Thay vì trả về một giá trị ngay, chúng ta hỏi tiếp Câu hỏi 2: diem >= 6.5 đúng không?

Ví dụ dưới dạng code:

let diem = 7.5;

// Viết xuống dòng để dễ đọc hơn
const xepLoaiNhanh = diem >= 8.0 ? "Giỏi"
                   : diem >= 6.5 ? "Khá"
                   : "Trung bình";

console.log(`Xếp loại (dùng ba ngôi lồng nhau): ${xepLoaiNhanh}`); // Khá

Ứng dụng trong Automation 🤖

Bạn có thể dùng kỹ thuật này để gán các trạng thái phức tạp hơn trong log hoặc trong dữ liệu test.

Kịch bản: Gán một "mức độ ưu tiên" 📊 cho test case dựa trên số lượng lỗi.

const soLoi = 5;

const mucDoUuTien = soLoi > 10 ? "Cao nhất"
                   : soLoi > 3  ? "Cao"
                   : "Bình thường";

console.log(`Mức độ ưu tiên của test case này là: ${mucDoUuTien}`); // Cao

Cảnh báo về tính dễ đọc ⚠️

Mặc dù toán tử ba ngôi lồng nhau rất ngắn gọn, nhưng nếu lồng quá nhiều cấp (hơn 2-3 cấp), code sẽ trở nên cực kỳ khó đọc và khó bảo trì.

Quy tắc vàng 🌟: Nếu logic của bạn có nhiều hơn 2 hoặc 3 trường hợp, việc sử dụng if...else if...else truyền thống thường sẽ dễ đọc và an toàn hơn. Trong automation, sự rõ ràng của kịch bản test là ưu tiên hàng đầu.

Phần 5: TRUTHY VÀ FALSY

Trong JavaScript, khi cần kiểm tra một điều kiện logic (như trong câu lệnh if), không chỉ giá trị true và false mới được xem xét. Thay vào đó, mọi giá trị đều có thể được "ép" về true hoặc false một cách ngầm định.

Những giá trị được xem là true trong một ngữ cảnh logic được gọi là Truthy.
Những giá trị được xem là false được gọi là Falsy.

Các giá trị Falsy - "Sáu kẻ ngáng đường"

Tin vui là trong toàn bộ thế giới JavaScript, chỉ có đúng 6 giá trị được coi là Falsy. Nếu bạn gặp một trong sáu giá trị này trong một điều kiện, khối lệnh if sẽ không được thực thi.

Hãy ghi nhớ danh sách này, nó cực kỳ quan trọng!

false: Giá trị boolean false (dĩ nhiên rồi).
0: Số không.
"" (hoặc '', `): Chuỗi rỗng (không có bất kỳ ký tự nào, kể cả dấu cách).
null: Giá trị rỗng có chủ đích.
undefined: Giá trị chưa được định nghĩa.
NaN: Not a Number.

Ví dụ thực tế

Hãy xem cách câu lệnh if phản ứng với các giá trị này.

if (false) {
  console.log("Sẽ không bao giờ chạy vào đây");
} else {
  console.log("`false` là một giá trị falsy.");
}

if (0) {
  console.log("Sẽ không bao giờ chạy vào đây");
} else {
  console.log("Số `0` là một giá trị falsy.");
}

let tenNguoiDung = "";
if (tenNguoiDung) {
  console.log("Sẽ không bao giờ chạy vào đây");
} else {
  console.log("Chuỗi rỗng `\"\"` là một giá trị falsy.");
}

Các giá trị Truthy - Mọi thứ còn lại ✅

Đây là phần dễ nhớ nhất.

Quy tắc: Nếu một giá trị không nằm trong danh sách 6 giá trị Falsy, nó chắc chắn là Truthy. ✨

Điều này dẫn đến một vài trường hợp thú vị mà người mới học thường bất ngờ:

Chuỗi không rỗng: if ("hello"), if ("0"), if ("false") → Đều là true! 📝 Vì chúng là các chuỗi có ký tự.
Số khác không: if (1), if (-5), if (3.14) → Đều là true! 🔢
Mảng (kể cả mảng rỗng): if ([]) → true! 🗂️
Object (kể cả object rỗng): if ({}) → true! 📦

Ví dụ thực tế

const soLuong = 1;
if (soLuong) {
  // Vì 1 là truthy, code này sẽ chạy
  console.log(`Số lượng là ${soLuong}, đây là giá trị truthy.`);
}

const tenSanPham = "Laptop";
if (tenSanPham) {
  // Vì "Laptop" là chuỗi không rỗng (truthy), code này sẽ chạy
  console.log(`Tên sản phẩm là ${tenSanPham}, đây là giá trị truthy.`);
}

Ứng dụng - Giải mã các "lối tắt" đã học 🚀

Bây giờ bạn đã hiểu về Truthy/Falsy, hãy cùng xem lại các toán tử ||, &&, và ??. Bạn sẽ thấy chúng trở nên dễ hiểu hơn rất nhiều.

Toán tử || (OR) - Tìm kiếm giá trị "Truthy" đầu tiên

a || b sẽ kiểm tra a. Nếu a là truthy, nó trả về a ngay lập tức. Nếu a là falsy, nó sẽ trả về b.

Ứng dụng trong Automation: Gán giá trị mặc định nếu giá trị ban đầu là bất kỳ giá trị falsy nào ("", 0, null...).

let userInput = ""; // Người dùng không nhập gì (falsy)
let username = userInput || "Guest";

console.log(username); // "Guest"

Toán tử && (AND) - Lối tắt của if 🚦

a && b sẽ kiểm tra a. Nếu a là falsy, nó trả về a ngay lập tức. Nếu a là truthy, nó sẽ đi tiếp và trả về b.

Ứng dụng trong Automation: Dùng như một cách viết tắt cho một câu lệnh if đơn giản.

const isLoggedIn = true; // truthy

// Nếu isLoggedIn là true, thì mới thực hiện hàm console.log
isLoggedIn && console.log("User is logged in.");

const hasError = false; // falsy
// Nếu hasError là false, vế sau sẽ không bao giờ được thực thi
hasError && console.log("An error occurred.");

Toán tử ?? (Nullish Coalescing) - Phiên bản an toàn của ||

a ?? b hoạt động giống ||, nhưng nó chỉ phản ứng khi a là null hoặc undefined. Nó không bị ảnh hưởng bởi các giá trị falsy khác.

Ứng dụng trong Automation: Đây là cách an toàn nhất để gán giá trị mặc định khi 0 hoặc "" được coi là những giá trị hợp lệ.

let quantity = 0; // Một giá trị hợp lệ, nhưng là falsy

// Dùng || sẽ cho kết quả sai
let finalQuantity_wrong = quantity || 1; // 1 (SAI!)

// Dùng ?? sẽ cho kết quả đúng
let finalQuantity_correct = quantity ?? 1; // 0 (ĐÚNG!)
console.log(finalQuantity_correct);

Phần 6: LỰA CHỌN VỚI CÂU LỆNH switch...case

Hãy tưởng tượng if...else if...else giống như bạn hỏi một chuỗi các câu hỏi "có/không" riêng lẻ 🤔. Ngược lại, switch...case giống như bạn nhìn vào một menu trong nhà hàng 📜🍽️. Bạn có một lựa chọn duy nhất (món ăn bạn muốn gọi), và bạn so khớp nó với các lựa chọn có sẵn trong menu.

Nó giúp code trở nên gọn gàng, có tổ chức và dễ đọc hơn so với một chuỗi if/else dài dòng.

Phần 1: Cú pháp switch...case 📝

Định nghĩa chung

Câu lệnh này sẽ lấy một biến và so sánh giá trị của nó một cách nghiêm ngặt (===) với từng trường hợp (case) được liệt kê.

Cú pháp:

switch (gia_tri_can_xet) {

  case gia_tri_1:

    // Code sẽ chạy nếu gia_tri_can_xet === gia_tri_1

    break;

  case gia_tri_2:

    // Code sẽ chạy nếu gia_tri_can_xet === gia_tri_2

    break;

  // ... các case khác ...

  default:

    // Code sẽ chạy nếu không có case nào khớp

}

Các thành phần chính:

switch (variable) 🔍: Đặt biến duy nhất bạn muốn kiểm tra vào đây.
case value: 👉: Giá trị cụ thể mà bạn muốn so sánh.
break; 🛑: Cực kỳ quan trọng! Nó ra lệnh cho JavaScript "nhảy ra khỏi" khối switch ngay sau khi một case được thực thi.
default: 🤷: Hoạt động giống như else cuối cùng. Nó sẽ chạy nếu không có case nào ở trên khớp.

Ví dụ cơ bản: 🗓️

let thuTrongTuan = 3;

let tenThu;

switch (thuTrongTuan) {

  case 2:

    tenThu = "Thứ Hai";

    break;

  case 3:

    tenThu = "Thứ Ba";

    break;

  case 4:

    tenThu = "Thứ Tư";

    break;

  default:

    tenThu = "Không phải là ngày trong tuần";

}

console.log(`Hôm nay là ${tenThu}`); // Hôm nay là Thứ Ba

Sự quan trọng của break - Hiệu ứng "Domino" ⚠️

Nếu bạn quên break, một điều kỳ lạ sẽ xảy ra: JavaScript sẽ thực thi code của case khớp, và sau đó tiếp tục chạy xuống tất cả các case bên dưới cho đến khi gặp break hoặc kết thúc khối lệnh.

Ví dụ (không có break):

let x = 1;

switch (x) {

  case 1:

    console.log("Trường hợp 1");

  case 2:

    console.log("Trường hợp 2");

  case 3:

    console.log("Trường hợp 3");

}




Kết quả:

Trường hợp 1

Trường hợp 2

Trường hợp 3

➡️ Trong 99% trường hợp, đây là lỗi. Hãy luôn nhớ thêm break;! 📌

Ứng dụng trong Automation 🤖

switch...case là một công cụ tuyệt vời khi kịch bản của bạn cần thực hiện các hành động khác nhau dựa trên một giá trị trạng thái duy nhất, ví dụ như vai trò người dùng 👤, tên môi trường 🌐, hoặc mã trạng thái HTTP 🚦.

Kịch bản: Kịch bản của bạn cần thực hiện các bước kiểm tra khác nhau tùy thuộc vào vai trò của người dùng được lấy từ giao diện.

Ví dụ Automation:

const userRole = "admin"; // Giá trị này có thể được lấy từ web

console.log(`Thực hiện kiểm tra cho vai trò: ${userRole}`);




switch (userRole) {

  case "admin": // 👑

    console.log("- Bước 1: Kiểm tra nút 'Quản lý người dùng' có hiển thị.");

    console.log("- Bước 2: Kiểm tra có thể xóa một người dùng.");

    break;

  case "editor": // ✍️

    console.log("- Bước 1: Kiểm tra nút 'Viết bài mới' có hiển thị.");

    console.log("- Bước 2: Kiểm tra có thể sửa một bài viết.");

    break;

  case "viewer": // 👀

    console.log("- Bước 1: Kiểm tra chỉ thấy nút 'Xem bài viết'.");

    console.log("- Bước 2: Kiểm tra không thấy nút 'Sửa' hay 'Xóa'.");

    break;

  default:

    console.log(`LỖI: Vai trò '${userRole}' không xác định!`); // ❌

}

Gom nhóm các case 👨‍👩‍👧‍👦

Nếu nhiều case có cùng một hành động, bạn có thể gom chúng lại.

const browserName = "Safari";

switch (browserName) {

  case "Safari":

  case "WebKit": // Gom 2 case lại

    console.log("Chạy test trên engine WebKit.");

    break;

  case "Chrome":

    console.log("Chạy test trên engine Chromium.");

    break;

}

[Javascript Typescript] Bài 3 - Logic và rẽ nhánh

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

Tài liệu cho bài học

[Javascript Typescript] Bài 2 - Biến - Dữ liệu cơ bản - Thao tác dữ liệu - Các phép toán

Tài liệu cho bài học