TypeScript cơ bản cho tester (P1): Biến, kiểu dữ liệu và điều kiện

⏱︎

Read time:

5–8 minutes
Minh hoạ tester học biến kiểu dữ liệu và điều kiện TypeScript

Tester học TypeScript không cần bắt đầu như một frontend developer. Mục tiêu đầu tiên là đọc được code, tự viết được các logic đơn giản, hiểu lỗi trong terminal để sớm chuyển sang sử dụng Playwright.

Lưu ý
Series này dạy TypeScript đủ dùng cho tester. Những phần như generic nâng cao, decorator, namespace hay thuật toán phức tạp có thể để sau.

TypeScript là gì?

TypeScript là JavaScript được bổ sung hệ thống kiểu dữ liệu. Code TypeScript thường dùng đuôi .ts. Trước khi chạy, code được chuyển thành JavaScript hoặc được một công cụ hỗ trợ thực thi.

Điểm hữu ích nhất với người mới là TypeScript có thể phát hiện nhiều lỗi ngay khi viết code:

let retryCount: number = 2;
retryCount = "three";  // Lỗi: string không thể gán cho number

Cấu trúc một file TypeScript

// Đây là comment một dòng

/*
  Đây là comment
  trên nhiều dòng
*/

const courseName: string = "Playwright for Testers";   // gán giá trị cho 1 biến
console.log(courseName);    // in giá trị 1 biến lên màn hình console (màn hình terminal)

console.log() in giá trị ra terminal. Đây là công cụ đơn giản nhưng rất hữu ích để kiểm tra biến đang chứa gì hoặc chương trình đã chạy tới bước nào.

Nếu project đã cài tsx, có thể chạy một file thực hành bằng:

npx tsx basics.ts
Cảnh báo
Phải cài NodeJS vào máy trước khi có thể chạy câu lệnh npx tsx như trên. Câu lệnh này để chạy chung cho 1 file TypeScript.

Trong Playwright, thì bạn sẽ không dùng câu lệnh này mà sẽ sử dụng câu lệnh npx playwright test để chạy test, sẽ được nói ở các phần sau

Biến: const, let và var

Biến là nơi lưu dữ liệu để sử dụng lại. Người mới chỉ cần tập trung vào const và let:

  • Dùng const khi không gán lại biến. const nghĩa là hằng số
  • Dùng let khi giá trị sẽ thay đổi. let nghĩa là đặt 1 cái này bằng cái kia
  • var là kiểu cũ (kế thừa từ JavaScript), không nên sử dụng nữa
const baseUrl: string = "https://elitest.vn";
let retryCount: number = 0;
myName = "ABC";   // Sai cú pháp. Bắt buộc cần khai báo kiểu "const" hoặc "let" 

retryCount = retryCount + 1;    // tăng giá trị lên 1 đơn vị
console.log(retryCount); // Kết quả in ra: 1

Các kiểu dữ liệu cơ bản

KiểuÝ nghĩaVí dụ trong testing
stringChuỗi ký tựEmail, URL, text, thông báo lỗi
numberSốStatus code, timeout, số lần retry
booleanGiá trị chỉ có thể là true hoặc falseElement có hiển thị không, user đã approved chưa
nullChủ động biểu diễn không có giá trịẢnh đại diện chưa được thiết lập
undefinedGiá trị chưa được gán hoặc property không tồn tạiBiến hoặc field chưa có dữ liệu
const email: string = "student@elitest.vn";
const statusCode: number = 201;
const isApproved: boolean = true;

TypeScript thường tự suy luận được kiểu dữ liệu, nên không nhất thiết phải viết kiểu ở mọi biến:

const username = "linh"; // TypeScript suy luận là string
let retryCount = 2;      // TypeScript suy luận là number
Mẹo nhớ
Hãy dùng type annotation khi nó làm ý nghĩa rõ hơn, còn những trường hợp hiển nhiên có thể để TypeScript tự suy luận. Code không cần “rải kiểu” ở mọi dòng.

String và template literal

String xuất hiện liên tục trong automation test: URL, test data, locator và expected message. Có thể tạo string bằng dấu nháy đơn, nháy kép hoặc backtick.

