QA

テスト・検証について

short url: http://urls.jp/gemqa

Web Platform Test

ビルドした Gecko の QA テストは Mozilla が実行しているテスト を参考にする。Renesas RZ/G シリーズではサブセットとして W3C がホストしているテストケース集 WPT (Web Platform Test) を実行している。

WPT は W3C の WPT リポジトリに各ブラウザベンダーなどが Contribute する形でメンテされているテストスイートだが、 Gecko のソースには各バージョン毎に その時点の WPT が含まれている のでそちらを使うのでもよい (日々テストセットが変わるのが嫌なら Gecko ソースのものを使う)。

WPT には主に TestHarness.js test と RefTest のテストがあり (他にも Visual Test と Manual Testがある)、それぞれ詳しくは以下のページを参照。

• TestHarness.js test
• Reftest
  • TEST THE WEB FORWARD HOW TO WRITE A REFTEST - japanese ver.

手動で単発実行するのであれば http://w3c-test.org/ 配下のファイルを開けばよい

Demos

Gecko Embedded 向けに書かれている比較的シンプル・軽量な HTML コンテンツサンプル

• ⭐️ GEM - Tanzanite
  • repo: https://github.com/gem-tanzanite
• ⭐️ GEM - DOMBench
  • repo: https://github.com/webdino/GEM-DOMBench
  • 低性能・低解像度環境向けパラメータでのビルド例: https://dombench-iwg22m.netlify.com/

Test

WPT を実行するのは時間が掛かるので、極めて簡易的・部分的なものではあるが、やらないよりはマシというレベルで。

• ⭐️ HTML 5 TEST
  • 比較用ページ にて PC の Firefox と比べ、サポートしているべき項目がエラーになっていないか、前回のテストと結果が異ならないか確認する (但しテストセット自体が不定期に更新されるので注意)
  • 結果の保存は点数の左下に表示される Save results ボタンで結果 URL が QR コード付きで表示されるのでそれをメモする

サンプルコンテンツ

一般的なウェブサイト、フレームワーク利用り例での表示確認以外に、GPU やハードウェアに依存する実装部分については個別のテストページでの挙動を目視で確認するためのサンプルページ集です。

• CSS Transform/Animations
  • ⭐️ Flux Slider http://www.joelambert.co.uk/flux/
    • 2D Transitions, 3D Transitions の各ボタンを押して画像の切替が滑らかに行われるか確認する
  • ⭐️ Original Hover Effects https://tympanus.net/Tutorials/OriginalHoverEffects
    • CSS Transitions/Animations で軽量なホバーアニメーション例
  • Cool Layout with Complex Chainable Animation https://codepen.io/suez/full/AXQaEg
    • メニュー遷移のアニメーション例だが画面が大きいと少し重たい
• Canvas
  • CanvasMark http://www.kevs3d.co.uk/dev/canvasmark/
    • 単なる Canvas 利用例として試す。30fps に落ちるまでオブジェクトを増やすテストなどがあるが最初から 30fps 未満なケースなどベンチとしては不適
  • Pacman https://pacman-e281c.firebaseapp.com/
    • みんな大好きパックマン。Canvas 実装ゲームのサンプル。
• フレームワークの利用例
  • React
    • Pokedex https://alik0211.github.io/pokedex/
      • ポケモン一覧の表示と文字入力に対するリアルタイム絞り込み検索。多数の画像の読み込みと絞り込みの動作を確認
    • Emoji Search https://ahfarmer.github.io/emoji-search/
      • 絵文字リストのと文字入力に対するリアルタイム絞り込み検索。大量の画像を読むのでは無いため軽量
    • Github Battle https://react-course-project.netlify.com/
      • GitHub リポジトリの検索結果を表に出力する
  • Angular
    • Material Dashboard https://demos.creative-tim.com/material-dashboard-pro-angular2/dashboard
      • Material Design のダッシュボードデザインサンプル。詰め込みすぎで少し重たいがグラフや Google Map 埋め込みなどもある
  • Vue
    • ...
  • Polymer
    • Polymer Shop Demo
  • Oncen UI
    • 花王カタログ http://hkusu.github.io/gp-kao-catalog/
      • スマホ画面サイズぐらい向けの単純なカタログアプリサンプル
• Forms
  • HTML5 tests - inputs https://quirksmode.org/html5/inputs/
    • https://quirksmode.org/html5/inputs/tests/inputs_text.html
      • email, url にそれ以外の値を入れると検知されるか、submit をブロックされるか
    • https://quirksmode.org/html5/inputs/tests/inputs_numbers.html
      • 数字以外や範囲外の数値を入力して submit をブロックされるか
    • https://quirksmode.org/html5/inputs/tests/inputs_attributes.html
    • https://quirksmode.org/html5/inputs/tests/inputs_misc.html
• Vertical Text
  • todo: 縦書きテストサンプルを追加
• Web Fonts
  • https://pankajladhar.github.io/GFontsSpace/
    • 複数のフォントで任意テキストを表示して比較確認できるサンプル React アプリ。Write Something ... と書かれているところに何か入力したら右の PROPETIES でフォントファミリー名を指定し、+ Compare ボタンで入力欄を追加してフォントの違いを確認する。
• Audio
  • pulseaudio を起動させてテストすること: systemctl --user start pulseaudio
    • デフォルトのデバイスを変更するにはpactlを使うなどする。詳細は WPAテスト のページを参照。
  • ⭐️ HTML5 Audio Formats Test http://hpr.dogphilosophy.net/test/
    • Opus/WebM/Ogg/Wav など各形式の音声ファイルのテストページ
      • MP3とCAF形式はサポートされていないため再生されない
  • JavaScript Piano https://mrcoles.com/piano/
    • Audio タグで音出しするピアノ。
