Web版『NAVITIME』のテスト自動化で安心・安全なリリースを実現したお話
こんにちは、Yuki22です。ナビタイムジャパンでWeb版『NAVITIME』のQAを担当しています。
私からはWeb版『NAVITIME』向けに実施している自動テストについて紹介します。
Web版『NAVITIME』とは
PC/スマートフォン向けに提供しているWebサービスです。
乗換検索
ルート検索
地点検索
など、様々な機能を提供していて、かつ非常に多くの方が利用するサービスです。
開発したきっかけ
最初にご紹介した通り、本サービスは機能が多岐に渡り、なにか手を入れたときの影響範囲が分かりづらいことも少なくありません。
また、担当プロジェクト以外のメンバーが触るケースも多く、リリース直前にデグレが発覚することもあります。
意図しない不具合検知を開発・検証期間中に人の手で見るには限界があるため、自動テストで見きれない部分をカバーできないか、を考えました。
テスト内容の紹介
「Selenium」を使って以下のテストを実施するようにしました。
UIテスト
canonicalタグ、Titleタグをチェックするテスト
スクリプトエラーを検知するテスト
UIテスト
以下の機能に対してSelemiunを使ってUIテストを実施しています。
乗換検索や地点検索などのメイン機能
例えば以下のようなことをテストしています。乗換検索ページのトップ画面から出発・目的地をセットし、検索結果が表示されることを確認するテスト
アフィリエイトなど外部サイトと連携する機能
グルメ系の店舗詳細ページ内のクーポン表示バナーをクリックして、外部サイトへの遷移、およびURLパラメーターが正しいかを確認するテスト
canonicalタグ、Titleタグをチェックするテスト
Googleなどの検索エンジンからの流入が非常に重要なため、SEOで重要なcanoninalタグ、Titleタグが正しく指定されているかをチェックしています。
テスト対象のURL、期待値はGoogleスプレッドシートで管理し、API経由でテスト対象URLを呼び出してチェックしています。
スクリプトエラーを検知するテスト
ブラウザのコンソールログに出力されたスクリプトエラーを検知するテストです。画像のリンク切れやページ内のバナー広告が表示されない不具合を検知します。
テスト対象のURL、期待値はGoogleスプレッドシートで管理し、API経由でテスト対象URLを呼び出してチェックしています。
チェック結果はスプレッドシートに出力しています。
テスト実施方法
以下のようにJenkinsを使った定期実行と、slack経由で任意のタイミング/任意の環境で実行できるようにしています。
毎日リリース対象ブランチに対してテストを実施
slackからbotを介して指定した開発環境に対して直接テスト実施
実装時に困ったこと
テスト実行対象の環境を動的に変えることができなかった
開発用環境とリリース前の動作確認用環境があるが、テスト対象環境のドメインをソースコードに持っていたため、1つの環境でしかテストを実施できなかった。テスト対象ページの管理が面倒だった
テスト対象が膨大なため、テストコードにURLを持たせるのはメンテナンスする上で非現実的だった。
困ったことをどう解決したのか
テスト実行対象の環境を動的に変えることができなかった
Jenkinsからテスト対象環境を指定できるようにした。
Hubotを使いslack経由でテスト実行環境を指定してJenkinsジョブを実行できるようにした。
テスト対象ページの管理が面倒だった
Googleスプレッドシートでテスト対象URLを管理し、テストコードからAPI連携して利用できるようにした。
導入した効果
テストを導入してから数年経ちますが下記2つの効果があり、非常に役立っていると考えています。
リリース前に意図しない不具合を検知できるようになった
「テストでの不具合検知⇒修正」のサイクルを繰り返すことにより、開発者のノウハウが溜まるようになった。
⇒開発フェーズで事前に不具合を潰すことができるようになった。
最後に
テストの自動化にはテストコードのメンテナンスやテスト結果の確認にそれなりの工数がかかり、万能ではありません。
また、コードの書き方やテストのタイミングによってテストが失敗することが時々あります。
自動化そのものを目的にすると効果が出づらいケースもあるので、手動テスト・自動テストをうまく使い分けてプロダクトの品質を保っていきたいと考えています。
出典
slackロゴ
Salesforce Collective: Collection Preview
https://salesforce.widencollective.com/c/xt57vnlfJenkinsロゴ
Jenkins Artwork
https://www.jenkins.io/artwork/