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/ http://wpt.live/ 配下のファイルを開けばよい。各ブラウザのテスト結果アーカイブは https://wpt.fyi/ に公開されている。

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 https://dynamis.github.io/flux-slider/demo.html
    • CSS Transitions のデモページ。必要に応じて Transition Gallery も
  • ⭐️ 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 - input/select https://quirksmode.org/html5/inputs/
    • select 要素も表の左上にあるものを使って確認すること
    • 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 に描画させるデモ。動画をクリックしたらバラバラになりつつ再生されることを確認する
  • ⭐️ Bitmovin Player Demo - HLS fragmented MP4 https://bitmovin.com/demos/hls-fmp4
    • MP4 動画の HLS 再生テスト。プレイリスト指定するテストもある: https://bitmovin.com/demos/stream-test
    • VP9 動画の DASH 再生テストはこちら: https://bitmovin.com/mpeg-dash-vp9-vod-live/
  • 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)
• WebGL
  • ⭐️ WebGL Report https://webglreport.com/
  • Basic 2D Animation Example https://codepen.io/dynamis/full/ydBjRV
  • WebGL 2.0 Samples http://webglsamples.org/WebGL2Samples/
  • 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
    • 家庭用エレベーターのデザインやオプションを選ぶ操作アプリの例
• WebAssembly
  • 加算 https://wasmbyexample.dev/examples/hello-world/demo/rust/
    • Hello World 的サンプル。WebAssembly 自体が有効化されているか確認する程度
  • ⭐️ Canvas https://wasmbyexample.dev/examples/reading-and-writing-graphics/demo/rust/
    • Canvas と組み合わせてグラフィックス出力をするコンパクトなサンプル
  • WebAssembly コンテンツは試験的 JS 機能を利用しておりブラウザ/バージョン依存が多いので試験時には要注意
• Service Worker
  • ESR では無効化されており about:config で dom.serviceWorkers.enabled や dom.push.enabled をオンにすると使えるようになる。インストール済みサービスワーカーの情報は about:serviceworkers にて確認できる。
  • Service worker demo https://mdn.github.io/sw-test/
    • 非常にシンプルなオフライン対応デモ。SW が有効であれば about:serviceworkers で登録済みリストが表示されるし開発者ツールのネットワークパネルで転送量の欄に ServiceWorker と表示される。
  • Push Simple Demo https://serviceworke.rs/push-simple_demo.html
    • プッシュ通知を受けて Web Notification API でダイアログを表示する。

ハードウェア連携テスト

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

• タッチパネル
  • ⭐️ Touchlist Objects https://patrickhlauke.github.io/touch/touchlist-objects/
    • タッチイベント発生時のポインタ位置可視化 (マルチタッチ確認にも)
  • Event Listener　https://patrickhlauke.github.io/touch/tests/event-listener.html
    • ポインターイベントとして処理されているか確認用　(タッチイベントが発行されてないとタッチ操作時も mouseXXX イベントが発生)
  • WPT - touch events http://w3c-test.org/touch-events/
  • JS 実装ピンチズーム https://manuelstofer.github.io/pinchzoom/demo/pinchzoom.html
    • 50 画像バージョン https://1htgr.csb.app/
  • ピンチズーム対応テキスト https://ll1le.csb.app/
  • React と JS ピンチズーム (激重) https://srrpwn.csb.app/
• 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.vercel.app/
    • カメラデバイスを JS から指定して USB カメラを使用する確認
  • SkyWay Video chat example https://yusuke84.github.io/skyway-stats-sample/
    • SkyWay を利用したビデオ通話。コーデック指定での WebRTC テストが可能
  • 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 パターンのモードがある。画面が大きいと負荷が高すぎてまともに動かなくなることに注意。
  • 設定をカスタマイズしたり一部テストのみ実行する場合は developer ver. を利用する
• WebGL ベンチマーク
  • ⭐️ WebGL Aquarium http://webglsamples.org/aquarium/aquarium.html
    • 動的Webコンテンツで伝統の水槽デモ WebGL 版。
  • Fish Bowl https://testdrive-archive.azurewebsites.net/performance/fishbowl/

Tips

試験用の設定

必要に応じて応答のないスクリプト警告表示までの時間や履歴やキャッシュの自動削除あるいは無効化などを行って試験します。

• dom.max_script_run_time を 0 に設定
• browser.cache.disk.enable や browser.cache.memory.enable を false に設定
• about:preferences で履歴やキャッシュの自動削除を設定

設定について詳しくは Preferences ページを参照してください。

CPU/Memory ログ

簡単に CPU 利用率・メモリ使用量ログを取る場合は top コマンドをバッチ実行する

top -b -d 1 -n 80 | grep -E "^Mem|\sfirefox|\swebviewer" > top.log &
GDK_BACKEND=wayland timeout -t 60 firefox example.jp

note: 正規表現指定しているのは起動前からログを取るためプロセス番号指定せずコマンド名で指定するが、top コマンド業を含めたくない＆メモリ行が欲しいから