誰でも簡単！E2EテストをCypressで自動化する方法

2022.07.28

本記事のポイント

品質保証のために行うE2Eテスト（エンドツーエンドテスト）ですが、サイトを更新する度にテストを行う必要があり、人の手で行うには、多くの時間や労力を費やします。

そこで今回は、Web UI の自動テストツールであるCypressを使ったE2Eテストを自動化する方法について、ご紹介します。

はじめに

エンドユーザーの行動に基づくテストケースを実行することで、アプリケーションが正しく動作するか確認できる E2Eテストは、UIを含むプロジェクトには欠かせないものとなっています。

手動で実装することも可能ですが、時間がかかることや、コードを更新するごとに、チェックし直す必要があるため、できる限り自動化したいという方もいらっしゃるのではないでしょうか？

そこで今回は、Cypress を使ったE2Eテストの自動化について解説します。

Cypress(サイプレス)とは

CypressとはJavaScriptで構成されたオープンソースのフロントエンドテストツールです。同じようなことができるツールにSeleniumがあります。Cypressは大部分が無料で利用可能で、Seleniumと比べて使えるプログラミング言語、ブラウザが少ない代わりに、環境構築の難易度が低いです。

Cypressの方がSeleniumより早く、Seleniumにない便利な機能を持っていることから、今回はCypressを使って実装していきたいと思います。

Cypressの主な機能

CypressにはWeb サイト上で操作するためのコマンドが何種類も用意されています。ここでは、よく使う機能をいくつかご紹介します。これ以外にも便利なコマンドが多数存在しますので、以下に挙げた実行例以外のコマンドは公式サイトで検索してみてください。

1. Webサイトへのアクセス

テストのためのサイトにアクセスするためのコマンドです。

今回は、簡単に実行できるよう、サーバーを使わずに進めていきます。そのため、リンクの部分にファイルの相対パスを入れることでアクセスすることが可能になります。

cy.visit('http://localhost:3000') //サーバーでの開発の例

cy.visit('url') //検索の例

cy.visit('~.html') //ファイルの相対パス

２. 要素の取得

タグ名や属性ならget、文字列で取得したい場合はcontainsを使用します。

getは取得方法もいろいろあり、id、タグ、クラスで異なるので、以下の例を参照してください。

cy.get('タグ名')
cy.get('#id')
cy.get('.classname')

cy.contains('文字列')

ここではgetの取得方法についてご紹介しましたが、タグやクラスで検索することはなるべく避けるようにしてください。クラスの名前や、タグが変わるとエラーになってしまいます。

またcontainsは要素の存在を確かめるには有効ですが、クリックなどのアクションを起こすために取得することはおすすめできません。

可能であれば、テスト用にdata-cyなどの属性を付与することが望ましいです。

cy.get('input[type=email]')

cy.get('[data-cy="test"]')

3. サイト上での操作

クリックやリロード、入力など、Webサイトを使用する際のアクションのコマンドを一部ご紹介します。Cypressはページの読み込みなどの更新が終わるより先に次の命令を実行してしまい、エラーになることがあります。

その場合、cy.wait()を用いて更新が終わるまでテストを一旦中断させて、その操作が終わるのを待ってから、次の動作に行くことでエラーが解消する可能性があります。cy.wait() の引数に英数字を入力すると、その秒数だけスリープさせることができます。

cy.reload() // リロード

cy.click() // クリック動作

cy.type() // 文字入力

cy.wait(500) // 500msスリープ

また、typeとclickに関しては、先ほどの要素の取得と組み合わせて、以下のようにすることも可能です。

cy.get('input[type=email]').type('sample@email.com')

cy.get('button[type=submit]').click()

1行目の例では、getでinputタグの中にtype=email という属性を持った部分を取得して sample@email.com を入力しています。２行目の例では、buttonタグでtype=submitを持った要素を取得して、clickを作用させています。

4. 要素のチェック方法について

取得した要素や、クリックして飛んだ先のページが正しいか、を should() というコマンドで確認をすることができます。実行例は次の見出し『要素の数え方やオプションについて』でご説明します。

.should('テスト内容')

.should('テスト内容',比較値)

5. 要素の数え方やオプションについて

これまで、要素の取得や動作などについてご紹介してきましたが、取得した要素の個数の取得したり何番目の要素に動作を加えたい、といったケースもあると思いますので、この章で解説していきたいと思います。

