seleniumによるボタン押下、もしくは非表示の要素を表示する方法

Question

■実現したいこと：seleniumによるボタン押下、もしくは非表示の要素を表示する

現在、seleniumを使用しweb操作を目的としたデスクトップアプリケーションを
開発中です。

web上のボタンクリックについては下記のような実装方法で実現できておりましたが
一ヶ所、下記のような実装では挙動が異なる箇所がありました。

「WebDriver.FindElement(By.XPath(//*[@id='category_name)).Click();」

対象のページは「カテゴリ」ボタンをクリック後に
ポップアップのような形で折りたたみ式のメニューが表示される仕様となっております。
折りたたまれた状態で最初に表示される第一カテゴリが下記なのですが
「レディース」のXpathを指定しクリックした場合
「メンズ」の第二カテゴリが展開されます。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
レディース //[@id="select-category"]/div/div/div[2]/div/div[1]/a　→　「メンズ」が展開
メンズ //[@id="select-category"]/div/div/div[2]/div/div[2]/a　→　「コスメ/美容」が展開
コスメ/美容 //[@id="select-category"]/div/div/div[2]/div/div[3]/a　→　「キッズ～」が展開
キッズ/ベビー/マタニティ //[@id="select-category"]/div/div/div[2]/div/div[4]/a　→　「エンタメ～」が展開
エンタメ/ホビー //[@id="select-category"]/div/div/div[2]/div/div[5]/a　→　「チケット」が展開
楽器 //[@id="select-category"]/div/div/div[2]/div/div[6]/a　→　「インテリア～」が展開
チケット //[@id="select-category"]/div/div/div[2]/div/div[7]/a　→　「スマホ～」が展開
インテリア/住まい/日用品 //[@id="select-category"]/div/div/div[2]/div/div[8]/a　→　「ハンドメイド～」が展開
スマホ/家電/カメラ //[@id="select-category"]/div/div/div[2]/div/div[9]/a　→　「スポーツ～」が展開
ハンドメイド //[@id="select-category"]/div/div/div[2]/div/div[10]/a　→　「自動車～」が展開
食品/飲料/酒 //[@id="select-category"]/div/div/div[2]/div/div[11]/a　→　「その他～」が展開
スポーツ/アウトドア //[@id="select-category"]/div/div/div[2]/div/div[12]/a　→　アクションなし
自動車/バイク //[@id="select-category"]/div/div/div[2]/div/div[13]/a　→　アクションなし
その他 //[@id="select-category"]/div/div/div[2]/div/div[14]/a　→　アクションなし
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

マウスによるクリックの場合は正しくそれぞれの第二カテゴリが展開されるのですが
seleniumによるクリックの場合、展開される第二カテゴリにズレが発生している状況です。

Xpath以外の各カテゴリ固有のidやclassを指定してクリックしても
同様の結果となりました。
また、カテゴリ選択画面ではキーボードの操作は受け付けておりませんでした。

そこで
・seleniumによるクリックで全てのカテゴリを展開することは可能か
・可能な場合、どのようなロジックとなるか
・クリックでの展開不可の場合、第二カテゴリ以下の非表示をExecuteScriptを使用しての表示は可能か
をご教示頂ければ大変有難いです。

■開発環境、言語
使用言語：C#
開発環境：visual studio2017

■対象のページ
https://fril.jp/item/new
→カテゴリボタンをクリック後のカテゴリ選択画面

Answer 1

seleniumによるクリックの場合、展開される第二カテゴリにズレが発生している状況です。

Seleniumの問題ではなく、XPathの指定がイケてない感じがしますね。

//*[@id="select-category"]/div/div/div[2]/div/div[2]/a

これだと、

id="select-category" の要素の中の > divの中の > div の中の > 2番目のdivの中の > div の中の > 2番目のdivの中の > a要素

という指定になるので、javascriptで要素が増えたり減ったりするページではすぐズレてしまいますね。
あと、素直に読みづらいです。

//span[@class='parent_name'][contains(text(),'メンズ')]

こんな感じで、
「クラス名がparent_nameのspan要素のうち、メンズというテキストを持つもの」
という形で指定してみたらどうでしょ？

Comments

[mic9999]

>>tsuemura様

ご回答ありがとうございます。

無事解決できました。
マウスのクリックとの違いや、JSから展開できるかなど調べだし
かなり詰まっておりましたので、大変助かりました。
心から感謝致します。

Xpathについての知識が乏しく、Chormeのデベロッパーツールで
Xpathを調べるだけだったことが原因ですので、勉強致します。

また機会がございましたら宜しくお願い致します。