Cùng học Cypress (phần 3): Tương tác với Web element

I. Chuẩn bị

1.Update lên cypress mới nhất (ở thời điểm này là 9.2.1)

npm install --save-dev cypress@9.2.1

2. Open cypress window

Cách 1:

npx cypress open

Cách 2:

Sửa file package.json

"scripts": {
   "cp:open": "cypress open"
}

Run:

npm run cp:open

Nếu run lần 1 gặp lỗi timeout 30000 miliseconds, thì hãy chạy lại thêm lần nữa.

3. Tạo file mới

  • Tạo folder: CypressAuto\cypress\integration\first-test
  • Tạo file: start.spec.js

II. Một vài lệnh đơn giản

1.Mở 1 trang web

it("open web", () => {
    cy.visit("https://courses.letskodeit.com/practice");
});

Run test

2. Click radio box

Để xác định element, bạn sẽ dùng cy.get(selector)

cy.get("#bmwradio")

Để click thì dùng click()

cy.get("#bmwradio").click();

3. Put text into input field

dùng type(text)

cy.get("#name").type("sample text");

4. Input keys

Bạn muốn gõ 1 vài key trên bàn phím như: Enter, Ese, shift…, thì viết theo cú pháp {key_name}

it("todo mvc", () => {
    cy.visit("https://todomvc.com/examples/react/#/");
    cy.get(".new-todo").type("task #110 {enter}");
});

Mình điền text = “task #110”, rồi mình ấn Enter

5. Chỉ run 1 test duy nhất.

Vì cypress sẽ tự động run lại toàn bộ test nếu mình chỉ chỉnh sửa 1 tí code nên nếu mình chỉ muốn run lại 1 test thôi thì chỉ cần thêm .only

it("todo mvc" ... ) 

--> it.only("todo mvc", ...)

Lưu ý: Khi mình run 2 test ở 2 domain (URL) khác nhau thì snapshot của 1 test sẽ bị mất, đó là điểm hạn chế của cypress.

6. Xem document

Để có thể xem được document của từng command trên cypress, bạn cần thêm reference vào đầu file.

/// <reference types="cypress" />

Code của cả bài:

/// <reference types="cypress" />

it("open web", () => {
    cy.visit("https://courses.letskodeit.com/practice");
    cy.get("#bmwradio").click();
    cy.get("#name").type("sample text");
});

it("todo mvc", () => {
    cy.visit("https://todomvc.com/examples/react/#/");
    cy.get(".new-todo").type("task #110 {enter}");
});

III. Tổng kết

Mình cũng đang học dò dẫm, bạn nào biết rồi thì đừng buông lời nặng nhẹ. Vậy thôi, hẹn các bạn ở bài tiếp theo.

5 4 votes
Article Rating
Subscribe
Notify of
guest
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
David Do
David Do
9 months ago

hello a

Vương Anh
Vương Anh
7 months ago

Anh có thể comeback series Cypress này được ko ạ.

Duy Hoang
Duy Hoang
3 months ago

hello anh,
Anh có thể chỉ giúp em cách nào để login thành công load page lên được không ạ, em đang dò dẩm tìm hiểu mà không qua được login. Nó đang có tình trạng nhập user, pass xong , get được new url nhưng sau khi run đên xhr thì tự động run lại từ đầu không load page được, xin anh chỉ giáo giúp em với.

describe(‘The first’, () =>{
      it(‘Login’, function (){
        cy.visit(‘/’,{
      auth: {
       username: ‘Abc’,
       password: ‘Abc123’ 
      }
    })
     cy.wait(5000)   
     cy.get(‘#username’).type(‘a.test’)   
     cy.get(‘#password’).type(‘pass1234’)
     cy.get(‘.btn’).click()
     cy.wait(50000)  
     cy.url().should(‘include’,’/app/site/enter’)
     
     cy.on(‘window:alert’,(txt)=>{
       expect(txt).to.contains(‘This account was authenticated in an earlier session. Only one session is allowed at a time, so the earlier authenticated session will be ended.’)
     })
     
     cy.url().should(‘include’,’/edge/pc’)
     if(cy.url().should(‘include’,’/edge/pc’)){
      cy.visit(‘baseUrl’ + ‘/edge/pc’,{timeout:120000})
      cy.wait(140000,{log:false})
       
     }
      
    })
 })

Run được qua đến visit new url mới :
visit https://xxxx.net/edge/pc
xhr Get 200/api/v1/auth/data?=……

Đến đây thì nó tự động quay lại từ đầu visit login url ???
Em sai chỗ nào vậy chỉ giúp em với anh ơi. Em cám ơn anh nhiều ạ!!!

Ninh
Ninh
1 month ago

Hy vọng là sẽ có 1 khoá học của anh về cypress trên YouTube ạ