ダークモードのテストをmiroでビジュアル化したら"こうかばつぐん"だった
こんにちは、kubopです。
2022年11月に、noteではAndroid端末でダークモード対応をしました。
Androidダークモード対応に際し、QAチームとAndroidチームが協力してQA会(お触り会)を行いました。
ビジュアルを対象にしたテストでは、文章や表では表現が難しいなと感じていたため、今回はmiroを使ってビジュアルリグレッションテストを行いました。
実際に取り組んでみると単純比較で気が付かない不具合が発見できたり、デザイナーもQAに参加しやすくなったりとメリットが多くありました
QA会(お触り会)
noteのQA会は、いわゆるお触り会なのですが、モンキーテストでは無く、
事前に仕様を調査しておき、ハイレベルテストケースを作成した上で打鍵していく会のことです。
抽象的なストーリーと、観点(境界値など)を洗い出し、テストデータを事前に用意した上でQA会は行われます。
noteでは仕様書といったカッチリとしたものは存在しないので、QAがコードを追ったり、実際に動かしてみて仕様調査をします。
ダークモード対応のQA会の課題
影響範囲が広すぎる
ダークモード対応のQAは、ただ単にテストケースを書くだけでは確認することが出来ません。
というのも、noteの機能全域がダークモード対応の対象となるため、一部機能を確認するだけでは狭すぎてしまい、全機能を確認するには広すぎるからです。
ビジュアルの不具合を指摘できない
スプレッドシートやDocsでは、ビジュアルの確認をする際にどこに不備があったかが表現することが難しく、「セルに貼り付けて欲しい、詳細を書いて欲しい」などといった、QA側からの要求が多く、打鍵者の混乱を招く可能性があると考えていました。
QA会には時間に限りがある
QA会は、QAチームとその他のチームが合同で協力しながら行います。
30-60分程度の時間で、テストデータの作成〜やり方の説明〜不具合探しをしていてちんたらしていては時間が足らないばかりか、他チームに多大な迷惑をお掛けしてしまう可能性があります。
ダークモード対応のQA会でやったこと
miroを使ってみた
実際にビジュアルで確認しながら、一つ一つ不具合となる要素を漏らさないようにするには、
簡単に
直感的に利用でき
一覧性があり
証跡が残る
ものが良いと考えていました。
スプレッドシートではセルに貼るしかなく、直感的ではありませんし、
Docsも縦に伸びてしまうため一覧性がありませんし、何より複数人で同時に確認出来ません。
そこで元々noteで使われてはいますが、テストケースにmiroというホワイトボードツールを用いることにしました。
テストデータを事前に作成した
事前にライトモードで、主要となる機能を洗い出しAndroid端末を使い全てスクリーンショットを貼り、箱を作成しました。
画面の状態遷移を確認出来るよう、タイムラインで左から右に遷移するように表現しています。
テストデータについては、事前に準備が必要なものに関してはユーザーを作成した後に、作成していました。
URLベースで一覧化させており、そのURLを開くだけでテストできるような状況を作っていました。
ダークモード対応した検証環境で打鍵
実際に、ライトモードの画面と同じ挙動を再現させ、1人1人にスクリーンショットを撮って頂き、miroに貼り付けて比較できるようにしていました。
上部のライトモードに呼応するよう、直下にダークモードのスクリーンショットを貼ってもらいます。
やってよかったこと
miroを使ったことによってシームレスにQA会が出来た
使い慣れているmiroというツールと、QA会を掛け合わせることで
大人数での打鍵会にも関わらず、長い説明から打鍵、というよりはスタートしてからすぐ打鍵が開始できる状況になりました。
不具合がビジュアルで直感的に開発者に伝わる
「ここの部分、なんかズレてる気がするな〜」
といった時にスクリーンショットを貼り、ライトモードと即時比較できるようになっていることで、リグレッションなのか、既存バグなのかがわかりやすく伝わるようになりました。
ブラッシュアップ率が異常
miroを用いたビジュアルリグレッションテストは効果が絶大で、ローコストで実現出来たにも関わらずかなり効果があったようでした。
具体的には、単純比較では絶妙に気がつけなかった不具合が見つかったり…
また、デザイナーの方に参加して頂いていたのでその視点も相まってかなり良い結果になりました。
まとめ
いつもスプレッドシートでユースケースの網羅をしていたりしていたのですが、今回は思い切ってmiroを使ってテストを行う、ということをしました。
一覧性があり、かつ事前にちゃんと準備しておけば網羅性も申し分なく、
欲を言えば、後から見返した時にちょっとごちゃごちゃしてるかな〜くらいの問題くらいしかありませんでした。
スプレッドシートを用いたテストケースも、普段は良いのですが、場合によってはmiroもアリかなと思えるトライでした！良かった！
この記事が気に入ったらサポートをしてみませんか？