- 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を選択※テストが実行される。