フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【Angular】Cypressスクリーンショットの差分でデグレしてないことを確認する

スポンサーリンク

スポンサーリンク

 

開発の過程で画面表示に差分が出てもCypressのcypress-image-snapshotを使えば、e2eテストで差分を検知し教えてくれるので、画面表示のデグレを心配せずにガンガン開発することができます!!

 

 

cypress-image-snapshot

github.com

 

最初に説明した通り、画面の差分を教えてくれます。

仕組みとしてはe2eテストの時に画面のスナップショットを取得し、前回のスナップショットとの差分を確認、差分があればエラーとなります。

 

※もし、プロジェクトにCypressを導入してない場合は、下記記事を参考に導入してください。

www.ksakae1216.com

 

インストール

githubのページ通りにcypress-image-snapshotをインストールします。

gist15be16e8b9891d0748a5d1f68446dd12

 

準備

次は準備です。

 

GitHub - palmerhq/cypress-image-snapshot: Catch visual regressions in Cypress

このページを参考に<rootDir>/cypress/plugins/index.jsと<rootDir>/cypress/support/commands.jsを修正してください。

 

さらに、<rootDir>/cypress/support/index.tsも下記のように修正してください。

gist972283a0bddc12c514593fa2100e113b

 

これでcypress-image-snapshotを使うことができます。非常に簡単ですね!

 

実装

次はスクリーンショットをとる実装をしていきます!!

今回はページオブジェクトパターンでテストを書いていきます。

 

[login.po.ts]

ログインページをテストするのに必要な定数、部品を定義します。

gistb39b9c73a945105046743493b4e7646a

 

[login-spec.ts]

実際にログインページのテストです。

gistfd35b0450779c73a34d3f6f1951e30f4

 

今回は必要な箇所だけ説明ます。

11行目が大切で、ここで画面のスクリーンショットを取得しています。

取得したスクリーンショットが前回と異なる場合、ここでエラーが発生します。

 

動作確認

それでは実際にやってみましょう。

動画では、最初にテストが成功し、次に、意図的にHTMLを修正してテストを失敗させました。

(ログイン画面のplaceholderを"login id"から"login id!!!!"に変更)


cypress diff

 

ちなみに画面のスクリーンショットは、 <rootDir>/cypress/screenshotsディレクトリ配下に出力されます。

もし意図的に画面を変更した場合はここのファイルを削除すればエラーになりません。

 

参考までにテスト含めたソースはこちら

GitHub - ksakae1216/my-app5: angular study repo

 

最後に

 e2eテストで画面の差分を確認することができれば、デグレすることなく安心して開発できますね!!