xpath_使い方 開発者ツール python selenium

Chromium形式のブラウザ

(例えばGoogle ChromeやMicrosoft Edge)


の開発者ツールで確認できるHTML要素のXPathには、

さまざまな記述方法があります。


以下に、主な記述形式と特に`*`記号について解説します。


---


## **XPathの記述形式**


XPathは、XMLやHTMLドキュメント内で特定の要素を指定するための

強力なクエリ言語です。


基本的な記述形式には次のようなものがあります。



### **1. 絶対パス**


- ルート要素から対象要素までの階層を完全に記述します。


- **例:**


  ```xpath

  

  /html/body/div[1]/div[2]/span

  

  ```

  

  - ドキュメントのルートから階層をたどるため、

長くなりやすいですが、特定の構造を正確に表現します。


---


### **2. 相対パス**


- 対象要素に至るまでの相対的なパスを指定します。


- **例:**


  ```xpath

  

  //div[@class='example']

  

  ```

  

  - `//`は、現在のノードから

ドキュメント内の任意の場所を検索することを意味します。


---


### **3. 属性による指定**


- 特定の属性を持つ要素を指定します。


- **例:**


  ```xpath

  

  //input[@id='search']

  

  ```

  

  - 属性値が一致する要素を特定できます。


---


### **4. 部分一致の条件**


- 属性値の部分一致を利用して要素を指定します。


- **例:**


  - 属性値が特定の文字列で始まる場合:

  

    ```xpath

    //div[starts-with(@class, 'btn')]

    ```

  - 属性値が特定の文字列を含む場合:

  

    ```xpath

    //a[contains(@href, 'example')]

    ```


---


### **5. インデックス指定**


- 同じ名前の兄弟要素が複数ある場合に、特定のインデックスを指定します。


- **例:**


  ```xpath

  

  (//div[@class='example'])[2]

  

  ```

  

  - `2番目`の要素を指定しています。



---


### **6. ワイルドカード `*`**


- **`*`は任意のタグ名を意味します。**


- **例:**


  ```xpath

  

  //*[@id='header']

  

  ```

  

  - ドキュメント内のすべてのタグから`id='header'`を持つ要素を検索します。

  

- 特定の条件下で、タグ名を指定せずに、

すべての要素を検索したい場合に便利です。


---


### **7. テキスト内容の指定**


- 要素内のテキストを条件に指定できます。


- **例:**


  ```xpath

  

  //span[text()='ログイン']

  

  ```

  

  - テキストが「ログイン」である`<span>`タグを検索します。

  


- 部分一致の場合:


  ```xpath

  

  //span[contains(text(), 'ログ')]

  

  ```


---


### **8. 複数条件の組み合わせ**


- `and`や`or`を使って複数の条件を組み合わせます。


- **例:**


  ```xpath

  

  //input[@type='text' and @name='username']

  

  ```


---


## **`*`の用途と意味**


- **`*`は任意のタグ名を表します。**


  - 例えば、`//*/a`は、

任意のタグの子要素として存在する`<a>`タグを検索します。

  

- タグ名に依存しない検索を行うときに非常に便利です。


---


## **開発者ツールでの確認方法**


1. **要素のコピー:**


   - 開発者ツールで要素を右クリックして

「Copy」→「Copy XPath」や「Copy Full XPath」を選択することで、

XPathが生成されます。


2. **検索バーでの確認:**


   - 開発者ツールのElementsタブで

`Ctrl + F`(または`Cmd + F`)を押し、

XPathを入力して検索できます。


---


### **例: `*`を含むXPath**


```xpath


//*[contains(@class, 'menu-item')]


//*/input[@type='submit']


```


- 最初の例では、

任意のタグ内で`class`属性に`menu-item`を含む要素を検索します。

- 2つ目の例では、任意のタグ内で`<input>`タグ

かつ`type='submit'`の要素を検索します。

---


必要に応じて、

具体的なケースに合ったXPathの記述方法を選んでください!

コメント