🙆

フロントエンドテスト入門 Cypress編

に公開
React
frontend
Test
Cypress
tech

今回は、cypressについて解説していきます。

cypressは簡単にE2Eテストができるツールになります。

結構使っている現場が多いかと思うので、この機会に身につけましょう。

概要

まず、Cypressの特徴を簡単に紹介します。

主な特徴は次の5つです。

  • 実際にブラウザを使用するので、ユーザーと同じ環境でのテストが可能
  • 設定が簡単で、すぐにテストを試せれる
  • デバッグがしやすい
  • フロントエンドのモダンフレームワークのテストがしやすい
  • ドキュメントが見やすい

またE2Eテスト以外にも、コンポーネントテストや、インテグレーションテスト、ユニットテストを実行することもできます。

さらに、スナップショットを取ったりクロスブラウザテストなどもできます。

要は、ブラウザできるテストは大体できるわけです。

Getting Started

ではさっそく、Cypressを試していきましょう。

npx create-next-app next-cypress —typescript
cd next-cypress

今回使用するNext.jsのプロジェクトを作成します。

npm install cypress —save-dev
npx cypress open

そして、cypressをインストールして使ってみましょう。

先ほどのコマンドを実行することで、設定ファイルが作成されたかと思います。

それを次のように書き換えます。

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: "http://localhost:3000",
    viewportWidth: 1280,
    viewportHeight: 720,
  },
});

これで、テストの準備が整いました。

早速テストコードを作成しましょう。

describe("first test", () => {
  beforeEach(() => {
    cy.visit("/");
  });

  it("should be true", () => {
    cy.get("img").should("be.visible");
  });
});

問題なく、テストが動作したかと思います。

簡単に今回のテストを説明すると、vistでテストを試すページに遷移し、cy.getで要素を取得shouldで取得した要素のテストをしています。

このように、簡単にテストを導入できるのが、Cypressの強みの1つです。

覚えておくべきコマンド

先ほどの例で簡単な使い方は分かったかと思うのので、次に覚えておくべきコマンドを紹介します。

まず、Cypressのコマンドは大きく次の3つに分けられます。

  • query - 要素の取得
  • action - インタラクションな操作を与える
  • assertion - 要素の内容を評価する

なので、この3つに分けて紹介していきます。

query

表にまとめると次のようになります。

コマンド 意味
cy.get() DOM要素を選択します。セレクタはCSSと同じ形式を使用します。
cy.contains() 指定したテキストを含む要素を選択します。
cy.find() 指定したセレクタを持つ子要素を検索します。
cy.eq() マッチした要素の中から特定の位置（インデックス）の要素を取得します。
cy.first() マッチした要素の中から最初の要素を取得します。
cy.last() マッチした要素の中から最後の要素を取得します。
cy.filter() マッチした要素から指定したセレクタにマッチする要素をフィルタリングします。
cy.not() マッチした要素から指定したセレクタにマッチしない要素をフィルタリングします。
cy.within() 特定のDOM要素内部で検索を制限します。
cy.parent() 選択した要素の親要素を取得します。
cy.children() 選択した要素の子要素を取得します。
cy.siblings() 選択した要素の兄弟要素を取得します。

action

画面のクリックなどの、インタラクティブな操作も加えることができます。

主なaction関数は次の通りです。

コマンド 意味
chekc チェックボックスのチェック
clear input要素などの値をクリア
click 要素のクリック
dbclick ダブルクリック
rightclick 右クリック
scrollTo スクロール
select セレクトボックスなどの選択
type inut要素などの入力
blur フォーカスの解除
foucus フォーカス
hover ホバー
submit フォームのsubmit

assertion

assertionにはshouldとandがあります。

この2つはjestのtestとitのように全く同じ機能ですが、英語的に違和感をなくすように2つあります。

そしてこれは先ほどの例のように、should("be.visible”)と使います。

引数にできる主な値は次の通りです。

  • hove.length
  • have.class
  • have.value
  • have.test
  • include.text
  • be.visible
  • exist
  • be.checked
  • have.css
  • be.disabled

other

その他もいくつか覚えておくべきコマンドがあるので、紹介しておきます。

コマンド 意味
exec npmコマンドなどのシステムコマンドの実行
task nodeの実行
visit ページ遷移
request HTTPリクエスト
intercept requestコマンドのスタブ化
wait 指定した秒数分待機
getCookie クッキーの取得
setCookie クッキーのセット

他にも色々ありますが、一旦これらを覚えておけばOKです。

まとめ

今回はcypressについて、入門的な内容をまとめました。

ぜひこの機会に身につけましょう。

Discussion