デザインからUIテストの自動化をやりたい

はじめに

どんな人が考えているかによっても、受け取り方が違うと思いますので、簡単に自己紹介をさせていただきます。
過去に、第三者検証での検証経験を経て、株式会社LITALICO（リタリコ）でQAエンジニアとして働いています。

そんな自分が思う自動化が出来たら嬉しいテストは、
「デザインからUIテストの自動化をやりたい」 です。タイトルそのままで申し訳ないです。

背景

開発未経験のQAエンジニアですが、切に思っていることがあります。
もっと楽したい…

決して仕事が嫌いなわけではなく、楽しく働かしていただいているのですが、
歳を取ってなのか、ただの性格なのかわからないですが、細かい部分の確認が苦手になってきました。
同じチームでは、1ピクセルずれているとか、色が少しだけ違うなどに気が付けるなど、スーパーな人達がいて度肝を抜かれている日々です。

マイナスなことを解消する為だけに自動化したいという不純な気持ちだけではなく、デザイナーさんが作成していただいた、とても素晴らしいデザインがあるのに、仕様としてだけ使うのは勿体ないと常々思っているのです。
デザインをそのまま実装後の期待結果に出来たら、みんながハッピーになれるのではないかと考えています。

• 一例ですが、モーダル部分のデザインと開発後の実際の画面です

過去の経験を振り返ってみる

ホワイトボックステストの自動化

当時のリーダーが作成したのものなのですが、システム内部のパラメーター確認を開発の方が作成する仕様書からテスト設計、テスト実行と自動化したものになります。結果、２人月作業を５人日に短縮するという大幅な工数の削減に成功しました。

テスト自動化スクリプトの自動作成

自動という言葉が繰り返し出てくるのでわかりずらいかもしれませんが、
ご存じかと思いますが、自動テストにはどのようにテストをするかが記載されている自動化ツール内での手順書（スクリプト）が必要になってきます。
このスクリプトを作成するのがテストエンジニアだとハードルが高く、今ではノーコードでの自動化ツールが出てきていると思っています。ただ、テストエンジニアはテスト設計は得意分野です。
当時のテスト仕様書にしっかりと手順を記載してくれていたので、そのまま何とか自動化に出来たら楽だなということでやってみました。
少し強引ではありましたが、ExcelのVBAや関数を使って、手順に沿った自動化のスクリプトを作成することによって、テスト仕様書から自動化スクリプトの作成→自動化ツールで取込で、自動化を達成していました。ただ、あくまでUIの確認ではなく、機能の確認を行っていました。

こんな感じですね

その他にもこんなことはやってました

• 動作、UI崩れなどを確認するリグレッションテスト
• テストデータ作成
• テスト観点から、テストパターの作成
• テストパターンから、テストケースの作成

気が付いたこと

テスト自動化を含め、テストケースの作成補助的なものなども行ってきましたが、UI確認の自動化は、あくまで実装後のリグレッションテストでの自動化しか行った経験がありません。
経験あるといっても、テストの自動化に関しての若輩者なので知らないだけかもしれないですが、テストの自動化は主にリグレッションテストを行うことが多く、新規開発での自動化では仕様変更されるリスクや、自動化を実装する工数を考えると、あまり向かない認識でいます。

繰り返しにはなりますが、デザイン段階で素晴らしい仕様が出来ているんです。
デザインからの自動テスト化が実現できれば、仕様書の新しい使い方もそうですが、新規開発時に自動でテストを流せるので、テスト工数の大きな削減も可能になるかと思っています。

まとめ

デザインからUIテストの自動化が行えれば、効果は絶大になることが改めて理解できたのですが、そもそもどうやるかが問題です。
また、自動化だけではなくテスト設計に対しても自動で展開できるような形にできれば、同じく効果は絶大かと思いました。

LITALICOでは、要求→テスト仕様書までを効率的作る為の取組みも行っています。
これはデザインだけに限らず、機能テストの自動化も実現可能かと考えています。
目指している 「QAのいらない世界へ向けて」 に一歩近づけるかと思います。
※こちらの記事も興味あれば是非読んでいただけたら幸いです

最後に

最後まで読んでいただきありがとうございます。
よくよく考えたら、テストではなくそのままUIの実装まで出来たらいいのでは？と思ってしまいましたが、
開発未経験なので、難易度なども考えずに無邪気に考えているだけなのでお気になさらずに…