Cypress(E2Eテストフレームワーク): 学習記録

はじめに

E2EテストフレームワークのCypressについて、その学習記録を残します。

モチベーション

最近業務の中で、Cypressによるテスト自動化に取り組み始めています。

以前から少し取り組んではいたのですが、フロントエンドの学習を始めてから、あらためてCypressの理解が進みました。

CypressはJavaScriptやTypeScriptで書くことができるので、フロントエンドの学習との相乗効果が出ていると実感します。

Cypressとは

www.cypress.io

先程記載したとおり、CypressはJavaScript(TypeScript)で書けます。

Cypressはテストの中でも、主にE2Eテストを自動化することになります。(APIテストとかもあります)

GUIもしっかりしていて、ブラウザベースのCypress上でスクリプトを実行できます。(もちろんヘッドレスでもできます)

動画を取ったりスクショをとったりもできるので、コードベース以外でも役に立ちます。

やったこと

公式ドキュメント

docs.cypress.io

Cypressでテストを書くときは、原則この公式ドキュメントを読んでいます。

アサーションだったりも細かくのっているので、便利です。

公式YouTubeチャンネル

www.youtube.com

公式のドキュメントはかなり広範なので、ドキュメントを読むのもいいと思いますが、公式のYouTubeチャンネルの動画がわかりやすいです。
また、発展的なことも動画にされているので、ちょくちょく見ています。

公式ラーニングコース

learn.cypress.io

公式でわかりやすいラーニングコースが提供されているので、それをやりました。

後述のReal World Appもここで出てきます。

Real World App

github.com

公式で提供されている、実際のアプリケーションを対象としたテスト用のリポジトリがあります。

Reactで作られたアプリをテストするのですが、カスタムコマンドだったり認証システム周りの話だったり、かなり実践的です。

公式Discordコミュニティ

www.cypress.io

私はまだあまり使いこなせてないですが、CypressのDiscordコミュニティがあります。

たまにQAのチャンネルを参考にしたりしています。

Cypress Version 10: Fundamentals(by Gleb Bahmutov)

www.blazemeter.com

Blazemeter Universityが提供しているコースです。動画による講義とテストによってすすめます。

講師のGleb BahmutovさんのブログやYoutubeの動画は、発展的ですがかなり実践的でためになります。

コードを書いていて詰まったときに、よく参考にしています。

glebbahmutov.com

www.youtube.com

Cypressを使ってみて

カスタムコマンド

カスタムコマンドは可読性をあげたり、冗長的なコードを単純化するのに非常に便利です。

ただ最初は、必要最低限の機能を使いこなすことから始めています。

慣れてきたら、自分のプロジェクトに合わせてある程度カスタマイズしていきたいと考えています。

一方難しいのは、あまりカスタムしすぎても良くないのかなあと思っています。

あまりカスタムしすぎると、かえって個々のスクリプトファイルが標準とズレすぎてしまう気がしています。

このあたりは、使い続けないとわからないところなのかもしれません。

docs.cypress.io

セレクターツール

Cypressには、Cypress.SelectorPlaygroundやCypress Studioといった機能があります。

docs.cypress.io

docs.cypress.io

また、便利なChrome拡張機能もあります。

chrome.google.com

これらは、公式で提供されているものです。

要素の取得だったり、アサーションだったりに便利で、手軽にテストを書くことができます。

もちろん実際にコードを書くときにはうまくいかないこともあるのですが、書き出しのとっかかりとしてはいいツールです。

使ってみた感じでは、idやclassなどでアサーションを行っていることが多い気がします。

安定したテストを行うということでは、ベストプラクティス上はidやclass、htmlのタグやテキストでアサーションするより、data-cyなどの属性をサイトに追加するほうが望ましいみたいです。

ただ実際には前者を使うことが多そうな気がします。

安定して動くスクリプトをかけるようになりたいです。

docs.cypress.io

これからやること

Advanced Cypress(by Filip Hric)

testautomationu.applitools.com

Test automation universityが提供しているコースです。

Youtubeの動画による講義があって、提供されているリポジトリを使いながら進めます。

TypeScriptの習得

JavaScriptでもいいのですが、TypeScriptでかけるようになりたいです。

typescript-jp.gitbook.io

www.typescriptlang.org

興味があること

このあたりのことは、通常のE2Eテストスクリプトの作成がこなれてきたら考えようと思います。

コンポーネントテスト

最近のJavaScriptフレームワーク(React.jsやAngular.jsなど)に合わせた、コンポーネントテストもあります。

より安定したテストを行うためにも、DOMベースで作るE2Eテストに慣れてきたら試してみたいです。

docs.cypress.io

CI/CDへの組み込み

テストの実行をCI/CDプロセスに組み込むこともできるので、ぜひ実装して使用頻度の高い自動テストを組み込みたいです。(少し背伸びしている感じはあります)

docs.cypress.io

Percyを使ったビジュアルテスト

CypressとビジュアルテストツールであるPercyを組み合わせることで、画面の外観やスタイルに関する変更を自動的に検出することができます。

とても魅力的ですが、基本的なCypressでのテスト自動化ができてからかなと思っています。

docs.percy.io

さいごに

インプットや学習上のアウトプットはもちろん、実際のスクリプトを地道に実装し続け、タスクを1つずつこなしていきたいです。
Cypressの扱いにこなれてきたら、色々プラスαの実装にもチャレンジしてみたいですね。(道のりは遠そう・・・。)
ちなみにCypressは英語の資料がほとんどなので、Google翻訳にいつも助けられています。