cypress學習筆記二(第一個用例)

1、環境準備

一、項目代碼不便於展現，在github上找了一個開源項目作練習。https://github.com/iview/ivie...，按照文檔運行項目，啓動後發現界面清晰簡潔，符合預期。
二、在項目中安裝cypress（參考第一個筆記）

安裝成功後系統會默認生成測試目錄和cypress配置文件

修改腳本中須要訪問的地址和斷言

2、界面化執行

啓動cypress客戶端執行：
執行node_modules/.bin/cypress open開啓一個界面化程序

點擊腳本執行：

優勢：

• 打印執行log，方便查問題
• 可查看每一步執行過程及截圖
• 腳本更新後自動執行，方便調試

缺點：

• 每次執行須要啓動chromium
• 不方便集成測試

3、命令行執行

cypress安裝成功後，項目的package.json中會生成啓動腳本，可直接運行tests目錄下的全部用例：
node_modules/.bin/cypress run

適用於在終端批量執行腳本

4、配置執行腳本方便執行

在package.json中配置腳本：

打開cypress界面執行：npm run cy:open

終端執行用例：npm run test

5、UI登陸

describe("登陸",()=>{
    it("test login" ,()=>{
        cy.visit("http://localhost:8080/")
        cy.waitFor("登陸")
        // cy.get('input[type="text"]').type("super_admin")
        cy.get('input[type="password"]').type("123")
        cy.get('button[type="button"]').click()
        cy.contains("首頁")
    })
})