CYPRESS – KHÔNG DÀNH RIÊNG CHO QAE

Trong bài viết này, anh Phan Văn Anh – một thành viên trẻ tuổi và năng lực của CO-WELL Asia chi nhánh Đà Nẵng sẽ chia sẻ về CYPRESS và các bước để test bằng cypress. Hy vọng sẽ giúp mọi người có cái nhìn tổng thể nhất về công cụ hỗ trợ hữu hiệu khi kiểm thử ứng dụng Web hiện đại này.

A. GIỚI THIỆU VỀ CYPRESS

1. Vì sao Cypress là độc nhất?

Hầu hết các testing tools đều chạy bên ngoài trình duyệt và thực thi các câu lệnh điều khiển thông qua network. Còn Cypress thì hoàn toàn ngược lại, nó thực thi ngay trên ứng dụng cần kiểm tra.

Phía sau Cypress là các xử lý của Node server. Cypress và Node sẽ liên tục giao tiếp, đồng bộ, và thay nhau thực hiện các nhiệm vụ. Nó có quyền truy cập cả Front-Back nên cho phép chúng ta nhận các sự kiện trên ứng dụng cần kiểm tra một cách “real time”. Ngoài ra, trong cùng thời gian nó cũng có thể thực hiện các task bên ngoài browser nếu được trao nhiều quyền hơn. Cypress còn có thể đọc và thay đổi lưu lượng web một cách nhanh chóng.

Tóm lại, Cypress kiểm soát toàn bộ quy trình tự động hóa từ trên (Front) đến dưới (Back).

2. Một số lưu ý trước khi muốn sử dụng Cypress

• Cypress kiểm tra bất kỳ thứ gì chạy trong ngữ cảnh của trình duyệt

• Cypress không hỗ trợ để kiểm tra một native app

• Cypress hiện hỗ trợ các trình duyệt sau:
  • Chrome
  • Chrome Beta
  • Chrome Canary
  • Chromium
  • Edge
  • Edge Beta
  • Edge Canary
  • Edge Dev
  • Electron 1
  • Firefox
  • Firefox Developer Edition
  • Firefox Nightly
  • Cypress có thể sẽ không hoạt động tốt khi bạn muốn test một trang web của bên thứ 3 (như Facebook, Google, etc) bởi sai mục đích ban đầu mà Cypress được tạo ra.

3. Ai sẽ sử dụng Cypress và áp dụng cho loại test nào?

Thường là các Developer hoặc QAE sẽ sử dụng Cypress để viết cho các loại test sau:

• End-to-end tests
• Integration tests
• Unit tests
• Hoặc kiểm tra bất kỳ thứ gì chạy trong trình duyệt.

B. TẠO VÀ THIẾT LẬP PROJECT

1. Tạo một Cypress project:

• Tạo một folder bất kì mà bạn mong muốn, ví dụ: /Users/anhphan/Documents/Projects/CypressDemo
• Mở Command Line/ Terminal và chuyển tới đường dẫn như trên cd /Users/anhphan/Documents/Projects/CypressDemo
• Chạy câu lệnh: npm init
• Thực hiện input mục package name　và có thể enter bỏ qua hết phần còn lại
• Chạy câu lệnh sau để mở project bằng VScode: code .

Note: nếu không thể mở project bằng code, hãy mở nó bằng cách thông thường thông qua VSCode

2. Cài đặt Cypress cho project:

• Mở Terminal ngay trên VSCode và chạy câu lệnh: npm install cypress
• Chạy câu lênh sau trong Terminal: node_modules/.bin/cypress open để folder cypress　được tạo ra một cách tự động trên project của bạn.

Nếu project của bạn hiển thị đầy đủ như trên, thì có nghĩa đã tạo thành công 1 project Cypress

C. VIẾT VÀ THỰC THI TEST BẰNG CYPRESS

1. Cấu trúc project:

Thường các dự án automation hiện tại, đa số đều sử dụng cấu trúc POM (Page Object Model):　là một mẫu thiết kế, được sử dụng phổ biến trong tự động hóa thử nghiệm để tạo Kho lưu trữ đối tượng cho các phần tử giao diện người dùng web. Ưu điểm của mô hình là giảm sự trùng lặp mã và cải thiện khả năng bảo trì thử nghiệm.

Mô hình POM

Để dễ hiểu lợi ích của việc cấu trúc theo POM, thì xin mời các bạn xem ví dụ ở phần 2 dưới đây nhé!

