Theo yêu cầu của 1 bạn chat qua skype

I. Hiểu về assertion

Khi bạn làm test, hình thức nào đi chăng nữa, thì luôn luôn phải có bước assert, so sánh kết quả thực tế và mong đợi.

Actual Result vs Expected Result

Khi code, thì người ta nghĩ ra vài style cho việc compare này để phù hợp với từng style code của mỗi người. Ví dụ:

a. Style truyền thống

assert_equal(actual, expected) 

b. Style BDD (behavior driven development) – viết giống câu văn

expect(actual).equal(expected)

actual.should("equal", expected)

Trên đây là 3 style code khác nhau mà kết quả không đổi, bạn có thể đi khắp các ngôn ngữ lập trình thì sẽ gặp những dạng assertion thế này.

II. Assertion trong javascript

Trong ngôn ngữ javascript có rất nhiều thư viện để thực hiện assertion, trong đó Chaijs là đầu bảng, rất nhiều các framework testing hay tool dùng Chai, trong đó quen thuộc như Postman, Cypress…

Chaijs support cả 3 style mà mình nói ở trên, assert và expect/should

III. Assertion trong cypress

Cypress dùng:

• Chai: để compare value thông thường
• Chai-jQuery: để compare những thứ thuộc về DOM object
• Sinon-Chai: assert khi phải dùng cy.stub() với cy.spy()

Với làm automation thì chúng ta sẽ có rất nhiều thứ phải so sánh, ví dụ:

• So sánh String (text):
  • so sánh chính xác
  • so sánh String A chứa / ko chứa String B
  • String A match regex
• So sánh number:
  • So sánh số A >, < , =, <=, <=, !=
• So sánh List (tập hợp)
  • tập hợp A chứa phần tử X, Y, Z
  • tập hợp A sắp xếp theo thứ tự từ nhỏ đến lớn, theo Alphabetical…
• ….

Full list ở đây.

Khi so sánh với DOM object, bạn sẽ thường check trạng thái của các object đó:

• Element A có css nào
• Element A có attribute nào
• Element A có class X hay không
• Element A đang ở trạng thái nào: visible, hidden, checked
• …

Full list ở đây

Tuy nhiên, không phải lúc nào chúng ta cũng nhớ cũng viết hết được những cái trên, nên Cypress đưa ra các common assertion như:

• Length
• Class
• Value
• Text Content
• Visibility
• Existence
• State
• CSS
• Disabled property

Haizzz, nhiều quá sao học hết nhỉ??? mà sao biết lúc nào dùng should(), lúc nào dùng expect() bây giờ???

• BDD style là viết code giống câu văn, do đó có nhiều từ chỉ nhằm mục đích tạo thành câu cú, ko có value gì hết, gọi là chained keyword. Ngoài ra nó còn có những action keyword để thực hiện việc compare, và các support keyword để thay đổi cách compare. Do đó, tốt nhất là bạn chỉ nên học 1 vài keyword action và 1 vài keyword support, những keyword chain thì vứt bỏ, quên hết đi. (Tôi là người đơn giản, tôi ko cần viết code giống câu văn)

• Bạn nên chọn 1 style để viết code thôi, hoặc là expect(), hoặc là should(). Đừng học cả 2, mất thời gian. Có vẻ như Cypress chuộng should() hơn thì phải

Chốt lại, 1 cái test Cypress sẽ có hình dạng như sau:

it('.type() - type into a DOM element', () => {

  cy.get('.action-email')
    .type('fake@email.com').should('have.value', 'fake@email.com')
    .type('slow.typing@email.com', { delay: 100 })
    .should('have.value', 'slow.typing@email.com')

  cy.get('.action-disabled')
    .type('disabled error checking', { force: true })
    .should('have.value', 'disabled error checking')
})

Hoặc

describe('My First Test', () => {
  it('clicking "type" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
  })
})

IV. Tổng kết

Trên đây là toàn bộ những gì cốt lõi của Cypress Assertion mà bạn cần nắm vững, còn làm sao biết chỗ nào dùng should() được thì bạn phải tự đọc docs, dựa vào gợi ý từ code editor hoặc phải tự học thuộc. Dù sao thì biết bản chất vẫn hơn, đúng không ^^