🙆

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

2023/06/02に公開

React

今回は、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について、入門的な内容をまとめました。

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

宣伝

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。

インスタの発信も細々とやっています。

興味がある方は、ぜひリンクをクリックして確認してみてください！