アプリケーションの自動テストの手始めとして、導入が簡単と言われているCypressを導入してみようと思います。

なぜ導入を検討したのか

自社開発にてテスト設計を行った際、膨大なテストケース数となってしまい手動テストを実施する工数が確保できなかったこと、保守や機能追加、改善を行う中でいずれはテストの自動化を行う必要がある為
このタイミングで自動化を導入することにしました。

Cypressをインストールする

今回はnpmを使用してinstallを実行する

・アプリケーション配下にて下記コマンドを実行

$ npm install cypress --save-dev

・今回、言語はJavaScriptを使用するためnode.jsがinstallされているか確認する

$ node -v

　　※node.jsがinstallされていない場合はこちらからinstallを実行する

Cypressの初期設定を行う

・下記コマンドを実行する

$ npx cypress open

・下記画面が表示されるので、 左下の「Continue >」をクリックする

・今回は、「E2E Testing」を選択する

・各種設定ファイルの説明がされているが、とりあえず「Continue」をクリックする

・テストを実行するブラウザを選択、今回は「Chome」を選択し「Start E2E Testing in Chome」をクリックする

・テスト用のブラウザが表示されるので、「Create new spec」をクリックする

サンプルテストの実行

・「Create spec」をクリックする

・「Okay,run the spec」をクリックする

上記内容のテストが実行され、template spec の passes というテストケース結果が緑チェック(成功)となったようです。

サンプルテストの内容を確認してみる

作成したテストはcypressをinstallしたプロジェクトの配下cypress/e2eに格納される

describe('template spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})

describeの内容が大項目、itの内容が小項目となるので、この記述ではtemplate specが大項目、passesが小項目に該当するようです。
cy.visit(”)はcypressコマンドで遷移を行うときに使用する、https://example.cypress.ioへの遷移に成功した為こちらのテストは成功したと言えます。

失敗したケースも確認してみる
テストが失敗した場合も確認したいと思います。

describe('template spec', () => {
  it('passes', () => {
    cy.visit('testtesttest')
  })
})

遷移するURLを形式が相違している文字列に変更しました、こちらのテストを実施してみます。

期待通り結果が赤バツ(失敗)となっていますね、失敗内容もTEST BODYから確認できるようです。

https://docs.cypress.io/guides/getting-started/installing-cypress