如何通過 Selenium 查找動態 ID 的元素

Question

如何找到具有動態 ID 的元素？ 我想 select id= select_option_32但通常它會更改為select_option_60或其他數字。 有任何想法嗎？

下面是 XPATH 和 CSS 選擇器（以及腳本的屏幕截圖）。

XPATH -

//*[@id="select_option_32"]

CSS 選擇器 -

#select_option_32

下面是腳本：

下面是 class 的完整元素：

 <md-select-menu role="presentation" class="_md md-data-studio-theme md-overflow" style="transform-origin: 65.9653px 182.222px 0px;"> <md-content class="_md md-data-studio-theme"> <:-- ngRepeat. option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl:dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_76" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Fixed </div> </md-option> <.-- end ngRepeat. option in $ctrl:dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_77" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last 7 days </div> </md-option> <.-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_78" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last 14 days </div> </md-option> <:-- end ngRepeat. option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl:dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_79" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last 28 days </div> </md-option> <.-- end ngRepeat. option in $ctrl:dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_80" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last 30 days </div> </md-option> <.-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_81" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Today </div> </md-option> <:-- end ngRepeat. option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl:dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_82" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Yesterday </div> </md-option> <.-- end ngRepeat. option in $ctrl:dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_83" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This week (starts Sunday) </div> </md-option> <.-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_84" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This week to date (starts Sunday) </div> </md-option> <:-- end ngRepeat. option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl:dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_85" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last week (starts Sunday) </div> </md-option> <.-- end ngRepeat. option in $ctrl:dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_86" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This week (starts Monday) </div> </md-option> <.-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_87" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This week to date (starts Monday) </div> </md-option> <:-- end ngRepeat. option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl:dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_88" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last week (starts Monday) </div> </md-option> <.-- end ngRepeat. option in $ctrl:dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_89" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This month </div> </md-option> <.-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_90" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This month to date </div> </md-option> <:-- end ngRepeat. option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl:dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_91" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last month </div> </md-option> <.-- end ngRepeat. option in $ctrl:dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_92" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This quarter </div> </md-option> <.-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_93" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This quarter to date </div> </md-option> <:-- end ngRepeat. option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_94" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last quarter </div> </md-option> <!-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_95" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> This year </div> </md-option> <!-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="true" id="select_option_96" aria-checked="true" value="[object Object]" selected="selected"> <div class="md-text ng-binding"> This year to date </div> </md-option> <!-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_97" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Last year ** </div> </md-option> <!-- end ngRepeat: option in $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_98" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Auto date range </div> </md-option> <!-- end ngRepeat: option in** $ctrl.dateRangeOptions --> <md-option ng-repeat="option in $ctrl.dateRangeOptions" ng-value="option" tabindex="0" class="ng-scope md-data-studio-theme md-ink-ripple" role="option" aria-selected="false" id="select_option_99" aria-checked="true" value="[object Object]"> <div class="md-text ng-binding"> Advanced </div> </md-option> <!-- end ngRepeat: option in $ctrl.dateRangeOptions --> </md-content> </md-select-menu>

Answer 1

使用 CSS 選擇器使用部分匹配來定位元素：

driver.find_element_by_css_selector("md-option[id^='select_option']")

它將找到所有 id 以select_option開頭的選項因此在您的情況下，使其對特定於select_option_32的 select 元素唯一。 首先獲取列表中的所有元素，然后匹配下面的文本

all_element = WebDriverWait(driver, 10).until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, "md-option[id^='select_option']")))
for element in all_element:
    if 'This month' in element.text:
        print("expected element is there")
        # perform your action here which you suppose to do
        break

另一種方法是索引，如果您認為匹配文本不值得，那么您可以使用 xpath 中的索引來定位固定索引元素

//md-option[starts-with(@id,'select_option_')][32]

如果您正在尋找一個已經被選中的元素，那么 xpath 將是

//md-option[starts-with(@id,'select_option_')][@selected='selected']

Answer 2

您可以嘗試從 XPath 和 CSS 的函數開始。

例如：

• XPath ( starts-with ): //*[starts-with(@id,'select_option_')]
• CSS ( ^= ): document.querySelector('*[id^="select_option_"]')

Answer 3

所以我相信您正在尋找“去年”的網頁元素。 那是對的嗎？

Answer 4

您可以將部分 ID 與選定屬性一起使用：

//*[包含（@id，'select_options_'）和包含（@selected，'selected'）]

Answer 5

您可以嘗試以下任何一個 XPath

下面會將您定位到 Auto 數據范圍的父元素：

//md-content[@class='_md md-data-studio-theme']//child::md-option[23]

下面的內容將帶您准確地進入自動日期范圍

//md-content[@class='_md md-data-studio-theme']//child::md-option[23]/div[contains(text(),'Auto date range')]