Cypress初探（一）

                                             Cypress初探（一）

        最近想學習下web ui測試框架，發現了比較好用的cypress，直接用js操作更方便更快。

一、開發環境

Cypress + nodejs (node之前已安裝，直接官網下載安裝即可)+ intellij idea

1. 安裝cypress

cd projectpath                   # 工程目錄
npm install cypress --save-dev   # 安裝cypress

 

       Cypress安裝完成後，可看到提示：You can now open Cypress by running: node_modules/.bin/cypress open，通過如下命令打開Cypress。正常可看到如下窗口，其中有許多cypress自帶的例子可以參考。

node_modules/.bin/cypress open

2. 配置

在工程路徑下創建package.json文件，配置以chrome瀏覽器運行用例。

{
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run --browser chrome"
  },
  "devDependencies": {
  }
}

cypress.json文件中添加如下內容，"chromeWebSecurity": false 解決chrome跨域問題；

reporter ：cypress run會自動生成xml文件，使用 allure 生成對應報告。

{
        "chromeWebSecurity": false,
        "reporter": "junit",
        "reporterOptions": {
           "mochaFile": "results/my-test-output[hash].xml",
           "toConsole": true
        }
}

3. nodejs開發環境

已安裝intellij idea，安裝插件支持Nodejs開發。在Perferences->Plugins，選擇下面的Browse repositories。

Browse repositories...對話框中搜索NodeJS，Install安裝插件，安裝完成後需要重啓生效。

二、第一個例子

1. intellij idea 中打開之前的工程目錄，可看到cypress的開發目錄：

1) fixtures：自定義json文件

2) integration：編寫測試用例

3) plugins：插件

4) support：目前未用到，需要自定義指令的時候可以深入研究

 

2. 第一個例子

在integration下新建測試目錄文件，編寫測試用例，下面的例子主要實現：登錄，查詢

/// <reference types="Cypress" />

describe('testcase', function () {
    before(function () {
        // runs once before all tests
        // 登錄
        cy.visit("XXXX");
        cy.get("#form-img").click();
        cy.get("#login-username").type("XXXX");
        cy.get("#login-password").type("XXXX");
        cy.get(".btn").click();
        cy.wait(1000);
    });
    after(function () {
        cy.get("img").click();
        cy.contains("登出").click();   //登出
    });
    beforeEach(function () {
       // runs before each test
    });
    it('test', function () {
        cy.wait(1000);
        cy.get('.btn-info').click();
        // 具體case 

    });
});

常用commands:

.get(selector)      # get
.clear()            # 清除input|textarea內容
.click()            # 點擊
.contains()         # 包含文本
.dblclick()         # 雙擊
.scrollIntoView()   # 滾動元素到視圖中
.scrollTo(position) # 滾動到特定位置
.visit(url)         # 訪問url
.wait(time)         # 等待毫秒
.type()             # 輸入文本

3. 運行

Cypress應用程序中，Cypress同步刷新目錄，檢測到新的改動馬上運行。

可通過cypress run --browser chrome執行用例，或者cypress應用程序中，選中要執行的用例運行。

Cypress入門簡單，且運行快，同時提供自動生成選取dom的語句，很方便。如下：

 

參考： https://testerhome.com/articles/19035