Cypress を用いたE2Eテスト方法 メモ

• E2Eテストツールの調査をする際にCypressに少し触れたためメモしておく。

Cypressとは

• JavaScript製のブラウザテストに特化したE2Eテストフレームワーク。

Cypress インストール

npm install cypress

Cypress プロジェクト作成

• cypressという名称のプロジェクトディレクトリを作成する場合

npx cypress open

テストコード

• test.js

  • {project名}/integration配下に配置する。
  • cypress.ioでGoogle検索を行い、検索結果の1番上のページにアクセスし、タイトルの値を確認する。

  describe("Test Suite", function(){
    it("Test 01", function(){
        // Googleページへ
        cy.visit("https://www.google.com/");

        // 検索boxにcypress入力 → エンター入力
        cy.get('input[type="text"][name="q"]').type("cypress.io").type("{enter}") 

          // 最初の検索結果をクリック
          cy.get('#search a').first().click();

        // アサーション ページタイトル確認
        cy.title().should("include", "JavaScript End to End Testing Framework | cypress.io"); 
        // その他の操作
        cy.screenshot(); // スクリーンショット
        cy.reload(); // ページのリロード
        cy.log("test log"); // ログ出力

    });
  });

• cypress.json

  • same origin ではないサイトへ飛ばすための設定

  {
    "chromeWebSecurity": false 
  }

テスト実行

• cypress起動

  npx cypress open

※cypressコンソールが開く

• Testタブを選択し、test.jsを選択

※テストが実行される。

参考情報

• Cypress入門～初心者でも簡単にE2Eテストが作れる～
• Cypress を利用した E2E テスト
• docs.cypress.io