• Video
  • ⭐️ HTML5 video test https://tekeye.uk/html/html5-video-test-page
    • H.264/MP4, WebM, Ogg/Theora の各動画コーデックでの動作確認用ページ
    • もう一つ同じようなページ: http://demo.nimius.net/video_test/
      • MPEG4 (test.avi) は Firefox や一般のブラウザでサポートされる形式ではないので無視
    • H.264 動画単体: https://gem-tanzanite.github.io/video/video_01.m4v
  • HTML5 Video Destruction http://craftymind.com/factory/html5video/CanvasVideo.html
    • ビデオデコードして Canvas に描画させるデモ。動画をクリックしたらバラバラになりつつ再生されることを確認する
  • MPEG-DASH Media Source demo http://dash-mse-test.appspot.com/dash-player.html
    • YouTube が初期に作ったデモ。 feelings vp9 であれば H.264 再生非対応でもテスト可能。
  • Shaka Player Demo (Angle One) https://shaka-player-demo.appspot.com/demo/#asset=https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd
    • DASH 動画ストリーミング (Shaka Player) のサンプル (WebM/MP4)
  • Akamai の hls.js テスト https://players.akamai.com/hls/
    • 用意されているプレイリストは VP9 ではないことに注意。VP9 のプレイリストは Stream (URL) 入力欄に https://yt-dash-mse-test.commondatastorage.googleapis.com/media/feelings_vp9-20130806-manifest.mpd などを指定して Load すればテスト可能
• WebGL
  • ⭐️ WebGL Report https://webglreport.com/
  • Basic 2D Animation Example https://codepen.io/dynamis/full/ydBjRV
  • WebGL Dynamic Cubemap http://webglsamples.org/dynamic-cubemap/dynamic-cubemap.html
    • 比較的ロードが短く WebGL を動かしている感じのするサンプル
  • ⭐️ HelloRacer https://www.websocket.org/demos/racer/run/
    • レーシングカーをキーボード操作できるデモ。スマホからの操作機能は多分サーバダウンしていて使えない
  • BMW i8 https://playcanv.as/p/RqJJ9oU9/?overlay=false
    • HelloRacer より重たい。車を十字キーなどで走らせる様子を見せるデモ。車体のカラーリング変更も可能。
  • Build your Home Lift http://build.aritcohomelifts.com/?ch1=2225&ct1=0&smc=no
    • 家庭用エレベーターのデザインやオプションを選ぶ操作アプリの例
• Web Assembly
  • ...tbd...
• Service Worker
  • Service worker demo https://mdn.github.io/sw-test/
    • 非常にシンプルなオフライン対応デモ。SW が有効であれば about:serviceworkers で登録済みリストが表示されるし開発者ツールのネットワークパネルで転送量の欄に ServiceWorker と表示される。
    • ESR では無効化されており about:config で dom.serviceWorkers.enabled をオンにすると (ある程度) 使える

ハードウェア連携テスト

テスト・検証にハードウェアが必要な機能や API です。

• タッチパネル
  • WPT - touch events http://w3c-test.org/touch-events/
• Web Audio
  • Web Audio API samples https://webaudioapi.com/samples/
    • WebAudio API のシンプルなサンプル集。WebRTC のマイク入力との組み合わせなどもあり
• WebRTC
  • ⭐️ getUserMedia Test Page https://mozilla.github.io/webrtc-landing/gum_test.html
    • USB カメラからの入力が得られるかどうか (だけの) 確認
  • ⭐️ Media Devices test https://media-example.kou029w.now.sh/
    • カメラデバイスを JS から指定して USB カメラを使用する確認
  • getUserMedia + CSS filters https://webrtc.github.io/samples/src/content/getusermedia/filter/
    • USB カメラから得た入力を取得して加工する処理まで確認
  • 双方向ビデオチャット https://appr.tc/r/rzg
    • 複数台または PC と同じ URL を開いてビデオチャットが出来るか (リアルタイムエンコード＆デコード＆通信のフル動作確認)
• GamePad
  • ...
• Geolocation API
  • 位置情報の推定に使えるハードウェアが必要
• Orientation API
  • 画面または端末の向きを検知出来るデバイスが必要
• WebAuthn
  • Ubikey などが使えるのであればテスト可能か

負荷試験 (安定性と性能確認用)

重たいページで警告を出して JS 実行を中断させてしまう dom.max_script_run_time pref を変更してから実行すること。 折角実行したらスコアは ベンチマークページ に記録しておく。

• JS ベンチマーク
  • ⭐️ Octane 2.0 http://chromium.github.io/octane/
  • ⭐️ Kraken http://krakenbenchmark.mozilla.org/
  • JetStream 1.1 https://browserbench.org/JetStream1.1/
• WebAssembly ベンチマーク
  • ⭐️ PDPDFKit https://pspdfkit.com/webassembly-benchmark/
• Style/Layout ベンチマーク
  • ⭐️ Style Bench http://perftest.dynamis.jp/StyleBench/
• Animation ベンチマーク
  • MotionMark 1.1 https://browserbench.org/MotionMark1.1/
    • 画面解像度に応じて 3 パターンのモードがある。画面が大きいと負荷が高すぎてまともに動かなくなることに注意。
• WebGL ベンチマーク
  • ⭐️ WebGL Aquarium http://webglsamples.org/aquarium/aquarium.html
    • 動的Webコンテンツで伝統の水槽デモ WebGL 版。
  • Fish Bowl https://testdrive-archive.azurewebsites.net/performance/fishbowl/