フロントエンド の QA(Quality Assurance) について、実施するとした際の、枠組みを個人的に考えています。
全くまとまらないですが、注入しておきたい枠組みとなりそうな考え方、使用するツール類等を記載しておきます。

考える動機

Sier 時代は、イントラネットの業務アプリばかり触っておりましたが、奇怪な UI、謎な UX な多かった気がします。
転職して、Web 界隈な背景を持つ人達と一緒に仕事をする機会に恵まれました。
触るアプリケーションの UI は、いい感じになり、もしかしたら良い UX かもしれないと思う機会にも多くなりました。

それに伴ってか、以下2点の問題を経験しました。

  • 開発側で、UI の モックアップを受け取った後、フロントの意図を介さないものに仕上げてしまい、最終的なアプリケーションのフロントエンド品質が落ちる。

  • フロントエンドの納品物のモックアップ自体のクオリティが低い、そのままアプリケーションに組み込まれて、最終的なアプリケーションのフロントエンド品質が落ちる。

上記の品質落ちるポイントで、QAを設けて、品質が落ちるのを防げないかというのが動機です。

違う立場の人の意見

個人でやるとモチベーションに左右されるところはあります。
組織としての QAチーム があると違うのかもしれません。

システム開発系エンジニア は HTML を軽視していたり、単純に知らなかったりします。

参考

考える枠組み

フロントエンド QA の カバーする領域

【グループWeb戦略部門】QA リード(フロントエンド領域) | 楽天 株式会社 | IT/Web業界の求人・採用情報に強い転職サイトGreen(グリーン) | 2016/04/15 18:58:56更新 | id:36972

楽天 の 求人情報として、興味深い記述がありました。以下抜粋します。

最新のフロントエンド技術を活用し、全社のサービス品質の向上と開発／運用コストの削減を推進するポジションです。

楽天が提供する様々なサービスに対して、フロントエンド領域の品質を向上、保証するためのテスト計画の策定、実施、並びにテストの効率化と自動化の推進を行います。 カバーする領域は、フロントエンド技術全般、デザイン、デバイス／ブラウザ互換性、SEO、Web 解析、アクセシビリティ、パフォーマンス、セキュリティ等多岐に渡ります。フロントエンド技術とテストに関する幅広い知識と経験を生かし、効率的に検証を行なっていく職務です。 検証体制や運用ルール等の構築だけではなく、最新の技術を活用して仕組み化、自動化を行い、全社に横展開していく戦略立案とそれを実施する役割も求められている、非常にチャレンジングなポジションです。

カバーする領域を抽出します。

カバーする領域

領域説明
HTMLフロントエンド技術全般を細分化
CSSフロントエンド技術全般を細分化
Javascriptフロントエンド技術全般を細分化
フォントフロントエンド技術全般を細分化
画像フロントエンド技術全般を細分化
デザインデザインにサービス要求が反映されているか
デバイス互換性スマートフォンやPC、タブレットでの動作保証
ブラウザ互換性chrome、firefox、ie、opera、etc..
SEOGoolgeBot、BingBot、Yandex、etc..
Web 解析効果測定、Web解析可能か
アクセシビリティバリアフリーとか
パフォーマンスHTMLのレスポンス後>ブラウザでで描画されるまでのパフォーマンス
セキュリティ脆弱性に対する評価、チェック

フロントエンド QA の実施の流れ

  1. サービス要求のに合わせて、QA 観点抽出する。
    サービスによって、特性、要求は異なるので、それに合わせて QA 観点を抽出します。
    カバーする<wbr>領域 を元に静的テスト、動的テストの観点を決めていきます。

  2. UI モックアップの完了時点で、モックアップに対するテストを実施(静的テスト)
    モックアップの作成が完了した時点で、フロントエンド Lint ツールで静的テストを実施します。

  3. バックエンド、フロントエンドの初期統合時に、開発サイドへフィードバックするテスト実施 (静的テスト、動的テスト)
    QA テスト前の手戻りを少なくするため、バックエンド、フロントエンドの初期統合時に開発サイドに、テスト観点をフィードバックします。1

  4. 開発テスト完了後、QA テスト実施 (静的テスト、動的テスト)
    QA の評価として、開発テスト完了後に QA テスト実施します。2

  5. リリース後のサイト監視
    監視ツールで定期的にサイトを監視して、改善点を洗い出します。

  6. 1.-5. の繰り返し

ツール類

チェックリスト

フロントエンド全般

Web セキュリティ

フロントエンド、バックエンド問わず、アプリケーションのセキュリティ全般に対するものかと思います。

モバイルサイト

チェクツール

全般

モバイル

セキュリティ

サイトパフォーマンス

SEO

公開されたサイトに対する Lint

個人的には、最終的なアプリケーションに対して Lint をかけたいのです。
URLベースで実行でき、Lint レポートが出力されてCIで実行できるツールが、QAのチェックとしては使いやすいのかなと思います。

  • sonar’s online scanner
    sonarqube ではなくて sonar です。 web lint tool、コマンドラインでの実行も可能です。
    html の lint は 今のところできないようです。

    • 追記
      sonar から weblint という名前に変更されました。

  • WebPageTest - Website Performance and Optimization Test
    パフォーマンスの計測ツールですが、パブリックインスタンスだと公開サイトのみチェック可能なので、こちらに記載します。
    G Suite を使用しているのであれば、uknmr/gas-webpagetest を使うと計測が自動化できます。

ローカルファイルに対する Lint

構文系の静的解析だと URL ベースでできるものが少ないようです。
curl コマンドや、wget コマンドで実アプリケーションから、HTMLを取得して、取得したファイルに対してチェックする流れになるのかと思います。
3

アクセシビリティ

アクセシビリティのチェックツールについて記載します。

  • axe - Chrome ウェブストア
    Chrome plugin が 日本語化されて使いやすくなりました。
    WCAG に対して準拠しているかどうかをある程度チェックしてくれるツールです。

テキストの文書に対するLint

HTMLに対して、使える文書校正 textlint、Redpen が個人調べで存在します。
ルールをカスタマイズしていけば、技術文書ではない文書校正に使用できるのかと思います。

今後実施したいこと

  • 実施の<wbr>流れ の詳細化とツール類のマッピングをしてみる。

  • 軽量品質保証 としてのガイドラインのようなものをまとめてみる。

  • 気になるツール類を試しに使ってみる。

以上です。

  1. 手戻りを<wbr>少なくするため、<wbr>というのが SIer くさいですね。 ↩

  2. スケジュール如何では、期間が重複する..重複するでしょう. ↩

  3. URLベースで叩けるツールでも、ログインが必要なページだと、ログインスクリプトを書く必要があり、URLで指定のページのリソースを取得するのが、難しい場合はあります。 ↩

コメント

カテゴリー

最近の投稿