2. Viết kịch bản đầu tiên:

Scenario 1:

1. Truy cập url: https://demo.guru99.com/v4/
2. Login với tài khoản: mngr340601 / YdybAvE
3. Xác nhận hiển thị: Welcome To Manager's Page of Guru99 Bank

2.1 Viết chạy 1 lần không cần dùng POM:

Tạo 1 file theo đường dẫn ../integration/TestWithoutPOM.js và copy-paste nội dung dưới đây:

describe('Testcase: successful login', () =>{
    it('visit page then input account info', ()=>{
        cy.visit("https://demo.guru99.com/v4/")
        cy.get("input[name=uid]").type("mngr340601")
        cy.get("input[name=password]").type("YdybAvE")
        cy.get("input[name=btnLogin]").click()
        cy.contains("Welcome To Manager's Page of Guru99 Bank")
    }
})

Cùng phân tích ưu/nhược điểm của cách viết này nhé!

• Ưu điểm:

• Nhanh gọn

• Nhược điểm:

• Không có tính re-use
• Khó maintenance (bạn đã nhét 1 đống element, locator, account info vào một chỗ)

2.2 Viết sử dụng POM:

Tạo file ../utils/Infos.js với nội dung:

export const URL = "https://demo.guru99.com/v4/"
export const USERNAME = "mngr340601"
export const PASSWORD = "YdybAvE"

Tạo file ../ui/LoginPageUI.js với nội dung:

export const txtUsername = "input[name=uid]";
export const txtPassword = "input[name=password]"
export const btnLogin = "input[name=btnLogin]"

Tạo file ../pages/LoginPage.js với nội dung:

var loginPageUI = require('../ui/LoginPageUI')
var infos = require("../utils/Infos")

export function login(){
    cy.visit(infos.URL)
    cy.get(loginPageUI.txtUsername).type(infos.USERNAME)
    cy.get(loginPageUI.txtPassword).type(infos.PASSWORD)
    cy.get(loginPageUI.btnLogin).click()
}

Tạo file ../cypress/integration/tests/Test01.js với nội dung:

var loginPage = require('../../../pages/LoginPage')

describe('Test: login successful', () =>{
    it('visit page then input account info', ()=>{
        loginPage.login()
        cy.contains("Welcome To Manager's Page of Guru99 Bank")
    })
})

Với cách phân tách các file như thế này, thì chúng ta thấy được

• Ưu điểm:

• Có thể re-use các function, infos (tránh viết đi viết lại 1 hành động nhiều lần)
• Dễ maintenance (khi có sự thay đổi cssSelector của element bất kì, chỉ việc chỉnh sửa ở một nơi duy nhất)

• Nhược điểm:

• Mất thời gian để tạo và tách file ở thời điểm đầu dự án

3. Thực thi script:

Để thực thi script vui lòng xem video hướng dẫn sau:

4. Thực thi script bằng command kèm record kết quả test:

• Login vào Dashboard của Cypress

• Lấy record key mà Cypress cung cấp

• Để thực thi test trên terminal và record lại kết quả thì:
  ./node_modules/.bin/cypress run --record --key f70d27d0-f313-41c9-9c7c-acf0e8c5bfb5

• Sau khi hoàn thành console sẽ in ra thông tin Passed/Failed:

• Để xem lại video quá trình test, thì chỉ cần truy cập link trong vùng khoanh đỏ ở trên

• Kiểm tra video quá trình đã test như thế nào:

KẾT LUẬN

Như vậy anh Phan Văn Anh và Co-Well Asia đã giới thiệu tới mọi người một tool/framework mới được sử dụng để testing dành cho nhiều đối tượng (Developer/QAE/…).

Trong một bài viết như thế này thì không thể giới thiệu hết tất cả các tính năng hay ho của Cypress. Tuy nhiên những thông tin phía trên cũng có thể giúp mọi người xem xét được tool này có thể áp dụng cho bản thân mình hay là không?

Tài liệu để tìm hiểu sâu hơn:

• Cypress – Docs
• Tất cả command trong Cypress 1

Và trên đây là những thông tin cơ bản nhất về CYPRESS. Hy vọng có thể giúp developers và QA kiểm thử ứng dụng Web hiện đại chính xác và hiệu quả hơn. Đừng quên theo dõi chuyên mục CODEWELL trên website CO-WELL Asia để đón đọc những bài viết công nghệ bổ ích nhé!

Phan Văn Anh – CO-WELL Asia.