--- title: "Autify CSSセレクター / XPath取得ガイド | Autify Guide" slug: "how-to-get-css-selectors" description: "AutifyでCSSセレクターやXPathを取得する方法を学びましょう。シームレスな自動化テストを開始しましょう！" tags: ["CSSセレクター"] updated: 2023-09-13T05:08:26Z published: 2023-09-13T05:08:26Z canonical: "help.autify.com/how-to-get-css-selectors" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.autify.com/llms.txt > Use this file to discover all available pages before exploring further. # CSSセレクター / XPathを取得する Autify でシナリオにロケータを追加する際に、どのようにCSSセレクター / XPathを指定したら良いのかわからない場合は、Google Chrome デベロッパーツール（以降デベロッパーツール）で対象要素のCSSセレクター / XPathを調べることが出来ます。 このページでは、デベロッパーツールを使って要素のCSSセレクター / XPathを取得する方法を説明します。 より安定して要素を指定する方法や、取得後に発生したエラーに関しては関連記事をご確認ください。 [デベロッパーツール](https://developer.chrome.com/docs/devtools/)は、Google Chrome ブラウザに直接組み込まれたWeb開発者ツールセットです。（公式サイトより） *Windows版とMac版でUIが若干違う箇所があります。このページではMac版を使用しています。 ## デベロッパーツールの起動方法 デベロッパーツールの起動方法は下記の3通りの方法があります。 1. Chrome の右上にある「︙」アイコンから起動 1. Chrome の右上にある「︙」アイコンをクリックします。 2. メニュー内の「その他のツール」>「デベロッパーツール」をクリックします。 ![Chrome の右上にある「︙」メニューから起動.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Chrome%20%E3%81%AE%E5%8F%B3%E4%B8%8A%E3%81%AB%E3%81%82%E3%82%8B%E3%80%8C%EF%B8%99%E3%80%8D%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E8%B5%B7%E5%8B%95.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) 2. マウスの右クリックメニューから起動 1. 対象要素の上でマウスを右クリックしてメニューを表示します。 2. 「検証」をクリックします。 ![image.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/image%2841%29.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) 3. ショートカットキーから起動 下記のショートカットキーを利用しても起動できます。 ``` Windows： Ctrl + Shift + I MacOS： command + option + I ``` デベロッパーツールの表示位置は、デベロッパーツール内右上の「︙」アイコンから開くメニューの「Dock side」で変更が出来ます。 ![表示位置の変更方法.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/%E8%A1%A8%E7%A4%BA%E4%BD%8D%E7%BD%AE%E3%81%AE%E5%A4%89%E6%9B%B4%E6%96%B9%E6%B3%95.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) ## 対象要素のCSSセレクター / XPathの取得方法 今回は、[Autifyサイトトップページ](https://autify.com/ja)にある見出し、「ソフトウェアテスト自動化プラットフォームのAutifyでリリースサイクルを高速化」を例にご紹介します。 ![image.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/image%2842%29.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) 1. デベロッパーツールを「選択モード」にする 1. デベロッパーツールで「Elements」タブが開いていることを確認します。 2. デベロッパーツールの左上にあるアイコンをクリックすると「選択モード」になります。 ![image.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/image%2843%29.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) 2. 対象要素を選択する 1. デベロッパーツールが「選択モード」になると、サイト画面上の対象要素をマウスで選べる状態になるので、対象要素にマウスの位置を合わせクリックします。 2. 要素に該当するソースコードが選択状態になります。 ![対象要素を選択する-選択中.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/%E5%AF%BE%E8%B1%A1%E8%A6%81%E7%B4%A0%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B-%E9%81%B8%E6%8A%9E%E4%B8%AD.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) 3. 対象要素のCSSセレクター / XPathを取得する 1. デベロッパーツールで選択状態になっているソースコード上にマウスを移動し、右クリックします。 2. それぞれ下記操作で対象要素の値がクリップボードにコピーされます。 CSSセレクター：[Copy] > [Copy selector] XPath：[Copy] > [Copy XPath] ![image.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/image%2844%29.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) 3. テキストエディターなどにコピーされた値をペーストします。 今回は以下のような値が取得できました。 - CSSセレクター ``` body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3 ``` - XPath ``` /html/body/main/div[3]/div/div/div/div[1]/h3 ``` CSSセレクター / XPathは、同じ要素を選ぶ場合であっても複数の指定方法があります。 自動テストにおいては、複数の指定方法がある中でも以下の点を満たすことが肝心です。 - 自分の意図を反映している - 対象を一意に識別出来る - 簡潔で壊れにくい（ページ構造の変化に強い） 取得したCSSセレクターの指定方法を変更する方法は、こちらの記事が参考になります。 [CSSセレクターを使いこなす](/v1/docs/ja/how-to-use-css-selectors-effec) ## CSSセレクター / XPathの検証方法 取得したCSSセレクター / XPathの指定方法を調整した場合などに、意図した要素を指定するものになっているかを調べたい場合は、デベロッパーツールの「Elements」パネル内で下記コマンドで検索窓を呼び出し、検索する事で確認が可能です。 ``` Windows：Ctrl　+　F macOS：command　+　F ``` CSSセレクターを例として、紹介します。（XPathも同様の方法で確認できます。） 取得したCSSセレクターを下記のように変更し、意図する要素を指定できていることを確認します。 ``` 変更前：body > main > div:nth-child(3) > div > div > div > div.web-steps-heading.text-center > h3 変更後：.web-steps-heading.text-center > h3 ``` 右下の検索窓にCSSセレクターを入力すると、要素が指定できている場合には該当要素がハイライトされます。 ![image.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/image%2840%29.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A56%3A07Z&se=2026-11-15T01%3A56%3A07Z&sr=c&sp=r&sig=wyLchsVIEIUcRhST5Guf3bGZz4hDPXiYqy572dc0lsY%3D) - 検索にヒットしない場合には、CSSセレクターの記述内容を確認してください。 - 複数要素が検索にヒットした場合には、ロケーターが意図しない要素を特定してしまう可能性がございます。その場合は対象を一意に指定できるよう、指定方法を修正してください。 ## 関連記事 - [ロケータを追加して要素を指定する](/docs/ja/add-a-locator) - [CSSセレクターを使いこなす](/docs/ja/how-to-use-css-selectors-effec) - [対象要素が見つかりませんでした](/docs/ja/element-not-found)