[Cypress] 커스텀 커맨드 vscode 자동완성 적용시키기

🦍 과정

1. commands.d.ts 파일 작성하기

2. jsconfig.json 파일 작성하기

 

---

1. commands.d.ts 파일 작성하기

// cypress/support/commands.js

Cypress.commands.add('someCustomCommand', () => {
	cy.get('div');
});

commands.js 파일에 위와 같은 커스텀 커맨드를 작성했을 때 commands.d.ts 파일은 다음과 같이 작성해준다.

 

// cypress/support/commands.d.ts

declare namespace Cypress {
	interface Chainable {
		/**
		 * @description 커스텀 커맨드
		 */
		someCustomCommand(): Chainable<void>;
	}
}

 

2. jsconfig.js

루트 디렉토리에 jsconfig.js 파일을 생성한 후 다음의 내용을 넣어준다.

{
	"compilerOptions": {
		"types": ["cypress", "./cypress/support/commands.d.ts"]
	}
}

 

jsconfig의 컴파일러 옵션의 types에 위 배열을 넣어주면, cypress 패키지로부터 제공되는 기본 커맨드 타입 정보와 직접 작성해둔 커스텀 커맨드의 타입 정보를 토대로 테스트 코드 작성 시 자동완성의 도움을 받을 수 있다.