Cypress Automation Testing: Hướng Dẫn Cơ Bản Cho Tester Sau Manual

Tại sao Cypress lại phổ biến với tester chuyển từ manual?

Mình nhớ lần đầu nghe từ "automation testing", cảm giác như nghe đến lập trình. Code, command line, framework - thứ gì nghe cũng xa lạ. Nhưng sau khi thử Cypress, mình nhận ra: đây là tool được làm ra cho người không phải developer.

Cypress hiện nằm trong {{fact:fact_0}} tool automation yêu thích nhất theo khảo sát cộng đồng testing toàn cầu. Con số này không ngẫu nhiên. Lý do thực tế:

• Setup trong 15 phút - không cần cài driver riêng như Selenium
• Chạy trực tiếp trên browser - thấy được test đang làm gì theo thời gian thực
• Error message rõ ràng - khi fail, Cypress chụp screenshot và ghi lại chính xác dòng nào sai
• Cú pháp gần với ngôn ngữ tự nhiên - cy.get('#username').type('admin') đọc hiểu ngay

Cypress chạy test trực tiếp trong browser, tester thấy từng bước như xem video quay lại.

Với manual tester, lợi thế lớn nhất không phải tốc độ - mà là khả năng tái sử dụng. Test case bạn viết hôm nay, 3 tháng sau team vẫn chạy được mà không cần bạn ngồi click tay. Regression testing từ 2 ngày xuống còn 20 phút. Đó mới là giá trị thật.

Cài Cypress và chạy test đầu tiên trong 15 phút

Trước khi bắt đầu, bạn cần cài:

• Node.js (phiên bản 16 trở lên) - {{resource:resource_0}}
• VS Code - editor miễn phí, dễ dùng

Không cần cài Chrome hay Firefox riêng. Cypress dùng browser có sẵn trên máy.

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

Mở Terminal (hoặc Command Prompt), chạy lần lượt:

mkdir cypress-project
cd cypress-project
npm init -y

npm init -y tạo file package.json - hiểu đơn giản là file khai báo dự án của bạn. Bạn không cần hiểu sâu, chỉ cần chạy lệnh này.

Bước 2: Cài Cypress

npm install cypress --save-dev

Lệnh này tải Cypress về. Tuỳ tốc độ mạng, mất 2-5 phút. Sau khi xong, chạy:

npx cypress open

Cửa sổ Cypress mở ra. Lần đầu, nó hỏi bạn loại testing - chọn E2E Testing (kiểm thử đầu cuối - tức test luồng người dùng thật).

Màn hình chào của Cypress khi mở lần đầu - chọn E2E Testing là đúng hướng.

Bước 3: Tạo file test đầu tiên

Cypress tự tạo thư mục cypress/e2e/. Bạn tạo file dang-nhap.cy.js trong thư mục đó với nội dung:

describe('Test đăng nhập', () => {
  it('Đăng nhập thành công với tài khoản hợp lệ', () => {
    // Bước 1: Mở trang đăng nhập
    cy.visit('https://demo.opencart.com')

    // Bước 2: Click vào My Account để mở menu
    cy.get('.dropdown > .btn').click()

    // Bước 3: Click Login
    cy.contains('Login').click()

    // Bước 4: Nhập email
    cy.get('#input-email').type('[email protected]')

    // Bước 5: Nhập mật khẩu
    cy.get('#input-password').type('password123')

    // Bước 6: Click nút Login
    cy.get('input[value="Login"]').click()

    // Kiểm tra: Phải thấy chữ "My Account"
    cy.contains('My Account').should('be.visible')
  })
})

Đọc lại đoạn code trên - bạn thấy quen không? Mỗi dòng tương ứng đúng 1 bước bạn từng làm tay khi test manual. cy.visit() = mở trình duyệt. cy.get() = tìm element. .type() = gõ text. .click() = click chuột.

Không cần nhớ hết syntax ngay. Làm nhiều quen dần.

Real-time testing: Điểm khác biệt lớn nhất của Cypress

Bạn từng dùng Selenium chưa? Hoặc nghe ai than: "Test chạy xong mới biết fail ở đâu"?

Cypress giải quyết đúng vấn đề đó. Khi chạy npx cypress open, một cửa sổ browser riêng mở ra, và bạn thấy test chạy từng bước một như đang xem ai đó thao tác thật sự. Mỗi command bên trái, browser thực hiện ngay bên phải.

Cypress Test Runner: bên trái là log từng bước, bên phải là browser thực - tester thấy ngay khi fail.

Ba tính năng real-time giúp ích nhất cho người mới:

