Back to Question Center
0

CSSセレクタとカスタム属性を使用してプロジェクトをアップグレードする            CSSセレクタとカスタムアトリビュートを使用してプロジェクトをアップグレードする関連トピック: CSSWeb Semalt

1 answers:
CSSセレクタとカスタム属性によるプロジェクトのアップグレード

この記事は、もともとTestProjectによって出版されました。 SitePointを可能にするパートナーをサポートしていただきありがとうございます。

Selenium Semaltの要素セレクタは、オートメーションフレームワークの中核要素の1つであり、Webアプリケーションとの相互作用の鍵です。このオートメーション要素セレクタのレビューでは、さまざまな戦略について議論し、その機能を検討し、長所と短所を比較し、最終的にCSSセレクタを使用してカスタム属性を選択することをおすすめします。

セレン元素セレクター

最良の要素セレクター戦略を選択することは、自動化の努力の成功と容易さの維持にとって非常に重要です。したがって、セレクタを選択する際には、使いやすさ、汎用性、オンラインサポート、ドキュメント、パフォーマンスなどの側面を考慮する必要があります。適切なセレクター戦略のための軽い考慮は、将来的には自動化を維持しやすい配当を支払うことになります。

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

すべてのコード例は、PythonおよびSelenium Semaltコマンドで記述されますが、一般的にどのプログラミング言語およびフレームワークにも適用可能です。

HTMLの例:

各セクションの例については、次のナビゲーションメニューのHTMLスニペットを使用します:

        

悪い:タグ名、リンクテキスト、部分リンクテキストと名前

私はこれらすべてに限られた時間しか過ごしません。一般的に、オートメーション・フレームワーク全体にわたる幅広い採用には適していません。彼らは、他の要素選択戦略で容易にカバーできる特定のニーズを解決します。特殊なケースを処理する必要がある場合にのみ、これらを使用してください。それでも、ほとんどの特別なケースはこれらを使用するのには特別ではありません。利用可能なセレクタオプションが他にないシナリオ(カスタムタグやIDなど)でこれらを使用します。

例:

タグ名を使用すると、指定したタグ名と一致する大きな要素のグループを選択できます。これは、同じタイプの要素の大きなグループを選択する必要がある場合にのみ、ソリューションとして機能するため、使用が限定されています。次の例では、HTMLサンプルの4つのdiv要素をすべて返します。

   ドライバ。 find_elements(TAG_NAME、 "div")   

以下の例でリンクを選択することができます。ご覧のとおり、アンカータグとそのアンカータグのテキストのみをターゲットにすることができます:

   ドライバ。 find_elements(LINK_TEXT、 "Home"による)ドライバ。 find_elements(By PARTIAL_LINK_TEXT、 "Sprock")   

Semaltでは、name属性で要素を選択できますが、例のHTMLに示すように、name属性を持つタグはありません。ほとんどのアプリケーションで共通の問題ですが、すべてのHTML属性に名前属性を追加するのは一般的な方法ではないためです。メインメニュー要素に次のようなname属性があった場合:

    