const username = "linh";
const welcomeMessage = `Welcome, ${username}`;
const articleUrl = `/articles/${username}`;
// giá trị "linh" sẽ được thay vào cụm ${username} như sau:
console.log(welcomeMessage);  // Welcome, linh
console.log(articleUrl);     // /articles/linh

Cú pháp backtick kết hợp ${...} được gọi là template literal. Nó dễ đọc hơn việc nối nhiều chuỗi bằng dấu +.

Một số thao tác string tester thường dùng:

const message = "  Login Successful  ";

message.includes("Successful"); // true
message.toLowerCase();           // "  login successful  "
message.trim();                  // "Login Successful"
message.length;                  // Độ dài chuỗi

Toán tử cần biết

NhómToán tửÝ nghĩa
Gán=Đưa giá trị vào biến
So sánh===, !==Bằng hoặc khác cả giá trị và kiểu
So sánh số>, <, >=, <=Lớn hơn, nhỏ hơn và so sánh biên
Logic&&, ||, !AND, OR và NOT
const status = 201;
const responseTime = 450;
const hasToken = true;

const isCreated = status === 201;   // so sánh status với giá trị 201 trước, xem true hay false, 
// sau đó mới gán vào biến

const isFastEnough = responseTime <= 1000; // check xem responseTime có <= 1000 không, sau đó gán vào biến

const canContinue = hasToken && isCreated;  // check xem hasToken có true không, đồng thời isCreated có true không,
// nếu cả 2 đều true thì canContinue cũng là true, 1 trong 2 là false thì canContinue sẽ false

console.log(canContinue); // true
Ví dụ
= là gán giá trị, còn === là so sánh.
Viết status = 200 sẽ thay đổi biến; viết status === 200 sẽ trả về true hoặc false.
Mẹo nhớ
So sanh === được khuyên dùng hơn == vì nó so sánh cả giá trị lẫn kiểu dữ liệu, trong khi == cố gắng convert về chung 1 kiểu dữ liệu rồi mới so sánh value:
// Ví dụ về việc sử dụng == mà không dùng === để so sánh:
console.log(5 == "5");    // true  (Tự biến chữ "5" thành số 5)
console.log(1 == true);   // true  (Tự biến true thành số 1)
console.log("" == 0);     // true  (Tự biến chuỗi rỗng thành số 0)
console.log(null == undefined); // true (Xem hai giá trị rỗng này như nhau)

Điều kiện if, else if và else

Điều kiện giúp chương trình chọn hành động dựa trên dữ liệu. Tester có thể dùng nó để phân loại status code hoặc quyết định có chạy bước tiếp theo hay không.

const status = 401;

if (status === 200) {
  console.log("Request thành công");
} else if (status === 401) {
  console.log("Chưa được xác thực");
} else {
  console.log("Cần kiểm tra response");
}

Điều kiện bên trong ngoặc tròn phải cho ra kết quả đúng hoặc sai. Với người mới, hãy viết điều kiện rõ ràng thay vì cố rút gọn thành một dòng khó đọc.

Bài thực hành nhỏ

Hãy tạo file api-result.ts chứa status code, response time và token. In "PASS" khi status là 200 hoặc 201, response time không quá 1.000 ms và token tồn tại; ngược lại in "FAIL".

const status = 201;
const responseTime = 620;
const hasToken = true;

const validStatus = status === 200 || status === 201;

if (validStatus && responseTime <= 1000 && hasToken) {
  console.log("PASS");
} else {
  console.log("FAIL");
}

Tóm tắt phần 1

  • Ưu tiên const; chỉ dùng let khi cần gán lại.
  • Nắm chắc string, number, boolean, null và undefined.
  • Dùng template literal để tạo URL và test data dễ đọc.
  • Phân biệt phép gán = với phép so sánh ===.
  • Dùng if/else để xử lý các nhánh đơn giản.

Ở TypeScript cơ bản cho tester (P2), chúng ta sẽ làm việc với array, object, JSON, vòng lặp và function — những cấu trúc xuất hiện liên tục trong test data và API response.