https://uga-box.hatenablog.com/entry/2020/08/01/000000

機能拡張を盛んに行った結果、予期せぬ不具合が頻発するようになった

事象分析したところ特定のUIパーツが表示されなくなってしまうバグが多かったため、リリース前にE2Eのリグレッションテストを実施することにした

Cypressの導入

E2EをするにあたってCypressというテストツールを導入する

Cypressで主要ページ数件のスナップショットを取得し、それを目視で確認することにする
※表示されていないことを確認したいUIパーツは大きなコンテンツなため、目視でも問題ないと判断した

変更前後の差分を検出するビジュアルリグレッションテストも検討したが、準備に時間がかかりそうだっため今回は行わないことにした

また、Cypressについては以前に調査したことがあり、ブラウザはChromeにしか対応していないが、発生していたバグはどのブラウザでも発生していたので問題ない

cypressをnpmでインストール

$ npm install cypress --save-dev

package.jsonに２つのscriptsを追加する

...
  "scripts": {
    ...
    "cy:open": "cypress open",
    "cy:run": "cypress run",
  }
...

とりあえず、npm run cy:openするとCypressのダッシュボードが開き、テストファイルがプロジェクト内に展開される

次に、cypress.jsonにスクリーンショットを取得するページのURLをbaseURLに設定する
※cypress.jsonは上のcy:openをしたときに自動で作成されている

{
  "baseUrl": "https://my-app.com/",
}

そして、cypress/integrationに適当なファイル(sample.spec.js)を作成し、テストを書く
※cypress/integrationディレクトリも上のcy:openをしたときに自動で作成されている

sample.spec.js

describe("スクリーンショットサンプル", () => {
  it("トップページ", () => {
    cy.visit("/");
    cy.screenshot({
      capture: "fullPage"
    });
  });
});

Cypress.screenshot()には引数にオプションを渡すことができて、フルページキャプチャが欲しかったので、capture: "fullPage"を指定した

最後に、npm run cy:runを実行するとcypress/screenshots配下にスナップショットが保存されている