検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSセレクターとカスタム属性でプロジェクトをアップグレードします

CSSセレクターとカスタム属性でプロジェクトをアップグレードします

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌オリジナル
2025-02-16 09:20:37879ブラウズ

Upgrade Your Project with CSS Selector and Custom Attributes

この記事はもともとTestProjectによって公開されました。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

Selenium WebDriverの要素セレクターは、自動化フレームワークのコアコンポーネントの1つであり、Webアプリケーションと対話するための鍵です。自動化された要素セレクターのこのレビューでは、さまざまな戦略について説明し、その機能を調査し、長所と短所を比較検討し、最終的にはCSSセレクターのカスタムプロパティと組み合わせて最良のセレクター戦略を推奨します。

キーポイント

  • Selenium WebDriverの要素セレクターは、Webアプリケーションと対話するために不可欠です。最良のセレクター戦略は、使いやすさ、汎用性、オンラインサポート、ドキュメント、パフォーマンスを組み合わせて、CSSセレクターのカスタムプロパティを組み合わせることです。
  • カスタム属性とCSSセレクターにより、自動化エンジニアは複雑な要素セレクターを作成せずに特定の要素を見つけることができます。ただし、これには、QAと開発チームの間のコラボレーションが必要であり、アプリケーションで使用できるカスタムプロパティを追加する必要があります。
  • XPathは、クラスとIDが利用可能であるかどうかにかかわらず、ページ内の要素を選択する多目的で強力な要素セレクター戦略です。ただし、XPathはInternet Explorerでパフォーマンスが低下しています。
  • IDおよびクラス要素セレクターは、アプリケーション構造の変化によって最も影響を受けません。ただし、開発者が自動化で使用されるIDまたはクラスを直接変更すると、テストに影響します。
  • タグ名、リンクテキスト、部分的なリンクテキスト、要素セレクター戦略としての名前の使用は限られており、自動化フレームワーク全体で広く採用することをお勧めしません。カスタムタグやIDなど、追加のセレクターオプションが利用できない場合にのみ使用する必要があります。

Selenium Element selector

最適な要素セレクター戦略を選択することは、自動化の取り組みとメンテナンスの容易さの成功にとって重要です。したがって、セレクターを選択するときは、使いやすさ、汎用性、オンラインサポート、ドキュメント、パフォーマンスを考慮する必要があります。適切なセレクター戦略を慎重に考慮すると、メンテナンスが容易な自動化により、将来的には報われます。

要素セレクターの技術的側面を考慮する必要があるように、組織の文化を考慮する必要があります。開発者とQAの間のコラボレーションの成熟した文化は、自動化に要素セレクターを実装する際に、より高いレベルの成功を達成します。これは、ソフトウェア開発ライフサイクルの他の分野でのコラボレーションの基礎を築くことで組織に利益をもたらすだけでなく、自動化の取り組みを超えています。

すべてのコードサンプルは、PythonおよびSelenium WebDriverコマンドを使用しますが、通常、プログラミング言語とフレームワークに適用できます。

html例：

次のナビゲーションメニューのHTMLスニペットを各セクションの例として使用します。 

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

お勧めしない：タグ名、リンクテキスト、部分的なリンクテキスト、名前私はこれにあまり時間を費やしません。なぜなら、それらはすべて使用が非常に限られているからです。多くの場合、自動化フレームワーク全体で広く採用されるための良い選択ではありません。他の要素セレクター戦略を使用して簡単に対処できる特定のニーズに対応します。特別な状況に対処するための具体的なニーズがある場合にのみ、これらを使用してください。それでも、ほとんどの特別なケースは、これらを使用するほど特別なものではありません。カスタムタグやIDなど、利用可能な追加のセレクターオプションなしでこれらを使用します。

例：

タグ名を使用して、提供するタグ名と一致する多数の要素をすべて選択できます。同じタイプの多数の要素を選択する必要がある場合にのみ機能するため、これは限られた使用です。次の例では、サンプルHTMLの4つのdiv要素すべてを返します。 

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

次の例を使用して、リンクを選択できます。ご覧のとおり、アンカータグとこれらのアンカータグのテキストのみを見つけることができます。 

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>
最後に、名前属性ごとに要素を選択できますが、サンプルHTMLに表示されるように、名前属性のタグはありません。これは、ほとんどすべてのアプリケーションで一般的な問題です。これは、すべてのHTML属性に名前属性を追加することが非常に一般的であるためです。メインメニュー要素に次のような名前属性がある場合：

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>
次のように選択できます：

