現代測試工具 Cypress 的門檻

Cypress

簡介

Cypress 是運行在瀏覽器中的測試工具。Web 技術在不斷的發展，測試技術也是同樣。

能幹啥

• 端到端測試
• 集成測試
• 單元測試

重要的特性

• Timing travel 看得見的測試運行
• 基於瀏覽器特別容易調試
• 自動的等待
• 方便的間諜，存根和定時器工具
• 方便的流量控制
• 一致的結果
• 簡單的截屏/視頻功能
• 多瀏覽器支持

平常開發的測試任務，它的基礎功能都有了。有了它，咱們就能夠在咱們熟悉的瀏覽器上進行測試相關的任務。

測試四步走

• 設置測試
• 編寫測試
• 運行測試
• 調試測試

快速開始

依賴以及安裝

• cypress
• chrome/firefox/... 瀏覽器

cd your_project_name && yarn add cypress
複製代碼

使用 cypress open 打開 cyress 開始話工具

{
    "scripts": {
        "cy:open": "cypress open"
    }
}
複製代碼

運行npm 腳本後， 會出現 Verifying Cypress can run xxx 的字樣，而後在項目的更目錄下面生成一個 cypress 的配置文件。目錄結構式這樣的：

.
├── fixtures
│   └── example.json
├── integration
│   └── examples
│       ├── actions.spec.js
│       ├── xxx...
├── plugins
│   └── index.js
└── support
    ├── commands.js
複製代碼

cypress 的可視化操做界面

官方在集成測試文件（INTERGETION TESTS/examples）裏面的有許多官方的例子，能夠參考

小結

1. 瞭解 cypress 是什麼，能幹什麼
2. 如何經過 npm 的方式簡單的操做 cypress

下一步

1. 使用 cypress 測試用例，特性與測試用例的結合
2. 熟悉 api，編寫簡單的測試用例