Time Travel Debugging - Hover vào bất kỳ step nào trong log, browser tự snapshot về đúng trạng thái lúc đó. Fail ở bước 7 nhưng muốn xem UI trông thế nào ở bước 3? Hover vào bước 3 là xong. Không cần chạy lại từ đầu.

Screenshot và Video tự động - Khi chạy theo chế độ headless (không hiện browser, dùng cho CI/CD), Cypress tự chụp screenshot lúc fail và quay video toàn bộ test run. Bug report của bạn từ đây không cần phải mô tả "bấm vào đây thấy vậy" - đính kèm video là xong.

Retry tự động - Cypress tự retry assertion trong vài giây trước khi kết luận fail. Ví dụ cy.contains('Đăng nhập thành công').should('be.visible') - nếu trang load chậm 2 giây, Cypress chờ chứ không fail ngay. Selenium không làm được điều này mà không cần code thêm.

Thật ra, đây là lý do nhiều team Việt Nam bắt đầu bằng Cypress thay vì Selenium - learning curve thấp hơn đáng kể khi tester không có background lập trình.

Ví dụ test UI phổ biến trong dự án Việt Nam

Nhiều bài hướng dẫn Cypress chỉ dùng ví dụ demo nước ngoài - không sát với dự án thực tế. Mình tổng hợp 3 scenario phổ biến nhất mình gặp khi làm dự án web Việt Nam.

Scenario 1: Test form đăng nhập (có validate lỗi)

Từng bỏ qua test case "nhập sai email format"? Mình cũng vậy, cho đến khi bug đó lên production.

describe('Validate form đăng nhập', () => {
  beforeEach(() => {
    cy.visit('/login') // URL dự án thật của bạn
  })

  it('Hiển thị lỗi khi để trống email', () => {
    cy.get('#btn-login').click()
    // Kiểm tra thông báo lỗi xuất hiện
    cy.get('.error-message').should('contain', 'Email không được để trống')
  })

  it('Hiển thị lỗi khi email sai định dạng', () => {
    cy.get('#email').type('abcxyz')
    cy.get('#btn-login').click()
    cy.get('.error-message').should('contain', 'Email không hợp lệ')
  })

  it('Redirect về trang chủ khi đăng nhập thành công', () => {
    cy.get('#email').type('[email protected]')
    cy.get('#password').type('Abcd@1234')
    cy.get('#btn-login').click()
    cy.url().should('include', '/dashboard')
  })
})

Scenario 2: Test giỏ hàng (phổ biến nhất ở dự án e-commerce)

it('Thêm sản phẩm vào giỏ hàng thành công', () => {
  cy.visit('/products/ao-thun-nam-1')

  // Chọn size M
  cy.get('[data-size="M"]').click()

  // Click thêm vào giỏ
  cy.get('#btn-add-to-cart').click()

  // Kiểm tra số lượng giỏ hàng tăng lên 1
  cy.get('.cart-count').should('have.text', '1')

  // Kiểm tra tên sản phẩm đúng trong giỏ
  cy.get('.cart-item-name').should('contain', 'Áo Thun Nam')
})

Scenario 3: Test tìm kiếm (hay bị bỏ qua)

it('Tìm kiếm ra kết quả đúng', () => {
  cy.get('#search-input').type('laptop gaming')
  cy.get('#btn-search').click()

  // Phải có ít nhất 1 kết quả
  cy.get('.product-card').should('have.length.gte', 1)

  // Mỗi kết quả phải chứa từ khóa
  cy.get('.product-title').each(($el) => {
    cy.wrap($el).invoke('text').then((text) => {
      expect(text.toLowerCase()).to.include('laptop')
    })
  })
})

Ba scenario test UI quan trọng nhất - đăng nhập, giỏ hàng, tìm kiếm.

Những scenario này không phải lý thuyết - mình đã dùng cho dự án e-commerce thật. Copy về, thay URL và selector là dùng được ngay.

Lộ trình từ manual tester lên Cypress

Đây là câu hỏi mình nhận nhiều nhất: "Học Cypress mất bao lâu?"

Thật ra không có con số cố định, nhưng dựa trên kinh nghiệm đào tạo, phần lớn người trái ngành mất 4-8 tuần để tự viết và maintain test suite cơ bản - nếu học đúng thứ tự.

Lộ trình 4 giai đoạn từ manual lên Cypress - không cần vội, từng bước chắc hơn nhảy cóc.

Tuần 1-2: Nền JavaScript tối thiểu