<code class="language-html"><div id="main-menu" name="menu"></div></code>
ご覧のとおり、これらの要素セレクター戦略により使用が制限されています。次の方法はすべて、より一般的で強力であるため、すべて優れています。

概要：タグ名、リンクテキスト、部分リンクテキスト、名前

Pros 短所 使いやすく、広く使用されていません 場合によっては非常に限られた使用が適用されない場合があります

推奨：xpath

XPathは、用途が広く強力な要素セレクター戦略です。これは私の個人的な好みであり、お気に入りです。 Xpathは、クラスやIDが利用可能であるかどうかにかかわらず、ページ内の任意の要素を選択できます（ただし、クラスやIDがない場合、維持することは困難であり、脆弱です）。このオプションは、親要素を選択できるため、特に一般的です。 XPathには、要素の選択をカスタマイズできる多くの組み込み関数もあります。

しかし、汎用性は複雑さをもたらします。 XPathが多くのことをすることができることを考えると、その学習曲線は他の要素セレクター戦略よりも急です。これは、簡単に見つかる優れたオンラインドキュメントによって補償できます。優れたリソースは、w3schools.comで見つかったxpathチュートリアルです。

また、xPathを使用するときにトレードオフがあることにも注意する必要があります。親要素を選択し、非常に一般的な組み込み関数を使用することはできますが、XPathはインターネットエクスプローラーでパフォーマンスが低下します。このトレードオフは、要素セレクター戦略を選択するときに考慮する必要があります。親要素を選択できる必要がある場合は、インターネットエクスプローラーのクロスブラウザーテストへの影響を考慮する必要があります。基本的に、インターネットエクスプローラーで自動テストを実行するのに時間がかかります。アプリケーションがインターネットエクスプローラーの使用量が高い場合、これは他のブラウザよりもインターネットエクスプローラーでテストを実行することを少なくすることを検討する可能性があるため、これは良い選択です。ユーザーベースに大きなインターネットエクスプローラーの使用がある場合、他のより良い方法が組織に適していない場合にのみXPathを考慮する必要があります。

例：

親要素を選択するための要件が​​ある場合は、XPathを選択する必要があります。それを行う方法は次のとおりです。私たちの例を使用して、アンカー要素に基づいて親のメインメニュー要素を見つけたいとします。

この要素セレクターは、「メニュー」に等しいIDを持つアンカーラベルの最初のインスタンスを見つけ、「/../」で親要素を見つけます。その結果、メインメニュー要素を見つけます。 

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>
概要：xpath

Pros

短所 IEで親要素を選択できます 普遍的な学習曲線はわずかに急です たくさんのオンラインサポート 推奨：IDおよびクラス

IDおよびクラス要素セレクターは、自動化における2つの異なるオプションであり、アプリケーションで異なる機能を実行します。ただし、自動化で使用する要素セレクター戦略を検討するには、それらはほとんど異なるため、個別に考慮する必要はありません。アプリケーションでは、要素の「ID」および「クラス」プロパティ（定義されている場合）により、UI開発者はアプリケーションを操作してスタイルできます。自動化のために、それを使用して特定の要素を見つけて自動化で対話します。

IDおよびクラスの要素セレクターを使用する利点の1つは、アプリケーション構造の変化によって最も影響を受けないことです。少数の要素といくつかの子要素のチェーンに依存するXPATHまたはCSSセレクターを作成すると仮定しますが、機能要求が新しい要素を追加してチェーンを破壊するとどうなりますか？ IDおよびクラスの要素セレクターを使用する場合、ページ構造に依存する代わりに特定の要素を見つけることができます。変化についてあまりにもゆるくすることなく、自動化の堅牢性を保持します。特定の要素の位置に焦点を当てたテストケースを作成することにより、自動化によって変更を検出する必要があります。変更は、自動化スイート全体を壊すべきではありません。ただし、開発者が自動化で使用されるIDまたはクラスを直接変更すると、テストに影響します。

テスト中のアプリケーションが開発ベストプラクティスの一部としてIDとクラスを実装していない場合、この要素セレクターポリシーは利用できません。この方法は、HTMLタグに自動化で使用できるIDとクラスがない場合に使用が困難です。

例：

私たちの例では、トップメニュー要素を選択したい場合は、次のようになります。

最初のメニュー項目を選択する場合、次のようになります：

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

概要：IDおよびクラス

