問題が発生する
多くのフロントエンド ページでは、[Baidu Traffic Research Institute] など、多くの::before、::after 要素が表示されます。
例: [Baidu 流行ビッグデータ プラットフォーム]:
自動テストを学びたい場合は、ここで一連のビデオをお勧めします。このビデオは、ステーション B のネットワーク全体における最初のインターフェイス自動テスト チュートリアルと言えます。同時に、オンライン ユーザーの数は増加しています。 1,000 に達しました。収集すべきメモとさまざまな Lu Dashen Technical Exchange があります: 798478386
https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337&vd_source=488d25e59e6c5b111f7a1a1a16ecbe9a[Baidu Epidemic Big Data Platform] を例にとると、HTML ソースコードには「蓄積された診断」のテキストが表示されません。従来の xpath 要素を介して検索した場合、「蓄積された診断」のテキストが表示されるため、方法がありません。 " はツリー内の現在のページ dom に存在しません。
どうやって対処すればいいのでしょうか？
理解する必要があるのは、この要素の何が特別なのか、テキストがどこに保存されているのかということです。
実際、これは非常に簡単で、Chrome の F12 を使用してスタイル オプションを表示します。
要素のテキストが CSS スタイルで保存され、content プロパティを通じて設定されていることがわかります。
ここにはもう 1 つの小さな問題があります。テキストがまったく一致しません。
ここでは Unicode エンコードが使用されているため、オンラインの Unicode エンコード変換ツールを使用して確認できます。
同じことが ::after 要素にも当てはまります。この性質の要素は擬似要素と呼ばれます。
これらが疑似要素と呼ばれる理由は、これらが実際のページ要素ではなく、HTML には対応する要素がないためですが、その使用方法と動作はすべて実際のページ要素と同じであり、ページ要素と同じ CSS スタイルを使用できるためです。 . 表面的にはページの一部の要素が表示されているように見えますが、実際にはCSSスタイルによって表示される挙動なので擬似要素と呼ばれます。
1. 擬似要素の位置付け
疑似要素は CSS スタイルを通じて表示される動作であるため、CSS スタイル セレクターを使用して疑似要素を見つけることができます。「Baidu 流行ビッグデータを例に挙げます」:
-
まず、疑似要素の親要素を見つけます: div.Virus_1-1-318_3W7bs_
-
次に、疑似要素自体を見つけます: div.Virus_1-1-318_3W7bs_>label
2. 擬似要素テキストの取得
場合によっては、テキスト情報を取得する必要があります。疑似要素のテキストは主に content 属性を通じて設定され、JavaScript を通じて抽出できます。
window.getComputedStyle(document.querySelector('.样式'),':before').getPropertyValue('content')
window.getComputedStyle(document.querySelector('.样式'),':after').getPropertyValue('content')
Selenium で JavaScript を呼び出します。
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("window.getComputedStyle(document.querySelector('.Virus_1-1-318_1KG-A3'),':before').getPropertyValue('content')");