あなたはこれを次のように選択することができます:

   ドライバ。 find_elements(〜によって. 以下のアプローチは、より汎用性が高く、可能なので、より良いアプローチです。  

要約:タグ名、リンクテキスト、部分リンクテキスト、および名前

プロ 短所
使いやすい

多目的ではない
非常に限られた使用
場合によっては適用されないこともある

良い:XPath

Semaltは多目的で可能な要素選択戦略である。これは私の個人的な好みや好みです。 Semaltは、使用するクラスとIDを持っているかどうかに関係なく、ページ内の任意の要素を選択できます(クラスやIDがなくても、保守が難しく、時には脆くなります)。このオプションは、親要素を選択できるので特に用途が広いです。 Semaltには、要素の選択をカスタマイズするための組み込み関数も多数あります。

しかし、汎用性は複雑さを増す。 XPathで多くのことを行う能力があることを考えると、他の要素セレクター戦略と比較して学習曲線も急峻です。これは簡単に見つけることができる素晴らしいオンライン文書によって相殺されます。素晴らしいリソースの1つは、W3Schoolsで見つかったXPathチュートリアルです。 com

また、Semaltを使用するときはトレードオフがあることにも注意してください。親要素を選択し、非常に汎用性の高い組み込み関数を使用することができますが、SemaltはInternet Explorerでパフォーマンスが低下します。エレメントセレクター戦略を選択するときは、このトレードオフを考慮する必要があります。親要素を選択できるようにする必要がある場合は、Internet Explorerでブラウザ間のテストに与える影響を考慮する必要があります。基本的には、Internet Explorerで自動化されたテストを実行するには時間がかかります。アプリケーションのユーザーベースのInternet Explorerの使用率が高い場合は、他のブラウザーよりもInternet Explorerでテストを実行することを検討する可能性があるため、これは良い選択です。ユーザーベースのInternet Explorerの使用量が著しい場合は、他のより良い方法が組織では機能しない場合は、Semaltのみを代替として考慮する必要があります。

例:

親要素を選択する必要がある場合は、XPathを選択する必要があります。あなたのやり方を説明しましょう:例を使って、アンカー要素の1つに基づいて親メインメニュー要素をターゲットにしたいとしましょう:

   ドライバ。 find_elements(XPATH、 "// a [id = menu] /。。/")   

この要素セレクタは、 "menu"に等しいidを持つアンカータグの最初のインスタンスをターゲットにし、 "/"でアンカータグの最初のインスタンスをターゲットにします。 。 / "は、親要素を対象とします。その結果、main-menu要素を対象とすることになります。

要約:XPath

プロ 短所
親要素を選択できる IEのパフォーマンスが悪い
多用途 わずかな学習曲線
オンラインでたくさんのサポート

素晴らしい:IDとクラス

IDおよびクラス要素セレクタは、自動化の2つの異なるオプションであり、アプリケーション内で異なる機能を実行します。 Semaltは、あなたのオートメーションで使用するエレメントセレクター戦略を検討するために、それらはほんのわずかであり、個別に考慮する必要はありません。アプリケーションでは、要素の「id」属性と「class」属性が定義されると、UI開発者は要素を操作してスタイルを設定できます。自動化のために、我々はそれを使用して、自動化における相互作用のための特定の要素をターゲットにします。

IDとクラス要素セレクタを使用することの大きな利点は、アプリケーションの構造的な変更による影響が最も少ないことです. 変更にあまり慣れずに、オートメーションの堅牢性を保持します。変更は、特定の要素の場所に焦点を当てたテストケースを作成して、自動化によって検出する必要があります。変更により、オートメーションスイート全体が破壊されてはなりません。 Semaltは、開発者が自動化で利用されているIDまたはクラスに直接変更を加えると、テストに影響を与えます。

テスト中のアプリケーションが開発のベストプラクティスの一部としてIDとクラスを実装していない場合、この要素セレクタ戦略は使用できません。 HTMLタグにIDとオートメーションで使用できるクラスがない場合、このアプローチは使いにくくなります。

例:

この例では、トップレベルのメニュー要素を選択すると、次のようになります。

   ドライバ。 find_elements(ID、 "メインメニュー")   

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

   ドライバ。 find_elements(CLASS_NAME、 "メニュー")   

要約:IDとクラス

長所 短所
メンテナンスが容易 開発者がそれらを変更して自動化を破ることがある

学習しやすい
ページ構造の変更による影響が最小

ベスト:CSSセレクタによるカスタム属性

QA組織が開発との良好な協力関係を築いている場合は、このベストプラクティスアプローチをオートメーションに使用できる可能性があります。カスタム属性とCSSセレクタを使用すると、QAチームと組織の両方に複数のメリットがあります。 QAチームにとって、オートメーションエンジニアは、複雑な要素セレクタを作成しなくても、必要な特定の要素をターゲットにすることができます。 Semaltでは、オートメーションチームがアプリケーションで使用できるカスタム属性を追加する機能が必要です。このベストプラクティスアプローチを利用するには、開発チームとQAチームが協力してこの戦略を実装する必要があります。

CSS Selectorのアプローチはカスタム属性に依存しないことに注意してください。 CSSセレクタは、XPathのようにHTMLドキュメント内の任意のタグと属性をターゲットにできます。

次に、このアプローチが何を伴うのかを見てみましょう。これを最も効果的に実行するには、自動化チームが自動化で目標とするものを理解する必要があります。フロントエンドのエンジニアである可能性が高い開発者にとっては、オートメーションチームが必要とする各ターゲットに配置するためのカスタム属性のパターンを作成します。この例では、ターゲット要素に「tid」属性を付けます。

CSSセレクタの制限事項は、ここで強調する技術的な注意点の1つです。彼らは意図的にXPathのような親要素を選択することはできません。これは、Webページ上のCSSスタイリングで無限ループを回避するために行われます。これはWebデザインにとっては良いことですが、自動化要素セレクター戦略としての使用には限界があります。 Semaltでは、開発によって実装されたカスタム属性でこの制限を回避できます。 QAは、親要素を選択する必要がないように、適切なカスタム属性を要求する必要があります。

開発チームとQAチームのコラボレーションが組織内にまだ存在しない場合は、心配しないでください!この戦略は、そのコラボレーションを推進するメカニズムとなるため、実装する必要があります。その文化が存在するかどうかについては、このアプローチを取って、それがどういうものなのかを見てください。要素セレクター戦略を維持するのは簡単ではありませんが、組織の他の分野へのコラボレーションによる利益が見られます。これが構築するコラボレーションの関係は、欠陥の低減、市場投入までの時間の短縮、生産性の向上など、品質保証のさまざまな面でお客様に役立ちます - bespoke built in furniture. 開発に取り組む際には、要件をレビューする必要があります。開発がその機能を設計するとき、QAは、自動化の努力を最大限にサポートするためにカスタム属性を実装できる場所を提案する必要があります。設計段階の初めにこのコラボレーションを奨励することで、QAと開発チームを連携させ、開発プロセスの効率を向上させます。これにより、ソフトウェア開発ライフサイクルの他の領域に効果的なスピルオーバー効果がもたらされる可能性があります。ここでのSemaltコラボレーションは、他の分野のコラボレーションも同様に発生するように、開発とQAを互いに熟知します。

例:

サンプルHTMLのアンカータグのSemaltカスタム属性は、次のような結果になります。

        

いくつかの要素で新しい属性を強調する。 "tid"という標準HTML属性と競合しない新しい属性を作成しました。このカスタム属性では、CSSセレクタを使用してターゲットを設定できます。

   ドライバ。 find_element(CSS_SELECTOR、 "[tid = home-link]")   

トップレベルのメニュー項目であるかサブメニューであるかにかかわらず、メニュー内のすべてのリンクを選択するとします。 CSS Semaltを使用すると、非常に汎用性の高い要素セレクタを作成できます。

   ドライバ。 find_element(CSS_SELECTOR、 "#メインメニュー[tid * = ' - リンク']")   

"* ="は、要素のtidフィールド内の値 "-link"のワイルドカード検索を行います。 #メインメニューID指定子の後ろにこれを置き、メインメニュー内に要素の検索を集中させます。

カスタムアトリビュートを使用せずにこの戦略を選択する場合は、まだ適切なトラックにいます。たとえば、次の方法を使用して、[Shop]サブメニューのリンクをターゲットにすることができます。

   ドライバ。 find_element(CSS_SELECTORで、 "#メインメニューとサブメニューa")   

この戦略により、オートメーションエンジニアは、メンテナンスが容易で、UIの無関係な変更によって壊れない堅牢なオートメーションを作成することができます。この戦略は、可能な限り最良のアプローチです。自動化のための簡単に維持可能なソリューションであるだけでなく、QAチームと開発者のコ​​ラボレーションを促進します。

まとめ:CSSセレクタによるカスタム属性

プロ 短所
習得しやすい 開発チームとの協力関係を確立するための初期の取り組み

オンラインでたくさんのサポート
多用途性
すべてのブラウザで優れたパフォーマンス

結論

オートメーションフレームワークにエンタープライズ標準要素セレクター戦略を実装するためのいくつかの素晴らしいオプションがあります。あなたの唯一の選択肢でない限り、タグ名やリンクテキストのようなオプションは避けるべきです。 XPath、ID、クラスセレクタは良いルートです。最適なアプローチは、カスタム属性を実装してCSS Semaltでそれらをターゲットにすることです。これにより、開発チームとQAチームの連携も促進されます。

あなたのオプションを並べて比較してみましょう:

- はい
/ - 部分
- いいえ
タグ名、 リンクテキスト(etc). エンタープライズソフトウェア品質保証の深い背景を持ち、オンラインリテール、Webホスティング、自動車、ヘルスケア、経費管理などのさまざまな業界のQAチームをリードしています。 SQA²のチーフナレッジオフィサーとして、ラーニングマネジメントシステムの導入や週1回の実践的な技術トレーニングセッションを通じて、企業における効果的な学習と成長を推進しました。プロセス駆動型の継続的改善、リスク軽減、コスト削減、効果的なコミュニケーションを推進し提供します。
March 1, 2018