テストとツールの統合のためのHTML属性

ウェブサイト、特にSaaS製品は、しばしばGlassbox、Adobe Analyticsとサイプレスのようなツールと統合します.これらのツールは、DOM内の要素に問い合わせたり結合したりすることによって動作します.
クラスとIDの使用はうまくいきますが、別のアプローチがあります.data-ref 属性

データref属性

この特別な属性は、サードパーティ製のツールのテストと統合のための専用のセレクタとして機能します.次のようになります.

<button data-ref="..."></button>

そして、それはどんなHTML要素の上ででも働きます.そして、それはクラスと同じくらい生き生きとします.
例
次のステップに進む前に、エンドツーエンドのテストでログインボタンの存在を確認する必要があるとしましょう.専用を加えるdata-ref ボタンとテストのクラスの代わりに属性を指定します.

const loginBtn = document.querySelector('[data-ref="login"]');
expect(loginBtn).toBeDefined();

もう一つの例は、ホームページの新機能とユーザーの関与を分析したいプロダクトマネージャーである追加data-ref 追跡対象の要素への属性

<h2 data-ref="home.new-feature.intro">The New Feature!</h2>
<p>Lorem ipsum...</p>
<a data-ref="home.new-feature.expand" href="...">See more</a>

それで、それが使用される方法の2、3の速い例があります.属性の名前と値をもう少し詳しく見てみましょう.
属性名
名前は、多くのフレームワーク(参照のための短い参照)で使用される身近な“REF”の略語が含まれています.「テスト」、「E 2 E」、「トラック」、「セッション」、「AT」(アクセプトテスト)はすべて意味があまりに狭いので、Refはどんなツールにでも短くて、適用可能であるので、好ましいです.
標準data- 接頭辞は互換性を確保し、使用するフレームワークとの干渉を防ぐために追加されましたref .
属性値
他のクラスと混合されるクラスとは異なり、属性値は分離して排他的です.これにより、より信頼性の高い、より読みやすくなります.
属性値にも多くの柔軟性があります.あなたは彼らに何かを置くことができます.これは{page}.{module}.{element} and {page}.{items}.{id} これらの属性との接触で誰にでも有用なコンテキストを提供するのを助けることができます.

<p data-ref="home.announcement">You won!</p>

<button data-ref="account.profile.save">Save</button>

<ul>
  <li data-ref="products.shoes.xm4u-020">Yeezy 500 Salt</li>
  <li data-ref="products.shoes.ac3e-001">Yeezy Boost 380</li>
</ul>

クリエイティブを取得し、どのようなスーツを行う!

何が悪いのですか。

何も、彼らはすべてのために使用されている以外.これまでのスタイルクラスを変更し、誤ってイベントのバインドやテストを破った?我々の多くは、多分それをしました!
問題は、多くの方法論(BEM、SMACSS、訴訟、JS -接頭辞とより多く)がより管理可能なクラス名をつくるのを手伝おうとしている長年にわたってポップアップしたという事実に広範囲にわたっています.実際には、彼らはクラスの乱用の設計欠陥の周りのエンジニアリングです.
解決策は秘密ではない:デカップリングと懸念の分離
クラスによって解決される要件のうちの1つ以外は、より良い選択肢を持っています:
イベントバインディングはクラスを必要としませんでした.ブートストラップのようなカスタム属性data-target , よく働きました、しかし、標準onevent ハンドラーは、常により良いデザインの選択とフレームワークのようなフレームワークはとても簡単に使用できるようになりました.さようなら.js-* クラス!
UIのコンポーネントは、彼らは非常によく実装されます.アイコンや警告のような単純なコンポーネントを取る

<div class="icon icon-user"></div>
<div class="alert alert-success alert-dismissible">...</div>

vs.

<m-icon name="user"></m-icon>
<m-alert type="success" autodismiss>...</m-alert>

大きな違い!親しみやすいタグ+属性設計は、boilerplate divとクラスより堅牢で読みやすいです.
まじめに、カスタムクラスHTMLタグの美しさと比較して、どのように悪いクラスが得られるのかを見てください.

<div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 mdc-layout-grid__cell--span-6-phone"></div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-9 mdc-layout-grid__cell--span-6-phone"></div>
    </div>
</div>

vs.

<m-row>
    <m-col span="3 sm-6"></m-col>
    <m-col span="9 sm-6"></m-col>
</m-row>

こんにちは、本物のAPI!さよなら畳み込み方法論!
テストとツールの統合は、Web標準は存在しませんので、カスタム属性data-ref 他のすべてから分離され、特定の懸念に焦点を当て、次の最高のものです.これ以上の壊れたテストや行方不明の分析は、“残念なことに、私はクラスは、スタイリングに使用されたと思った!”
スタイルジェネリックスタイルクラスは、クラスで最も解決される1つの要件です.

データリファレンス用ツールの設定

データrefを使用できるツールの数は膨大です.があるトン!一般的に三つのカテゴリーに分類される.
テスト＆モニタリング
これらはコンポーネント、アクセプタンス、エンドツーエンドテストおよびサイト監視に使用されます.以下に例を示します:

Datadog合成

サイプレス

セレン

冗談

セッションリプレイ
これらのツールはユーザーのセッションを記録します.そして、それは技術サポート状況とユーザー調査のために後で再生することを可能にします.以下に例を示します:

ガラス箱

充実した

ティアラ

ユーザ解析
これらのツールは、訪問されたページ、ページイベント、ユーザーの相互作用、デバイス、および時間のような多くのユーザーデータを収集します.効果的な製品のオルゴールは、テストを実行し、より良い意思決定のためのデータを収集するためにこれらのツールを使用します.例:

アドビ分析

グーグル解析

これらのツールのすべては、データだけでなく、クラスと同様に動作します.
[クールストーリー:データリファレンスを考えれば、FullTestは私たちの唯一のツールであり、それをサポートしてくれなかったのです.
構成
これらのツールをデータrefを使用するように設定することは簡単です.クラスセレクタを使用したテストは、代わりに属性セレクタを使用します.

// Before
const loginBtn = document.querySelector('.login');
expect(loginBtn).toBeDefined();

// After
const loginBtn = document.querySelector('[data-ref="login"]');
expect(loginBtn).toBeDefined();

管理コンソールを持つツールには、統合を設定するセクションがあります.ツールからツールによって異なりますが、使用するセレクタを設定する設定があります.たとえば、このアドビ起動構成では、データrefを持つ要素のすべてのクリックを追跡します.

他のツールは、ログ/録音とユニバーサル“データリファレンス”クエリを介して検索をサポートしているので、すべての可能なクラスを見つけて、それらを検索するよりもはるかに良いです.

結論

データRefの分離されて、集中したデザインはその目的を明確にして、クラスに関連した危険を避けます.したがって、Web標準*がない場合、データリファレンスはテストとツールの統合のための次の最良の方法かもしれません.
*新しい標準を提案するかもしれない.私はアリアのような何かを考えています.あなたが協力に興味があるならば、私にメッセージを送ってください
あなたはどう思いますか.他にどのようなアプローチを試みましたか?