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所在目录）创建一个文件<font title="green">jsconfig.json
2、在<font title="green">jsconfig.json添加以下内容
{
"include": [
"./node_modules/cypress",
"cypress/**/*.js"
]
}
- 当前文件夹添加配置
1、在当前文件夹中创建一个文件<font title="green">tsconfig.json
2、在<font title="green">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并再次打开编辑即可，示意图如下所示：
