Cypress學習筆記5——官方示例

　　引言

　　Cypress項目中官方寫了不少demo，咱們能夠拿來作測試案例的。地址：https://github.com/cypress-io/cypress-example-recipes

　　安裝

　　一、首先你要安裝git，具體如何安裝請百度，安裝後，如圖：

　　

 

 

 　　二、其次，輸入命令，回車：

git clone https://github.com/cypress-io/cypress-example-recipes.git

　　

 

 

 　　三、安裝完後，進入目錄查看：

 

 

 　　會多一個文件cypress-example-recipes

　　四、安裝依賴：

npm install

　　若是npm不行，請用下面命令：

npm install cnpm -g --registry=https://registry.npm.taobao.org

　　再次安裝：

cnpm install

　　安裝完成後，目錄結構：

　　

 

 

　　啓動

　　啓動測試應用時，能夠進入不一樣子項目文件夾來啓動不一樣的應用；

　　若是咱們要測試表單類型的登陸，能夠打開如下被測應用

cd examples\logging-in__html-web-forms>

　　

cnpm start

　　

　　使用瀏覽器訪問：http://localhost:7077/ ，如圖：

　　

 

　　驗證登陸是否可用

　　網頁是打開了，那麼帳號密碼在哪裏呢？

　　咱們打開文件server.js，如圖：

　　

 

 　　使用notepad打開：

　　

 

 　　知道帳號和密碼，返回瀏覽器中登陸：

　　

 

 　　證實登陸成功！

　　編寫測試腳本

　　再來回顧一下測試結構：

- cypress // cypress目錄
---- fixtures 測試數據配置文件，可使用fixture方法讀取
---- integration 測試腳本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件
- package.json //這個要本身建立

　　而咱們腳本是新建在此目錄下：cypress安裝路徑\node_modules\.bin\cypress\integration ，建立一個 js 文件

/*@author: Leo

@software: pycharm

@file:  demo_login.js

@time: 2020/7/6 0006 23:10

@Desc:
*/


/* __author__ = 'Leo' */

describe('登錄官方案例', function() {
    beforeEach(() => {
          cy.visit('http://localhost:7077/login')
        })

    it("登錄案例", function()
    {
        // 輸入用戶名
        cy.get('[name="username"]').type('jane.lane')
              .should('have.value', 'jane.lane')
        // 輸入密碼
        cy.get('[name="password"]').type('password123')
              .should('have.value', 'password123')
        // 提交表單
        cy.get('[type="submit"]').click()
        // 判斷頁面跳轉到 /dashboard
        cy.url().should('include', '/dashboard')
        // Welcome to the Dashboard, jane.lane!
        cy.get('body').should('contain', 'Welcome to the Dashboard, jane.lane!')

    })
    })

　　運行測試

　　咱們換個命令運行：

yarn cypress:open

　　

　　啓動界面：

 

　　運行結果：

 

 　　速度很快，0.2秒完成。

　　總結

　　有興趣能夠持續關注。另外喜歡測試開發、性能測試的夥伴能夠加入學習交流QQ羣，一塊兒學習成長。