自動テスト

Cypressを導入してUIの自動テストを実装する方法解説!【自動テストツールを使ってみよう】

PCでコーディング

こんにちは、フルスタックエンジニアのryuです。

今回の記事は、Cypressを導入してUIの自動テストを実装する方法を解説します。Cypressとは、WebのUIテストを自動化できるツールです。Javascriptで実装することができます。UIテストを実装したい方に向けて、Cypressの導入方法を解説します。

Cypressを導入してUIの自動テストを実装する方法解説!

WebのUIテストを自動化したいんだけどどうすればいいの・・・?

今回の記事では、Cypressを導入してUIの自動テストを実装する方法を解説します。Cypressを使って簡単なWebのテストを実装してみましょう!

Cypressのインストール

では、早速Cypressをインストールしましょう。

Cypressはnode.js環境が必要です。node.jsのインストールをしていない方は、下記のリンクからnode.jsをインストールしましょう。

Node.js (nodejs.org)

node.jsの環境が準備できたら、Cypressをインストールしましょう。

npm install cypress

インストールが完了するまで、5分程度待ちましょう。インストールが完了したら、Cypressを起動してみましょう。

Cypressの起動

Cypressの起動は以下のコマンドを実行します。

./node_modules/.bin/cypress open

//windowsの場合
.\node_modules\.bin\cypress open

Cypressを起動すると、ブラウザが立ち上がります。「OK, got it!」をクリックしましょう。

Cypressの起動

すでにいくつかのテストコードがあるので、試しに実行してみましょう。

“actions.spec.js”をクリックしましょう。

Cypressのテストファイル

ファイルをクリックすると、UIテストが自動で実行されます。

Cypressのテストを実行する

動作確認ができたら、Cypressの導入は完了です。次は簡単なテストコードを書いてみましょう。

Cypressのテストコードを書いてみよう

では、簡単なCypressのテストコードを書いてみましょう。

テストコードの作成

テストコードを作成するときは、Cypressのブラウザ上の「+New Spec File」をクリックします。

テストコードの新規作成

先ほど実行したサンプルのテストコードは「example」ディレクトリに格納されています。別のディレクトリを作成して、テストコードを保存しましょう。

テストコードの保存

テストコードの拡張子は”.spec.js”です。

Cypressのサンプルテストを実装する

先ほど作成したテストコードに以下のように、入力しましょう。

describe('My site test', () => {
  it('visit my site', () => {
    cy.visit('https://engineer-ninaritai.com/')
  })
})

テストコードの作成が完了したら、実行してみましょう。“test1.spec.js”ファイルをクリックします。

作成したテストコード

Webサイトにアクセスする簡単なテストが実行されます。

Cypressのテスト実行結果

このように、CypressでUIテストを実装することができます。テストの書き方については、サンプルコードや公式ページ、GitHubなどを参考にすると良いでしょう。

Why Cypress? | Cypress Documentation

GitHub – cypress-io/cypress-example-recipes: Various recipes for testing common scenarios with Cypress

Cypressの関連記事

当ブログでは、Cypressの使い方など解説しています。興味のある方は是非ご覧ください!

Cypress導入方法まとめ

今回の記事では、Cypressの導入方法について解説しました。まとめると以下のようになります。

  • npm install cypressでインストール
  • ./node_modules/.bin/cypress openでブラウザを立ち上げる
  • テストコードの実行

CypressはUIテストを簡単に実装できるツールなのでぜひ使ってみてください。

当ブログでは、このようなITに関連する内容を発信しているので興味のある方は是非ご覧ください。

自動テストについてさらに詳しく知りたい方はこちらの参考書がオススメです。

About me
大手メーカのIT部門→上場ベンチャーでフルスタックエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!

UdemyでIT講座をチェック!

  • セールだと1500円前後!
  • 無料サンプル講義動画・無料講義動画あり!
  • 気に入らなければ30日間返金保証!