序：
Cypress是基于node.js環(huán)境的，安裝則極為便利，如果我們測試人員維護好了自動化腳本，就可以直接將js腳本分享給研發(fā)人員，輔助研發(fā)人員進行自測。如果能將UI自動化普及到整個部門都去使用，輔助提升產(chǎn)品研發(fā)效率，那UI自動化就是非常有價值的事情。
1.1、Cypress簡介
官網(wǎng)地址：https://docs.cypress.io
官網(wǎng)的首頁有一句標(biāo)語“The web has evolved.Finally, testing has too.”
意思是Web已經(jīng)進化了，最終，測試也是。而對于Cypress的介紹則是“Fast, easy and reliable testing for anything that runs in a browser.”翻譯為“對瀏覽器中運行的任何內(nèi)容進行快速、簡單和可靠的測試”。Cypress是一種E2E測試框架，即end to end測試。同類型的框架還有Testcafe等。但是E2E測試似乎是比較冷門的模塊，而Cypress使得E2E測試更加簡單。Cypress框架安裝成功后，example文件中還有很多的demo，有助于我們更快的了解和學(xué)習(xí)該框架。Cypress也可以說是web UI自動化的完美解決方案，下文中將簡單描述Cypress的優(yōu)勢。
1.2、Cypress優(yōu)勢
（1）安裝簡單
毫不夸張的說，在網(wǎng)絡(luò)正常的情況下，10分鐘就可以安裝好Cypress框架，一天則可以入門，寫一些簡單的用例。
（2）運行速度快
相較于Selenium來說，Cypress的運行速度真的是相當(dāng)快了，它不需要web driver來驅(qū)動瀏覽器。
（3）腳本實時調(diào)試
在腳本編寫過程中，只要編輯器中進行保存，腳本就會自動運行，可以快速高效的知道腳本是否正確。
（4）兼容性測試
目前Cypress已經(jīng)支持Chrome和Firefox兩款主流瀏覽器，在GUI界面可以非常便捷的切換瀏覽器進行兼容性測試。
（5）失敗用例自動保存截圖
腳本運行失敗后，會在..\cypress\screenshots文件夾下面自動保存失敗用例的截圖，方便我們追蹤到失敗用例的原因。
（6）運行過程自動錄制視頻
腳本運行完成后，會在..\cypress\videos文件夾下自動保存腳本運行過程錄制的視頻。
（7）人人可用
沐沐覺得這個框架最大的好處就是“人人可用”，Cypress不但可以幫助測試人員進行版本回歸測試，瀏覽器兼容性等測試，還可以輔助研發(fā)人員進行自測，甚至可以輔助去造一些測試數(shù)據(jù)，只要是web端手工不斷重復(fù)的工作，都可以用Cypress輔助完成。
第二章、環(huán)境搭建
備注：以下安裝步驟是基于Windows10。
2.1、安裝node.js
1、官網(wǎng)下載地址：
https://nodejs.org/en/download/；
2、傻瓜式安裝，安裝后查看是否安裝成功：node –v；
3、最新版的node在安裝時同時也安裝了npm，查看npm版本：npm -v；
4、具體安裝步驟參考菜鳥教程：
https://www.runoob.com/nodejs/nodejs-install-setup.html
2.2、安裝Cypress
1、cmd進入命令行模式，進入D盤創(chuàng)建一個文件夾：mkdir Crypress_project；
3、進入新創(chuàng)建的文件夾下面：cd Crypress_project；
4、初始化項目：npm init -y；
5、安裝cypress：npm i cypress -S -D；安裝成功截圖如下：
6、打開package.json文件，將里面的內(nèi)容全部刪除，復(fù)制上去以下代碼：
{
? ? ? "scripts": {
? ? ? "cypress": "cypress open"
? ? ?}
?}
2.3、運行Cypress
1、運行命令：npm run cypress；
2、Cypress窗口正常打開不報錯，即環(huán)境安裝成功。
3、examples中是Cypress提供的demo，點擊即可運行，如下圖：
第三章、實際案例
由于沐沐工作中的項目不方便作為案例，所以將以登錄禪道記錄缺陷作為demo，這樣案例更具有參考性。
1、腳本代碼如下：
describe("禪道錄入缺陷", function(){
? ? //登錄模塊
? ? beforeEach("登錄系統(tǒng)",function () {
? ? ? ? cy.visit('url')
? ? ? ? //輸入用戶名
? ? ? ? cy.get('#account')
? ? ? ? ? ? .type("賬號")
? ? ? ? ? ? .should('have.value', '賬號');
? ? ? ? //輸入密碼
? ? ? ? cy.get('[name="password"]')
? ? ? ? ? ? .type("密碼")
? ? ? ? ? ? .should('have.value', '密碼');
? ? ? ? //點擊登錄按鈕
? ? ? ? cy.get('#submit')
? ? ? ? ? ?.click();
? ? });
? ? it("提交bug", function(){
? ? ? ? //點擊測試
? ? ? ? cy.get('[href="/zentao/qa/"]')
? ? ? ? ? ? .click();
? ? ? ? //點擊bug
? ? ? ? cy.get('[data-id="bug"] > a')
? ? ? ? ? ? .click();
? ? ? ?//點擊【提bug】按鈕
? ? ? ? cy.get('#createActionMenu > a.btn')
? ? ? ? ? ? .click();
? ? ? ? //點擊影響版本
? ? ? ? cy.get('#openedBuild_chosen > .chosen-choices')
? ? ? ? ? ? .click();
? ? ? ? //選擇主干
? ? ? ? cy.get('.active-result')
? ? ? ? ? ? .contains('主干')
? ? ? ? ? ? .click();
? ? ? ? //輸入bug標(biāo)題
? ? ? ? cy.get('#title')
? ? ? ? ? ? .type("bug標(biāo)題")
? ? ? ? ? ? .should('have.value', 'bug標(biāo)題');
? ? ? ? //點擊【保存】
? ? ? ? cy.get('#submit')
? ? ? ? ? ? .click();
? ? ? ? //斷言是否新增成功
? ? ? ? cy.get('.datatable-wrapper > .table > tbody > .text-center > .text-left > a')
? ? ? ? ? ? .contains('a', 'bug標(biāo)題')
? ? ? ? ? ? .should('be.visible');
? ? });
});
2、腳本存放位置：在..\cypress\integration文件夾下面可以自定義文件存在腳本。如下圖：
3、選中用例單擊即可運行，如下圖：
4、運行成功截圖如下：
第四章、定位方式
Cypress支持id、name、class、css、text、xpath等多種定位方式，但是需要注意的是xpath定位需要額外安裝cypress-xpath庫。
4.1、xpath定位
1、官網(wǎng)地址：https://github.com/cypress-io/cypress-xpath
2、安裝命令：npm install -D cypress-xpath
3、在cypress/support/index.js文件中增加：require('cypress-xpath')
4、定位舉例，如下代碼：
（1）xpath定位舉例：
cy.xpath('//span[contains(text(),"新增主項")]') .click();
（2）class屬性定位舉例：
cy.get('.el-icon-plus').click();
4.2、Demo定位說明
元素定位的方式有很多種，我將以我的demo進行說明，demo中的定位方式不一定是最佳的但是都是正確有效的，在此詳細(xì)說明，只是方便像我一樣的測試小白進行參考。
（1）通過標(biāo)簽名進行定位
代碼如下截圖：
定位方式如下：
//點擊測試
cy.get('[href="/zentao/qa/"]')
? ? .click();
（2）通過父級的date-*屬性進行定位
代碼如下截圖：
定位方式如下：
//點擊bug
cy.get('[data-id="bug"] > a')
? ? ? ?.click();
（3）通過i標(biāo)簽的class屬性進行定位
代碼如下截圖：
定位方式如下：
//點擊【提bug】按鈕
cy.get('.icon-plus')
? ? ? .click();
（4）通過父級的id+子級的class屬性進行定位
代碼如下截圖：
定位方式如下：
//點擊影響版本
cy.get('#openedBuild_chosen > .chosen-choices')
? ? .click();
（5）通過class屬性+文本進行定位
代碼如下截圖：
定位方式如下：
//選擇主干
? ?cy.get('.active-result')
? ? .contains('主干')
? ? .click();
（6）過id進行定位
代碼如下截圖：
定位方式如下：
//輸入bug標(biāo)題
cy.get('#title')
? ? .type("bug標(biāo)題")
? ? .should('have.value', 'bug標(biāo)題');
（7）通過相對定位的并且斷言是否新增成功（不推薦使用相對定位的方式）
代碼如下截圖：
定位+斷言方式如下：
//斷言是否新增成功
cy.get('.datatable-wrapper > .table > tbody > .text-center > .text-left > a')
? ? .contains('a', 'bug標(biāo)題')
? ? .should('be.visible');
來源于：https://mp.weixin.qq.com/s/EdyArLdVzmoMY29ubrZeiw
