14 其他
14.1 IDE集成
? ? 有非常多的三方插件都支持集成IDE中，從而提高作業效率，我們以Visual Studio Code為例講解，主要插件如下所示：
- Cypress Fixture-IntelliSense
? ? Cypress Fixture-IntelliSense是一款支持在cy.fixture()、cy.route()等時的一款智能提示插件，插件地址：https://marketplace.visualstudio.com/items?itemName=JosefBiehler.cypress-fixture-intellisense
- Cypress Helper
? ? Cypress Helper 是一款提供各類幫助和命令的插件，例如提供了轉到定義、查找未使用命令等，插件地址：https://marketplace.visualstudio.com/items?itemName=Shelex.vscode-cy-helper
- Cypress Snippets
? ? Cypress Snippets 是一款提供各種代碼片斷和縮寫提示的插件，非常好用，插件地址：https://marketplace.visualstudio.com/items?itemName=CliffSu.cypress-snippets
? ? Mocha代碼片斷，對應的縮寫如下所示：
| 片斷 | 對應代碼 |
|---|---|
| dsb | describe('', () => {}); |
| ctx | context('', () => {}); |
| spy | specify('', () => {}); |
| it | it('', () => {}); |
| bf | before('', () => {}); |
| bfe | beforeEach('', () => {}); |
| af | after('', () => {}); |
| afe | afterEach('', () => {}); |
? ? Cypress 代碼片斷，對應的縮寫如下所示：
| 片斷 | 對應代碼 |
|---|---|
| cyvt | cy.visit(''); |
| cygt | cy.get(''); |
| cyfd | cy.get('').find(''); |
| cyft | cy.get('').first(''); |
| cyte | cy.get('').type(''); |
| cycs | cy.contains(''); |
| cyck | cy.get('').click(); |
| cywt | cy.wait(''); |
| cylg | cy.log(''); |
| cype | cy.pause(); |
| cydg | cy.debug(); |
| cyst | cy.screenshot(''); |
| cyvp | cy.viewport(); |
- Open Cypress
? ? Open Cypress可以直接在Visual Studio Code中快速打開Cypress
14.2 添加代碼智能提示
? ? Cypress有很多命令，單憑記憶肯定不行的，但Cypress也提供了智能提示功能，配置如下所示：
- 每個測驗用例前添加一行參考，如下所示：
/// <reference types="cypress" />
? ? 如果有自定義命令，則配置如下所示：
// 比如添加了自定義命令 createDefaultTodos
/// <reference types="../support" />
- 添加全域組態檔
? ? 添加一個全域的組態檔后，則每個測驗檔案就不需要每次都要添加一個參考，操作步驟如下所示：
1、在工程根目錄（cypress.json所在目錄）創建一個檔案jsconfig.json
2、在jsconfig.json添加以下內容
{
"include": [
"./node_modules/cypress",
"cypress/**/*.js"
]
}
- 當前檔案夾添加配置
1、在當前檔案夾中創建一個檔案tsconfig.json
2、在tsconfig.json添加以下內容
{
"compilerOptions": {
"allowJs": true,
"types": ["cypress"]
},
"include": ["**/*.*"]
}
14.3 添加組態檔智能提示
? ? 在編輯檔案（例如cypress.json）時，如果沒有智能提示，則只能一個個輸入，還容易出錯，而Cypress也是支持在IDE環境，編輯組態檔也做到智能提示，以cypress.json為例，直接在組態檔添加以下內容即可：
"$schema": "https://on.cypress.io/cypress.schema.json",
? ? 添加成功后，重啟Visual Studio Code并再次打開編輯即可，示意圖如下所示：
原文地址：https://www.jianshu.com/p/f2a681979256
本文同步在微信訂閱號上發布，如各位小伙伴們喜歡我的文章，也可以關注我的微信訂閱號：woaitest，或掃描下面的二維碼添加關注：
作者： Surpassme
來源： http://www.jianshu.com/u/28161b7c9995/
http://www.cnblogs.com/surpassme/
宣告：本文著作權歸作者所有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出 原文鏈接 ，否則保留追究法律責任的權利，如有問題，可發送郵件 聯系，讓我們尊重原創者著作權，共同營造良好的IT朋友圈，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514171.html
標籤：其他