Bạn không cần học JavaScript bài bản - chỉ cần đủ để đọc hiểu test script. Tập trung vào: biến (const, let), function, callback cơ bản, array/object đơn giản.

Khóa Lập Trình JavaScript Cơ Bản trên F8 cover đúng phần này - miễn phí và có bài tập thực hành. Không cần học hết khóa, 30-40% đầu là đủ để bắt đầu Cypress.

Tuần 3-4: Làm quen Cypress cơ bản

• Cài đặt, cấu hình project
• Các command hay dùng: cy.visit(), cy.get(), cy.contains(), cy.click(), cy.type()
• Hiểu selector CSS (quan trọng - đây là chỗ hay fail nhất)
• Viết 5-10 test case thật cho 1 trang web bất kỳ

Tuần 5-6: Nâng lên intermediate

• beforeEach và afterEach (dọn dẹp trước/sau test)
• Custom commands (gom các bước lặp lại thành 1 lệnh)
• Fixture files (data test riêng, không hardcode trong script)
• Xử lý async - điều này nhiều người bị stuck, nhưng Cypress tự handle phần lớn

Tuần 7-8: Tích hợp thực tế

• Chạy Cypress theo chế độ headless: npx cypress run
• Đọc hiểu kết quả test report
• Tích hợp vào pipeline CI/CD cơ bản (nếu team dùng GitHub Actions hoặc GitLab CI)

Trấn an một chút: Mình biết nhiều bạn 28-35 tuổi từ trái ngành đọc đến đây và nghĩ "học nhiều vậy có học được không?". Câu trả lời thật: được. Lớp mình có bạn từng làm kế toán 5 năm, sau 6 tuần viết được test suite cho dự án của công ty. Điểm khác biệt không phải kiến thức IT - mà là tỉ mỉ khi đọc lỗi và kiên nhẫn debug từng bước.

Selector CSS - Chỗ hay bị stuck nhất khi mới học

Viết được test case nhưng Cypress không tìm thấy element? Đây là vấn đề phổ biến nhất. Và lý do thường chỉ là selector sai.

Selector là "địa chỉ" để Cypress tìm đúng element trên trang. Có 4 cách hay dùng:

Cách tìm selector nhanh nhất: Mở Chrome DevTools (F12), click chuột phải vào element muốn test, chọn "Inspect". Nhìn vào HTML, tìm id hoặc class của element đó.

Dùng Chrome DevTools inspect element để lấy selector - thao tác này dùng hằng ngày.

Mình khuyên bạn nhờ team dev thêm data-testid vào các element quan trọng (nút submit, input, thông báo lỗi...). Lý do: id và class dev hay đổi khi refactor UI, nhưng data-testid ít bị đụng hơn - test của bạn sẽ ổn định hơn.

Nếu selector vẫn không tìm được, thêm .should('be.visible') để check element có đang hiển thị không. Đôi khi element có trong DOM nhưng đang bị display: none.

Tải về checklist selector dưới đây - mình tổng hợp những lỗi selector hay gặp nhất và cách fix: {{resource:resource_0}}

Bước tiếp theo sau bài này

Test kỹ 1 lần luôn tốt hơn fix lỗi nhiều lần - và Cypress giúp bạn làm đúng điều đó ở quy mô lớn hơn.

Nếu bạn đọc đến đây, bạn đã có đủ để bắt đầu:

1. Cài Cypress và chạy npx cypress open - làm ngay hôm nay, đừng để mai
2. Viết test case đăng nhập cho 1 trang web bất kỳ - dùng đúng code trong bài, chỉ thay URL và selector
3. Xem video Time Travel trong Test Runner - hover vào từng step, xem browser phản ứng
4. Đọc thêm tài liệu Cypress chính thức - {{resource:resource_0}}, tiếng Anh nhưng ví dụ rất rõ

Về JavaScript, bạn không cần học toàn bộ trước khi bắt đầu. Cứ mở Cypress, viết test, gặp lỗi syntax thì tra - học kiểu đó thực ra nhanh hơn đọc hết sách lý thuyết. Khóa Lập Trình JavaScript Cơ Bản dùng làm tài liệu tham chiếu - học song song với Cypress sẽ thấm hơn.

Mình biết chuyển từ manual sang automation nghe có vẻ lớn. Nhưng bước đầu tiên chỉ là: mở terminal, gõ npm install cypress, xem nó cài xong. Không cần hoàn hảo ngay. Viết được test đầu tiên chạy pass là thắng.

Comment bên dưới nếu bạn bị stuck ở bước nào - mình đọc và trả lời từng bạn. Chúc thành công!