Pros 短所 開発者を維持しやすくすると、自動化を破ることができます ページ構造の変更の影響を最小限に抑えることが簡単です

Best：CSSセレクターのカスタムプロパティ

と組み合わせて

QA組織が開発チームと良好な共同関係を持っている場合、このベストプラクティスアプローチを自動化で使用できる可能性が高いでしょう。カスタムプロパティとCSSセレクターを使用して要素を見つけることは、QAチームと組織にとって複数の利点があります。 QAチームの場合、これにより、自動化エンジニアは、複雑な要素セレクターを作成せずに必要な特定の要素を見つけることができます。ただし、これには、自動化チームがアプリケーションで使用できるカスタムプロパティを追加する機能が必要です。このベストプラクティスアプローチを活用するために、開発とQAチームはこの戦略を実装するために協力する必要があります。

CSSセレクターメソッドはカスタムプロパティに依存していないことを指摘したいと思います。 CSSセレクターは、XPathのようなHTMLドキュメントで任意のタグとプロパティを見つけることができます。

この方法に何が含まれているか見てみましょう。これを最大限に活用するには、自動化チームが自動化でターゲットにしたいものを理解する必要があります。開発者（おそらくフロントエンドエンジニア）と協力して、自動化チームが接続する必要があるすべてのターゲットに配置されるカスタム属性パターンを開発します。この例では、ターゲット要素に「TID」属性を追加します。

ここで強調すべき技術的なポイントは、CSSセレクターの制限です。彼らは意図的にXpathのように親要素を選択することを許可しません。これは、WebページのCSSスタイルの無限ループを回避するために行われます。これはWebデザインにとって良いことですが、自動化された要素セレクター戦略として使用するための制限です。幸いなことに、この制限は、開発者によって実装されたカスタムプロパティでは回避できます。 QAは、親要素を選択する必要がないように、適切なカスタム属性を要求する必要があります。

カスタムプロパティを使用せずにこのポリシーを選択する場合は、まだ正しい軌道に乗っています。たとえば、次の方法を使用して、ショップサブメニューのリンクを見つけることができます。 

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>
この戦略により、自動化エンジニアは、UIの無関係な変更のためにメンテナンスが容易で壊れない信頼できる自動化を作成できます。この戦略を選択することは、それを行うための最良の方法です。メンテナンスが容易な自動化ソリューションになるだけでなく、開発チームとQAチームとのコラボレーションも促進します。

例：

HTMLの例でカスタムプロパティを実装すると、次の結果が生成されます。

いくつかの要素の新しいプロパティに注意してください。 「TID」と呼ばれる標準のHTML属性と競合しない新しいプロパティを作成しました。このカスタムプロパティを使用すると、CSSセレクターを使用して配置できます。 
<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

メニュー内のすべてのリンクを選択して、トップメニュー項目であろうとサブメニューであろうと仮定します。 CSSセレクターを使用すると、非常に一般的な要素セレクターを作成できます。

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

「*=」の目的は、任意の要素のTIDフィールドで値「-link」をワイルドカード検索を実行することです。メインメニュー内の要素の検索スコープをフォーカスする＃メインメニューID仕様の後に置きます。

カスタムプロパティを使用せずにこのポリシーを選択する場合は、まだ正しい軌道に乗っています。たとえば、次の方法を使用して、ショップサブメニューのリンクを見つけることができます。

この戦略により、自動化エンジニアは、UIの無関係な変更によって中断されない、メンテナンスが容易であり、信頼できる自動化を作成できるようになります。この戦略を選択することは、それを行うための最良の方法です。メンテナンスが容易な自動化ソリューションになるだけでなく、開発チームとQAチームとのコラボレーションも促進します。 
<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

要約：CSSセレクターのカスタムプロパティと組み合わせて

Pros

短所 開発チームとの共同関係を構築するための最初の努力を簡単に学ぶ たくさんのオンラインサポートユニバーサル すべてのブラウザで優れたパフォーマンス

結論

自動化フレームワークにエンタープライズ標準要素セレクター戦略を実装するための適切なオプションがいくつかあります。タグ名やリンクテキストなどのオプションは、唯一のオプションでない限り避ける必要があります。 Xpath、ID、およびクラスセレクターは良い方法です。最善の方法は、カスタムプロパティを実装し、CSSセレクターを使用してそれらを見つけることです。これにより、開発チームとQAチームとのコラボレーションも促進されます。

以下は、並んで比較するためのオプションです：

✓–はい / - パート✗ - いいえ

