Cypressのインストールと迅速な起動

Cypress

cypress公式ドキュメント

公式文書は親切ですね.公式文書について行くことができます.

設定

npm init -y 패키지 설정들을 가져오기 위한 설정들을 생성 package.json
 // npm init -y에서 -y는 yes 라는 의미에요

npm install cypress --save-dev
npm i -D --save-dev // 위와 동일 (약어 버전)

package.jsonにscriptを追加しましょう.

"scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run --browser chrome"
  },

cypress openコマンドを実行しましょう.

cypressフォルダが作成されます.

Integrationでは多くの例が生成されます.

サンプルは不要なので、まず統合内部を削除します.

基本的に生成されたフォルダも無視できます△確かに必要な時がある.

テストファイルを作成します.

1. integration 폴더 내에 테스트용 파일을 생성합니다.
2. app.spec.js

テスト例

it("should have ....(테스트 이름)", () => {

	cy.visit("index.html"); // 방문 먼저
	cy.get('#total').should('have.text', "점심에 머먹지");
});

// 2개의 숫자에 대해 덧셈이 가능하다
it("2개의 숫자에 대해 덧셈이 가능하다", ()=>{
	cy.visit("index.html");
	// 2 + 9 = 11
	// 2 버튼을 누른다.
	cy.get(".digit").contains(2).click();
	// + 버튼을 누른다.
	cy.get(".operation").contains('+').click();
	// 9 버튼을 누른다.
	cy.get(".digit").contains(9).click();
	// = 버튼을 누른다.
	cy.get(".operation").contains('=').click();
	// 11이 나오는지 확인한다.
	cy.get("#total").should("have.text", "11");
});

cypress.jsonプロファイル

cypressを実行すると、ビデオなど様々なファイルが生成されます.

何気ないファイルがgithubにアップロードされないようにします.jsonファイルで管理してください.

{
  "integrationFolder": "test",
  "testFiles": "*.spec.js",
  "screenshotOnRunFailure": false,
  "video": false,
  "pluginsFile": false,
  "supportFile": false,
  "blockHosts": ["cdn.jsdelivr.net"]
}