WEB自動化-14-Cypress 其他

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，或掃描下面的二維碼添加關注：