本セッションの登壇者
セッション動画
こんばんは。1週間前にJaSSTという大きなカンファレンスで、今日と同じメンバーでテスト自動化や未来を語ろうみたいな話をして、1週間後に2回戦というか延長戦という感じのイベントがこのTechFeedで開催されることになって非常に嬉しいです。今日は、JaSSTのときにも近い話をした気がしますが、「見落とされがちなアクセシビリティ、mablで解決しよう!」というタイトルで、20分ほどお時間を頂戴してお話しさせていただこうと思っております。
まず最初に私の自己紹介ですが、odashoと申します。本名は小田祥平です。書いてあるとおりの経歴で、昨年の10月にmablにジョインしました。ふだんからコミュニティで活動していて、先週、先ほどお話したJaSSTが2日間あって、運営してるDevRelのグローバルカンファレンスが2日あり、1日バッティングしてかなり慌てた感じでした。あと、私はTechFeedのDevRelのエキスパートでもあります。もし、今日のお話を聞いていただいた方で、odashoをフォローしてやってもいいよという方は、ソーシャルなどもやっておりますので、ぜひぜひフォローしていただければと思います。
今日は20分しか時間がないのにスライドが30枚ぐらいあって、かつデモも2つやるのでちょっと巻きでいこうかと思います。
mablとは
まずは「What’s mabl?」についてです。
先ほどは「マーブル」と呼ばれて「まんまと罠にはまったなw」という感じなのですが、正しくは「めいぶる」です。覚えてくださいね。
mablという会社はIzzyとDanという2人が創業者で、2017年に米ボストンで創業しています。グローバルの従業員数は現在ちょうど110人ぐらいです。まさに今、伸びに伸びていて、2021年の売り上げが前年比300%です。スタートアップ企業で、シリーズCとなっております。一昨年の2021年8月に日本法人が設立されました。
そんな我々のミッションですけども、ご覧のとおり「世界中のソフトウェア品質を変革すること」です。
現在、アクティブユーザー数はボストンの会社なので当然ながら米国が50%弱と多いのですが、こちらをご覧いただくとわかるとおり、日本が21％とかなり伸びてきております。国内のユーザー様がすごい勢いで増えている会社となっております。
そんなmablは「どんなことできるの？」というお話なのですが、こちらに全部で6つ書かせていただいております。
- ノーコード/ローコードのテスト自動化ツール … UIテストやAPIテストができます。
- 単一のプラットフォーム … mablというクライアント、もしくはブラウザで動かすのですが、単一のプラットフォームでサービスを提供しております。その単一プラットフォーム上でE2EテストやAPIテスト、さらに後で詳しくご紹介するアクセシビリティのテストなどもできます。
- データ/インサイト提供 … QAエンジニアなどの利用者の皆様にテストの結果をインサイトとして提供します。
- 顧客体験をテスト … eメールやPDFを作るのを含んだ実態に即したE2Eができます。
- テストメンテナンス削減 … レイアウトがガラッと変わったりすることがありますが、その都度テストコードの書き直しみたいな作業が発生します。人によっては手動でテストされてる方もまだまだ多いのではと思うのですが、そういったものを「オートヒーリング」という機能で自動で修復します。
- 開発パイプライン … CI/CDパイプラインにきちんと製品を統合することを目的として、製品ロードマップをひいています。
mablがめざす「品質エンジニアリング」ジャーニー
我々はとくにここを強調しているのですが、エンタープライズ対応のセキュリティに強みがあります。たとえばmabl Linkです。図を見ていただくとわかるように、トンネリングができます。「本番環境以外もテストしたい、ただしインターネットに接続していない」環境でもきちんとテストできるようになっています。また、あまり聞き馴染みがないかもしれませんが、SOC II Type 2というエンタープライズグレードの認証を取得しています。詳しくはクラスメソッドさんの記事を参照してください。当然GDPRにも対応しています。
では、そんなmablをどこで使うのかというと、このピラミッドにあるように、UIテストや結合テストで主に使用するSaaSのプロダクトとなっております。
先ほど「CI/CDパイプラインなどを強く意識してます」と言いましたが、CI/CDのさまざまなツールとインテグレーションを簡単に取ることができます。このインテグレーションできるソリューションの多さもmablのひとつの特徴になってるかなと思います。昔からあるJenkinsやAzure DevOps、さらにGitHub actionsの自動デプロイ/自動テストを通して作ったり、Atlassianのチケット管理のJiraを使ってみたり、レポートをご覧になりたい方はGoogle BigQueryなどで見ることができるようになってます。
そんなmablですが、最近は品質保証、よく「QA」と言われていますが、我々はQE、つまり「品質エンジニアリング」を会社として正式に謳っています。
まず一番下の「開発後に手動でテスト」について、私のファーストキャリアはSIerだったのですが、大粒の涙を流しながらExcelにキャプチャを貼っては枠で囲って、「次はこの画面です、矢印」みたいな感じで一生懸命、証跡を残していた時代がありました。もう思い出すだけで本当に辛かったなと思いますが、未だそういうテストをされている方もいるかと思います。なので、手動テストの改善から「徐々にQEを成熟させていきましょう」と訴えています。
次に「機能テスト自動化」です。これは文字通り、「テスト自動化でカバレッジを拡大していきましょう」というものです。その次が「シフトレフト」で「早い段階でテストが回せるようにしましょう」、そしてその次が「非機能的品質の検証」です。まさにこの後にお話しするアクセシビリティが該当するかと思います。そういったテストを自動で回していくと、いろいろデータが溜まっていくので、それらを活用して最終的に「品質指標を使用した継続的な改善をしていきましょう」といったジャーニーとなります。
操作を記録、テストを生成、実行はローカルでもクラウドでも
私が口頭だけで説明してもよくわからないかと思いますので、デモをひとつお見せしたいと思います。
これはログイン後のmablの画面です。
ではさっそく1つテストを作ってみましょう。ブラウザテストやAPIテストと書いてありますが、これを押すと実際にテストを作れます。今日はTechFeedさんのイベントなので、「TechFeedデモ」と名前を付けて、説明が必要な場合は入れてください。ラベルなども選択できて、デスクトップ/モバイルWebが選べます。
今回は簡単なテストを見せるだけなので「プランなし」で、弊社はsandbox.mabl.comという誰でも見られるサンドボックスのサイトを用意しています。デモをするときはよくこのURLを使っています。
名前を入れて、プランなしを選択して、アプリケーションを選択し、3か所の設定をして「作成」というボタンを押します。
これでブラウザが立ち上がります。右側に「mablトレーナ」というものができています。今はもうRECがオンになっている状態で、皆さんから見て左側がサンドボックスのサイトになっています。たとえばこのsimulated loginをやってみます。
そうすると、「eメールとパスワードを入力してください」といったよくあるログイン画面で、ボタンを操作したら右側のmablトレーナーがすこし動きます。ログインボタンを押すと、「今、simulated loginのボタンを押しましたよ」という操作を記録してくれています。ここでeメールの欄に私のアドレスを入れてみます。
次にパスワードを入力してみます。パスワードが間違っていたり入力していない場合だと、だいたい画面上に「password required」などの画面が出てきます。このような異常系のテストを行いたい場合は、アサートというボタンを選択後に、要素を選択すると文字が小さいですけど、「アサーションの種類」と「属性プロパティ」と出てきます。アサーションの種類はequal、要は「書いてある文字列が一致する」、属性プロパティはinnertext、要は「password required」に期待する値です。
ここで「OK」を押すとこうした異常系のテストも挟み込めます。次に、パスワードを入れてログイン、そしてログアウトまでしておきます。その一連の操作が記録されるわけです。ここで「保存」を押します。
ここまで来たら、いろいろ実行の方法はありますが、ローカル実行はログを吐き出すだけで、クラウド実行はさまざまなブラウザから実行でき、ログだけでなくキャプチャ取得やDOMのスナップショットなど多くの情報を自動取得できます。今回はWindowsからChromeを使っているのですが、MacならSafariも選択できますし、FirefoxやEdgeも使えます。
ではさっそくクラウド実行してみましょう。先ほどのmablのクライアント上でもテストすることができます。
今、ログを吐き出しています。どういう操作をしたか、履歴を出してくれます。ログのスナップショットやキャプチャを自動で取ってくれています。最高ですよね！
こんな感じでバシバシ走っているわけですが…テストランが無事に全部終了したみたいです。スクリーンショットも見ることができますし、ログもきちんと吐き出してくれます。このように簡単にテストすることができます。
アクセシビリティテストにも対応、アクションにつなげる
次にアクセシビリティの話をします。その理由として、スライドの下部の色が付いてるとこを見ると、今、USではアクセシビリティ関連の訴訟件数が年々上がっています。2019年には2,900件、2022年には4,000件も起こっているそうです。なのでアクセシビリティを意識しない開発をすると、USほど訴訟大国ではなくとも、多くのリスクを抱えてしまうことになります。おそらく日本にも5年10年遅れてそういった流れが来るので、今のうちからちゃんと対策しておきましょう、という話です。
このスライドでさらっとWCAGと出していますが、実際にガイドラインとして制定されています。USはもちろん採用していますが、よくよく見ると極東の島国日本も赤くなっています。日本工業規格(JIS)もWCAG 2.0とまったく同じものを採用しています。
さて、「そもそもWCAGって何?」についてですが、正式名称は「Web Content Accessibility Guidelines」で、皆さんもご存知のW3Cが定めている規格のひとつです。堅牢であること、知覚可能であること、操作可能であること、理解可能であること - この4つを前提として、シングルAからトリプルAまで、規格が定められています。
このWCAGについても、きちんとテストしたいという方は多いと思います(訴訟されたくないですしね)。でも人間の目でアクセシビリティに適合しているかどうかは確認できません。それこそ現場で「なんかよく見えるからヨシ!」となりがちです。これを「ちゃんと自動化しましょう、ツールを使ってきちんとテストしましょう」というのが今回の趣旨です。
こちらは先ほどご覧いただいたmablトレーナの画面で、英語で書かかれていますが、もちろん日本語対応もしています。mablトレーナの一番上から、ページや要素単位でアクセシビリティテストができるようになっています。
違反が出たらアラートを上げてくれます。冒頭で「mablはレポートとインサイトを提供しています」と説明しましたが、まさにこういったグラフなどでご覧いただけるようになっています。
ではデモに行きましょう。
もう一度テスト作成をします。先ほどと同じように、アプリケーションを選択し、サンドボックスで作成します。
画面をちょっと大きくしましょう。アクセシビリティのボタンを押していきます。
もう記録される状態になっていて、皆さんから見て左側の青文字の箇所がすべて何かしらのアクセシビリティ違反に該当しています。今回は時間がないのでひとつだけ説明します。左側3行目に小さな文字でcolor contrast rate of …と書いてあります。
ぱっと見大丈夫そうですが、背景を白から黒に反転させてみるとだいぶ怪しいことがわかります。ちなみにmablトレーナで反転を記録してくれています。
ではアクセシビリティをチェックしていきましょう。アクセシビリティのチェックはmablトレーナの「ステップの挿入」で中央にある「アクセシビリティチェック」を押すと、「ページ」全体か「要素」かを選べるようになっていますので、今回は「要素」を選択して、怪しい部分を選択してから「OK」ボタンを押します。
では、画面を戻して、ここでレコーディングを止めます。「保存」を押します。これもクラウド実行していきましょう。先ほどと同じようにクラウド実行が裏側で走ります。正常系/異常系をテストするのと同じように、アクセシビリティテストが可能になっているところです。こんな感じでログを吐き出してくれております。操作をちゃんと記録してくれています…出ました。「アクセシビリティ違反」と表示されています。
さっそく見てみましょう。「Elements must have sufficient color contrast」と、ちゃんと怒ってくれています、ありがたいです。あと「WCAG2.0」と書いてあります。内容を読んでいくと、やはりカラーのバックグラウンド/フォアグラウンド、あとはピクセルについても怒られています。
このように教えてくれるわけですが、実はいま、私はマウスクリックだけで操作しました。こういったいわゆる「ボタンぽちぽち系」で簡単にチェックできるようになっていますので、もしご興味あればさっそく試していただければと思います。
mablのロードマップ
今後のロードマップです。ご覧いただいているとおりですが、確実なお約束ではないことをご承知おきください。
製品戦略としては「テストカバレッジ90%向上していきます」「バグを40%削減していきます」「テスト作成スピード300%アップしていきます」と、すごく大きな数字を掲げております。
とくに投資するのがネイティブモバイルテストとパフォーマンステスト、いわゆる負荷テストの機能が2023年ごろに登場する予定となっています。パフォーマンステストに関してはかなり早い時期に出てくるのでは、と思っています。
ロードマップの概要はこんな感じでまとめています。
機能改善をしていくにあたって皆さんのご意見を常に募集しております。ロードテスティングやネイティブモバイルテスティングなどがここには書かれていますが、このQRコードからフィードバックのサイトに行くので、そこで実装してほしい機能をクリックするとボストンの開発メンバーに飛ぶようになっていますので、ぜひ皆さん、投票をお願いします。
以上になります。ありがとうございました。
、先日開催された #TechFeed_Experts_Night の書き起こし記事が公開されました(´Д` )♪ 是非動画と併せてご覧ください！！
#mabl #mablJapan