Cypress之Web UI 自動化測試入門

話說 Cypress is a next generation front end testing tool built for the modern web. And Cypress can test anything that runs in a browser.Cypress consists of a free, open source, locally installed Test Runner and a Dashboard Service for recording your tests.

吹的挺好哈，那咱也來嘗試玩玩，試試，哈哈！

1、在Windows 7以上的環境中，可以直接下載壓縮包后，解壓使用。

　  解壓后：

2、Cypress.exe便是該框架的主運行程序，雙擊 打開-->運行：

3、如我已經提前新建好一個 自己的Web UI 測試項目 文件夾，命名為“CypressTestPro”，選擇此文件夾：  

4、選擇后，選擇 "get got it" 便可以看到很多示例的寫好的js文件：

5、點擊任意一個，即可運行：

6、可將以上示例js文件刪除，也可以自己按照Cypress的語法，也即示例的js建造自己的第一個前端測試Web UI 自動化程序，如個人新建

     里面包含文件

7、切換至Cypress運行界面，便可看到對應變化：

 

8、雙擊運行此sample_spec.js便完成自己的第一個Web UI 使用Cypress的測試程序：(備注：一定要找對應的前端開發人員，去掉輸入驗證碼的驗證)

9、附帶上 sample_spec.js 的代碼片段為：

//describe('My First Test', function() {
//  it('Does not do much!', function() {
//    expect(true).to.equal(true)
//  })
//})

describe('Cypress Web UI自動化登錄實踐Test', function () {
    it('SOAM', function () {
        cy.visit("http://10.12.2.137:3000");
        cy.contains('用戶名')
        cy.get('.box').within(() => {
          cy.get('input#username').should('have.attr', 'placeholder', '請輸入賬號或是用戶名')
          cy.get('input#password').should('have.attr', 'placeholder', '請輸入密碼')
          cy.get('input#captcha').should('have.attr', 'placeholder', '請輸入驗證碼')
        })
        cy.contains('密碼')
        cy.contains('驗證碼')
        cy.contains('移動端APP下載')

        //cy.url().should('include', '/portal/monitor/data')
       cy.get('input#username')
             .type('1005')
             .should('have.value', '1005')
        cy.get('input#password')
             .type('1')
             .should('have.value', '1')
             
        cy.get('#log').click();
        
    })
})

10、小技巧：修改此項目中的cypress.json文件，可以改變針對該測試項目的基礎配置 

       如原始cypress.json打開為： 【{}】，即內容為空；

　　將大括號內寫入如下代碼，標識 設置展示的屏幕寬窄為 1920 * 1080像素，若是其它手機屏幕之類，也可對應進行設置，查看效果。

{
  "viewportWidth": 1920,
  "viewportHeight": 1080
}