Cypressでテストを自動化する!e2eツールの比較とテストの書き方。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEJavaScriptJavaScript実践Cypressでテストを自動化する!e2eツールの比較とテストの書き方。Cypressでテストを自動化する!e2eツールの比較とテストの書き方。自動テストこの記事では、e2eテストの特徴や目的について説明したうえで、Cypressを例にe2eテストの実装例を紹介したい。Cypressは使い方が直感的で覚えやすい、またe2eテスト以外の目的にも転用できそうなおもしろい技術なので、ぜひ一度試してみてほしい。この記事はAngularアプリをターゲットとしてe2eテストをおこなうパターンを想定しているが、React・Vue.jsなどでも同じような手順でCypressをプロジェクトに取り込むことができる。HTML要素を指定するe2eテストとは?e2eテストはソフトウェア開発におけるテスト手法のひとつで、リアリスティックなシナリオに基づいて一連の画面操作をテストする。「e2e」はEnd-to-Endの略であり、「最初から最後まで」といったニュアンスで考えると分かりやすいだろう。e2eテストのテスト項目としては以下のようなものが考えられる。(例)入力項目にユーザ名・メールアドレスを入力して送信ボタンをクリックして、新規のユーザアカウントが作成されたか検証する。以前はこういったシナリオのテストは自動化するのが困難であったが、技術の進歩により多くの部分はフレームワークを用いて自動化できるようになっている。単体テスト・結合テストとの違いe2eテストと単体テスト・結合テストの違いについて説明しておこう。ソフトウェア開発においてはおもに以下の3つのテストが用いられる。単体テスト(ユニットテスト)単体テストは個別のコンポーネントといった小さな単位のパーツを対象とした機能テスト。単体テストについて詳しく知りたい人はこちらの記事を参考にしてほしい。結合テスト(インテグレーションテスト)複数のコンポーネントが組み合わさった状態で機能するかどうか検証するためのテスト。e2eテストフロントエンド・バックエンドや含めたシステム全体でおこなうテスト。できるだけユーザが使用するのに近い環境でおこなうのが望ましいとされている。単体テスト・結合テストとは異なり、e2eテストは品質保証のためのチームにより実行・管理されることが多い。e2eテストと結合テストは企業によっては同じ意味で用いることもある。e2eテストのJSフレームワークJavaScriptには多くのe2eフレームワークが存在する。知名度の高いフレームワークを挙げるとすると以下のようになる。WebdriverJSProtractorWebdriverIONightwatchJSCypressCucumberTestCafeJestこれらのフレームワークの多くは「Selenium」というインターネットブラウザの操作を自動化するためのソフトをべ-スに作られている。https://www.cypress.ioCypressはe2eテストのためのJavaScriptフレームワーク。ユーザの画面操作を模倣するかたちでテストを記述することができるので、より本番に近いかたちのテストを自動でおこなうことができる。Cypressで書かれたテストはCI(継続型インテグレーション)ツールに取り込み、変更がマージされるたびに自動で実行するように設定できる。AngularにはProtractorという標準のe2eテストフレームワークが備わっているが、この記事では知名度が高く、使用している企業も多い「Cypress」を取り上げることにした。Cypressの長所をまとめると以下のようになる。知名度が抜き出ており導入している企業も多いコマンド(テストの指示内容)が直感的で分かりやすいインターネット上の情報が多いe2eテストの書き方AngularプロジェクトにCypressをインストールして簡単なテストシナリオを作成してみよう。Angularアプリを用意するまずはe2eテストの対象となるアプリを用意しよう。アプリは入力フォームなどの要素が含まれていれば、どういった内容のアプリでも構わない。この記事では簡単なフォーム入力画面のみを持つアプリを用意した。CypressをインストールするプロジェクトにCypressをインストールするために以下のコマンドを実行する。@briebug/cypress-schematicAngularのプロジェクトの場合、Protractor(Angular標準のe2eフレームワーク)を削除するかどうか尋ねられる。残しておく必要が無ければ削除してしまって問題ないだろう。コマンドが正常に実行されたら、プロジェクト内に「cypress」フォルダとcypress.jsonファイルが作られているはずなので確認しよう。「angular.json」「package.json」「package-lock.json」が更新されているはずだ。Cypressを起動するCypressを起動する方法はいくつかあるがここではCypressのコンソールを使用したい。アプリをスタートした状態で以下のコマンドを実行する。open問題が無ければ以下のようなコンソールが新しいウィンドウにて表示されるはずだ。*エラーが発生する場合は、cypress.jsonファイルの「basuUrl」プロパティに正しいURLが設定されているか確認してほしい。spec」をクリックするとテストを実行できるが、まずはテストの内容を記述しよう。テスト項目を作成するではテスト項目を作成していこう。integration」フォルダにあるspec.tsに記述する。以下のようにテストを書いてみよう。});})describe構文にテストのタイトルを記述し、テスト項目はit構文内に記述する。cy.vist(‘/’)はcypressのコマンドであり、デフォルトURLが開くかどうかのテストとなる。tests」をクリックして、テストをスタートしよう。ブラウザーが自動で開きテストが開始されるはずだ。CypressのコマンドではCypressのコマンドを少し勉強しよう。コマンドとはテストをおこなうためのメソッド群であり、「入力欄にフォーカスを合わせる」「文字を入力する」といったユーザアクションを模倣できる。Cypressではこういったコマンドを組み合わせてテストを書く。指定した要素までスクロールするおもなCypressコマンドその他のコマンドを確認したい人はCypressのドキュメントを読んでほしい。https://docs.cypress.io/apiHTML要素を指定するテストをするうえでは画面内の特定のHTML要素が簡単に識別できるようにする必要がある。その際は要素にdataプロパティを付け加えるのがわかりやすい。htmlファイルを開き指定したい要素に「data-e2e=”name-input”」といった具合にデータを記述しよう。テストファイルでは、getコマンドを使用して指定した要素を得ることができる。cy.get('[data-e2e="name-input"]')各入力欄やボタンにdataプロパティを加え、簡単なテストを作成しよう。});})再度テストを実行する。Cypressがユーザの画面操作を模倣しているのが確認できるはずだ。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事JavaScriptのDateオブジェクトを使いこなす!日付・時間のフォーマットや加算・比較。2022.02.27この記事では、JavaScriptのDateオブジェクトについて基本的な使い方や仕様などを説明したい。Dateオブジェクトは日付や時間情報を操作する[...]StorybookをReactアプリで使う!導入のメリットとセットアップの手順。2021.12.16この記事では、フロントエンド開発に新しい波を巻き起こしているライブラリ「Storybook」についてその特徴やセットアップの手順などを説明する。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。