cy.get('table').find('tr').its('length').should('eq',3)

cy.get('button').first().click()

cy.get('table').last().click()

cy.get('table').eq(2).click()

最初の例では、getでtableタグを取得して、その中にあるtrタグを数え上げて、その長さをlengthで取得して、その値が３に等しいか判定しています。

２つ目の例では、複数あるbuttonタグのうち一番最初の要素をfirst() で指定してクリックさせています。

３つ目の例では、last() にすることで一番最後のbuttonをクリックさせています。

４つ目の例はあまり使うことはおすすめしませんが、強攻策として知っておくと便利なのでご紹介します。２つ目、３つ目の first, last の代わりにeq() を使うことでより細かく、何番目というのを指定できます。注意点としては、１番目をeq(0)と数えるため、欲しい番目の数字から１引いたものをeqの括弧の中に入れるようにしてください。

また、shouldの第一引数でよく使うeqに関しては、比較値を与え、一致するか確認することが可能です。そして、この比較値は数字だけでなく、文字列も可能です。

Cypressを利用する前の、事前準備

初めに、Cypressをインストールします。Cypressは開発する環境ごとにインストールすることが推奨されているため、テストを作りたいディレクトリに移動して、以下のコマンドを実行してください。

$ npm install cypress

また、今回使う言語はJavaScriptなのでnode.jsもインストールしてください。インストール出来ているか、分からない方は、node –version　を用いて確認して下さい。

インストールしていない場合は、以下のリンクからインストールしてください。
https://nodejs.org/ja/download/

各OSの詳しい環境構築の方法は、　こちらをご覧ください。

インストールが終わったら、以下のコマンドを入力してください。

$ npx cypress open

Cypressのアイコンが表示され、クリックすると以下の画面が開くと思います。

左のタブを選び、スクロールして左下にあるcontinueを選択してください。

すると以下の画面が出るので、Chromeの方を選択してください。

これでCypressの準備は終わったので、一度Cypressの画面は閉じてください。

また、以下の画面も、Closeを選んで閉じてください。

次に今回のテストで使うWebサイトのhtmlファイルを準備していきます。

簡単なhtmlのファイルを用意しました。用意したサイトは以下のようになっています。

以下のファイルをコピーして、VSCodeなどに貼り付けてください。場所は今回のテスト用に用意したディレクトリのすぐ下に配置してください。ここまで来れば、準備は完了です。実際にテストを作って行きましょう。　

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>サンプル</title>
    </head>
    
    <body>
        <h1> 登録フォーム　</h1>
        メールアドレス
        <input type="email" id="input-email"/>
        <p>権限
        <select id="select-role">
            <option value="一般">一般</option>
            <option value="管理者">管理者</option>
        </select></p>   

        <input type="button" value="登録" id="submit" onclick="Submit()"/>
        <p id='result-email'>未記入</p>
        <p id='result-role'>未記入</p>

        <script>
        function Submit() {
        document.getElementById('result-email').textContent =
            document.getElementById("input-email").value;

        document.getElementById('result-role').textContent =
            document.getElementById("select-role").value;
        }
        </script>
    </body>
</html>

検証・結果

それでは事前準備で作った環境で、簡単なテストを作ってみましょう。以下がE2Eテストのコードになります。

describe('Sample test', () => {
    it('check data', () => {
        cy.visit('test_cypress.html')  // 今回はファイルの相対パス

        cy.get('#input-email').type('dummy@email.com')  // 適当なメールアドレスを渡す
        cy.get('#select-role').select('管理者') //権限の選択
        cy.get('#submit').click()  // 登録ボタンを押す
        cy.get('#result-email').should('have.text', 'dummy@email.com')  // 以下、出力のチェック
        cy.get('#result-role').should('have.text', '管理者')
    })
})

テストの内容としては、メールアドレスを入力し、権限を選択します。その後、登録ボタンを押すとその下に入力した結果が表示されるので、その結果が正しいか確認して行きます。

ファイル構造は以下のようになっています。正しく配置していないとテストが実行できないので、確認してから次のステップに進みましょう。ここでテストファイルを格納するためにe2eというフォルダがありますが、これはあってもなくても構いません。Webサイトのコードを今回作ったディレクトリの下に、テストのコードをcypressのフォルダの下に置いてあれば問題ありません。