CSSセレクターのカスタムプロパティに関するFAQ

CSSセレクターのカスタムプロパティとは何ですか？

CSSセレクターカスタム属性は、開発者が属性値に基づいて要素を選択してスタイルを選択できるようにするCSSの強力な機能です。これは、パブリック属性を共有しているが同じタグ名またはクラスを共有しない要素に特定のスタイルを適用する場合に特に便利です。たとえば、カスタム属性セレクターを使用して、タグ名やクラスに関係なく、すべての要素を「アクティブな」データ属性を使用してスタイリングできます。

CSSセレクターを使用してプロパティをカスタマイズする方法は？

CSSセレクターを使用してプロパティをカスタマイズするには、CSSセレクターで正方形のブラケット

を使用する必要があります。括弧では、選択する属性と値を指定します。たとえば、「アクティブ」データ属性を持つすべての要素を選択するには、セレクター

を使用します。その後、これらの要素に任意のスタイルを適用できます。 [] [data-active]プロパティを備えたCSSセレクターカスタムプロパティを使用できますか？

はい、任意のプロパティでCSSセレクターカスタムプロパティを使用できます。これには、「クラス」や「ID」などの標準のHTML属性、および要素に追加されたカスタムデータ属性が含まれます。

CSSプロパティセレクターのさまざまなタイプは何ですか？

CSSプロパティセレクターにはいくつかのタイプがあります。最も基本的なタイプは、属性値の正確な一致に基づいて要素を選択する正確な一致セレクターです。また、プロパティ値の開始、終了、または一部を一致させるためのセレクターもあります。さらに、その価値に関係なく、特定の属性を持つ要素を一致させるためのセレクターがあります。

すべてのブラウザーにCSSセレクターカスタムプロパティを使用できますか？

すべての最新のブラウザー（Chrome、Firefox、Safari、Edgeを含む）は、CSSセレクターカスタムプロパティをサポートしています。ただし、これらのブラウザの古いバージョンまたは他の一般的でないブラウザではサポートされていない場合があります。複数のブラウザでCSSをテストするのが最善です。

CSSセレクターカスタムプロパティを使用してサイトのパフォーマンスを向上させる方法は？

CSSセレクターカスタムプロパティは、記述する必要があるCSSの量を減らすことで、ウェブサイトのパフォーマンスを改善するのに役立ちます。属性に基づいて要素を選択することにより、各要素に個別のCSSを書き込むことなく、複数の要素にスタイルを一度に適用できます。これにより、CSSがより効率的かつ維持しやすくなります。

他のセレクターと組み合わせてCSSセレクターカスタムプロパティを使用できますか？

はい、他のセレクターと組み合わせてCSSセレクターカスタムプロパティを使用できます。たとえば、クラスセレクターと組み合わせてカスタム属性セレクターを使用して、特定のクラスと特定の属性を持つ要素のみを選択できます。

CSSセレクターのカスタムプロパティの一般的なユースケースは何ですか？

CSSセレクターカスタム属性は、通常、状態または関数に基づいて要素をスタイリングするために使用されます。たとえば、カスタムプロパティセレクターを使用して、すべての無効ボタンまたは必要なフォームフィールドをスタイリングできます。また、データテレモ属性に従って異なるスタイルを適用することにより、テーマ設定にも使用できます。

CSSセレクターのカスタムプロパティは、他のCSSセレクターとどのように比較されますか？

CSSセレクターカスタムプロパティは、他の多くのCSSセレクターよりも柔軟性が高くなります。他のセレクターは、タグ名、クラス、またはIDに基づいて要素を選択することに限定されていますが、カスタム属性セレクターは任意の属性に基づいて要素を選択できます。これにより、複雑なWebページを設定するための強力なツールになります。

CSSセレクターを使用してプロパティをカスタマイズすることの欠点はありますか？

CSSセレクターを使用したカスタマイズプロパティの潜在的な欠点の1つは、CSSをより複雑にすることができることです。多数のカスタムプロパティセレクターを使用する場合、CSSを理解して維持することは困難かもしれません。ただし、これは慎重な計画と組織によって軽減できます。

以上がCSSセレクターとカスタム属性でプロジェクトをアップグレードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Python firefox css chrome safari html edge 循环 class 选择器 ui 自动化
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：コンポーネントIOを使用してカスタムコンポーネントを作成する方法次の記事：コンポーネントIOを使用してカスタムコンポーネントを作成する方法

関連記事

続きを見る