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
↧