無償のテスト自動化ツール「Cypress（サイプレス）」とは？使い方も解説

Webアプリケーション開発において、品質保証は欠かせないプロセスです。しかし、手動でのテストは時間がかかり、人的ミスも発生しやすいため、効率的なテスト自動化ツールが求められています。

今回ご紹介するのがは、無償で使うことができるテスト自動化ツール”Cypress（サイプレス）”です。Cypressは、フロントエンドのテスト自動化に特化したオープンソースのツールで、E2Eテスト（エンドツーエンドテスト）やコンポーネントテストなどを効率的に実行できます。

この記事では、Cypressの概要から基本的な使い方までを詳しく解説しています。Cypressを導入することで、開発効率と品質を向上させ、より安定したWebアプリケーションを提供できるようになるでしょう。

1. Cypressとは？
2. Cypressの主な特徴
3. Cypressの導入方法
4. Cypressの基本的な使い方
4.1. テストファイルの作成
4.2. テストコードの記述
5. Cypressのコマンド
6. Cypressのテスト例
7. Cypressの応用
8. まとめ

Cypressとは？

Cypressは、JavaScriptで記述されたテスト自動化フレームワークです。モダンなWeb開発に最適化されており、React、Angular、Vue.jsなどの主要なフロントエンドフレームワークとの連携もスムーズに行えます。テストコードもJavaScriptで書くことができます。

Cypress公式ページ（外部リンク）

Cypressの主な特徴

簡単なセットアップ: npmやyarnでインストールするだけで、すぐに使い始めることができます。
豊富なAPI: DOM操作、ネットワークリクエストのモック、アサーションなど、テストに必要な機能が豊富に揃っています。
タイムトラベルデバッグ: テスト実行中の各ステップを記録し、後から再生することで、デバッグを効率化できます。
自動待機: 要素の読み込みやアニメーションの完了などを自動的に待ってくれるため、テストコードがシンプルになります。
クロスブラウザテスト: Chrome、Firefox、Edgeなどの主要ブラウザでテストを実行できます。

Cypressの導入方法

Cypressの導入は非常に簡単です。以下の手順で進めます。

プロジェクトの作成: まず、テスト対象のWebアプリケーションプロジェクトを作成します。
Cypressのインストール: プロジェクトのルートディレクトリで、以下のコマンドを実行してCypressをインストールします。


　npm install cypress --save-dev

または


　yarn add cypress --dev

Cypressの実行: 以下のコマンドを実行すると、Cypressのテストランナーが起動します。


　npx cypress open

Cypressの基本的な使い方

Cypressの基本的な使い方をご紹介します。

テストファイルの作成

Cypressのテストファイルは、cypress/e2eディレクトリに作成します。ファイル名は、.cy.jsの拡張子で保存します。

テストコードの記述

Cypressのテストコードは、以下の構造で記述します。


　describe('テストスイート名', () => {
  　it('テストケース名', () => {
    　// テストコード
　  });
　});

Cypressのコマンド

Cypressには、様々なコマンドが用意されています。代表的なコマンドは以下の通りです。

cy.visit(url): 指定したURLのページにアクセスします。
cy.get(selector): 指定したセレクタに一致する要素を取得します。
cy.contains(text): 指定したテキストを含む要素を取得します。
cy.type(text): 指定したテキストを入力します。
cy.click() : 要素をクリックします。
cy.should(assertion): アサーションを行います。

Cypressのテスト例

以下に、簡単なテストの例を示します。


 describe('My First Test', () => {
   it('Gets, types and asserts', () => {
     cy.visit('https://example.com') // example.comにアクセス

     cy.contains('username').click() // usernameを含む要素をクリック
     cy.get('#username') // idがusernameの要素を取得
       .type('fake@email.com') // fake@email.comと入力

     cy.get('.btn').click() // classがbtnの要素をクリック

     cy.url().should('include', '/dashboard') // URLが/dashboardを含むかアサーション
   })
 })

Cypressの応用

Cypressには、他にも様々な機能があります。

カスタムコマンド: よく使う処理をカスタムコマンドとして定義できます。
テストデータの管理: テストデータは、JSONファイルやfixtureとして管理できます。
CI/CDとの連携: Cypressは、GitHub ActionsやCircleCIなどのCI/CDツールと連携できます。

まとめ

この記事では、無償のテスト自動化ツールであるCypressの概要と基本的な使い方を紹介しました。Cypressは、導入が簡単で、豊富な機能を備えているため、Webアプリケーションのテスト自動化に最適なツールです。ぜひ、Cypressを導入して、開発効率と品質を向上させてみてください。

APPSWINGBYでは、テストの自動化からCI/CD環境の構築、導入など、お客様のソフトウエア開発環境のモダン化のご支援をさせて頂いています。「テストの自動化」「CI/CD」の導入についてお考えでしたら、下記のお問合せフォームよりお気軽にお問合せください。

お問い合わせはこちら

この記事を書いた人

株式会社APPSWINGBY マーケティング

APPSWINGBY（アップスイングバイ）は、アプリケーション開発事業を通して、お客様のビジネスの加速に貢献することを目指すITソリューションを提供する会社です。

ご支援業種

情報・通信、医療、製造、金融（銀行・証券・保険・決済）、メディア、流通・EC・運輸など多数

監修

株式会社APPSWINGBY
CTO 川嶋秀一

動画系スタートアップ、東証プライム R&D部門を経験した後に2019年5月に株式会社APPSWINGBY 取締役兼CTOに就任。
Webシステム開発からアプリ開発、AI、リアーキテクチャ、リファクタリングプロジェクトを担当。C,C++,C#,JavaScript,TypeScript,Go,Python,PHP,Vue.js,React,Angular,Flutter,Ember,Backboneを中心に開発。お気に入りはGo。