Zenn
🌲

Cypressを使ってみる

2022/12/23に公開
Test
Cypress
QA
tech

Cypressとは？

  • モダンなWebサービスのために作られた次世代のフロントエンドテストツールです。
  • JavaScriptで構成されています。
  • オープンソースとなっており、基本的に無料で利用可能となっています。

Cypressでできること

  • End-to-end(E2E)テスト
  • Componentテスト
  • APIテスト
  • Webページの自動操作によるデータ作成

※今自分はQAエンジニアで、E2Eテストを主に取り扱うことが多いので、記事の内容はE2Eテストに関係することがメインとなります

セットアップ

  • 以下を前提としています。
    • MacOS
    • zsh
  • インストール済の可能性があるものは、共に記載あるwhichコマンド等で存在確認をしてみてください。

インストール

  1. Homebrew
    a. インストール

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    b. 確認

    which brew

  2. nodenv
    a. インストール

    brew install nodenv node-build

    b. 確認

    nodenv versions

    c. 設定

    echo 'eval "$(nodenv init -)"' >> ~/.zshrc

    d. 適用

    source ~/.zshrc

  3. Node.jsインストール
    a. installできるものを確認

    nodenv install -l

    b. プロジェクトでバージョンの指定等がない場合は、最新をinstall

    nodenv install 18.3.0

    c. 一旦globalで設定

    nodenv global 18.3.0
nodenv rehash

    d. 確認

    node -v
npm -v
npx -v

  4. Cypress
    a. 任意の作業ディレクトリを作成し、移動（以下は例）

    cd ~ && mkdir tmp && cd tmp

    b. インストール

    npm install cypress --save-dev

    c. 起動

    npx cypress open

    d. 確認
    　1.専用ブラウザが開くので表示に沿って進んでいく

    　2. ここでは一旦E2ETesting

    　3. Continue

    　4. Chromeを選択してStart E2E Testing in Chrome

    　5. とりあえず動くのを確認したいのでScaffold example specs

    　6. Okay, I got it!

    　7. 1-getting-started/todo.cy.jsとかをクリック

    　8. 動けばOK!

    　9. 開かれたブラウザを閉じる（そうするとターミナル側も停止する）
    e. 確認できたらaで作成したディレクトリを削除

    cd .. && rm -rf tmp

動かしたいページでとりあえず動かす

  • こういったテストツールではよくレコーディング機能が備わっていることがありますが、Cypressの標準機能としては提供されていません。
  • ここではCypress RecorderというChrome拡張を紹介します。

インストール

  1. ページアクセス： Cypress Recorder
  2. Chromeに追加ボタン押下
  3. Chromeのメニューで起動できればOK

確認

  1. Start Recordingボタンを押下すると、レコーディングが開始
  2. Stop Recordingボタンを押下すると、レコーディングが停止
  3. Copy to Clipboardボタンを押下
  4. テキトーなプロジェクトでコピペして動かしてみる
describe("empty spec", () => {
  it("passes", () => {
    cy.visit("https://www.google.com/");
    cy.get(".gLFyf").type("じゃがりこ");
    cy.get("form > div:nth-child(1)").click();
  });
});

使いどころ

  • 使ってみて分かることですが、レコーディング機能で取得できる要素（ボタンやテキストフィールドなど）のidだと、テストコード上だと視認性が悪いです。とりあえず動かしたい、テスト専用のidが振られてなくて雑に取得したい場合などには使えますが、保守性が悪いテストコードになりかねないので、実際に運用していこう！となったら使うのは避けた方が良さそうです。
  • 読みやすいテストコードの書き方についてはまた別の記事で触れられたらなと考えております。

参考資料

Discussion