找不到我要点击的元素 - 硒

Question

我正在尝试在收到电子邮件后自动更新服务台票证。我已经找到了“收听”电子邮件并启动网站/登录的方式，但是对于我的生活，我认为最简单的部分之一被证明是最难的。基本上我需要点击下面图片中的下拉菜单，然后输入或点击“已确认”选项。

带下拉选项的服务台照片：

以下是下拉列表的代码段，注意：代码中ID中的数字会根据故障单更改（在此示例中，数字为298）

<tr>
<td id="td_298_status">
<div id="298_status" class="dropdown-wrapper add-scroll autosuggest get-values-on-open hiddendropdown formField opened">
<select class="selectedKeysValues" style="display:none" id="status" name="status">
<option value="1" selected="">New</option>
</select>

<span class="dd-description"><a href="javascript:void(0)" onclick="openAdvancedSearchForComboBox('SelectFilterValues.jsp?func=updateComboBox&amp;fromComboBox=YES&amp;dbValueField=11587&amp;dbCaptionField=12868&amp;dbTable=20130&amp;comboboxId=status&amp;moduleRelevance=16');">Advanced Search</a></span>
<select class="custom_select" style="display:none" name="status_CustomSelect" id="status_CustomSelect">
</select><div class="newListSelected status_CustomSelect" tabindex="0"><input type="text" class="autoSuggestInput" value="" style="width: 156px;"><div class="selectedTxt"><span class="defaultText">New</span></div><div class="containerContentDiv" style="width: auto; top: 25px;"><div class="jScrollPaneContainer" style="display: block;"><div class="scroll_pane" id="addScroll_status_CustomSelect" style="display: block; height: 202px; top: 0px; overflow-x: hidden; overflow-y: auto;"><ul class="newList" style="left: 0px; display: block;"><li class="option_0_option">Please select a status</li><li class="option_1_option selected hiLite">New</li><li class="option_3_option">Closed</li><li class="option_4_option">Submit Error</li><li class="option_5_option">Pending</li><li class="option_7_option">Deleted</li><li class="option_11_option">Request Rejected</li><li class="option_37_option">Work In Progress</li><li class="option_38_option">Resolved</li><li class="option_39_option">Acknowledged</li></ul></div></div><div class="addedDescription" style="display: block;"><a href="javascript:void(0)" onclick="openAdvancedSearchForComboBox('SelectFilterValues.jsp?func=updateComboBox&amp;fromComboBox=YES&amp;dbValueField=11587&amp;dbCaptionField=12868&amp;dbTable=20130&amp;comboboxId=status&amp;moduleRelevance=16');">Advanced Search</a></div></div></div>
<span class="afterSelectJS" style="display:none">closureInformationCheck();StatusChange();</span>
</div>
</td>
<td id="closureInformationTD" style="display: none;"><table id="closureInformationTable"><tbody><tr><td class="Form_Ctrl_Label">Closure Information</td>
<td id="td_298_closureInformation" style="padding-left:25px;">
<div id="298_closureInformation" class="dropdown-wrapper add-scroll autosuggest get-values-on-open hiddendropdown formField">
<select class="selectedKeysValues" style="display:none" id="closureInformation" name="closureInformation">
<option value="0" selected="">None</option>
</select>

<span class="dd-description"><a href="javascript:void(0)" onclick="openAdvancedSearchForComboBox('SelectFilterValues.jsp?func=updateComboBox&amp;fromComboBox=YES&amp;dbValueField=11587&amp;dbCaptionField=12868&amp;dbTable=21229&amp;comboboxId=closureInformation');">Advanced Search</a></span>
<select class="custom_select" style="display:none" name="closureInformation_CustomSelect" id="closureInformation_CustomSelect">
</select><div class="newListSelected closureInformation_CustomSelect" tabindex="0"><input type="text" class="autoSuggestInput" value="" style="display: none;"><div class="selectedTxt"><span class="defaultText">None</span></div><div class="containerContentDiv"><div class="jScrollPaneContainer" style="display: none;"><div class="scroll_pane" id="addScroll_closureInformation_CustomSelect" style="height: 200px; overflow-y: auto; overflow-x: hidden; display: none;"><ul class="newList" style="left: 0px; display: none;"></ul></div></div><div class="addedDescription" style="display: none;"><a href="javascript:void(0)" onclick="openAdvancedSearchForComboBox('SelectFilterValues.jsp?func=updateComboBox&amp;fromComboBox=YES&amp;dbValueField=11587&amp;dbCaptionField=12868&amp;dbTable=21229&amp;comboboxId=closureInformation');">Advanced Search</a></div></div></div>
</div>
</td>
</tr></tbody></table></td></tr>

我尝试了很多类似的东西：

driver.find_element_by_xpath('//*[@id="298_status"]/div/input').click()

或

driver.find_element_by_xpath(u"//td[contains(text(), '_status')]")

但我总是得到错误，说明找不到元素。有什么想法吗？

Answer 1

您似乎可能希望与select元素进行交互。它们与所有其他元素的工作方式不同，并且有一个特定的Selenium库用于处理它们。这可能是完成你想要做的事情最直接的方法。但是，我不确定为什么在网页上找不到元素 - 这是你必须得到回答的第一件事。为此，我确保将其滚动到视图中，如果在呈现页面时默认情况下不可见。您可能有超时问题等。

from selenium.webdriver.support.select import Select
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

timeout = 15
try:
    status_select = WebDriverWait(self.thread.driver, timeout).until(
        EC.visibility_of_element_located(("id", "status"))
    )
    Select(status_select).select_by_value("Acknowledged")
except:
    print("Element was not visible on page after", timeout, "seconds.")

Answer 2

根据您分享的HTML和need to click the dropdown in the image below and click the option 已确认，您可以使用以下代码块：

driver.find_element_by_xpath("//div[@class='newListSelected status_CustomSelect']/input[@class='autoSuggestInput' and @type='text']").click()
driver.find_element_by_xpath("//div[@class='newListSelected status_CustomSelect']/input[@class='autoSuggestInput' and @type='text']//following::ul[@class='newList']/li[@class='option_39_option']").click()

Answer 3

从您的HTML代码中，我可以知道您想要操作的不是HTML的原生选择（使用标记<select> <option>），实际上它是模拟选择（哪个UI和行为看起来像是原生选择。）

要操作模拟选择，您需要执行以下步骤：

1. 找出点击哪个元素将显示所有选项
2. 找出所有选项的HTML代码，以便您可以编写定位器来查找要选择的选项。

从您的HTML代码中，我无法完全知道上面步骤1中所述的元素的html代码。但是从截图中我猜测下方的箭头除了“请选择状态”之外。应该是我们想要的。

从HTML代码中，我可以找到所有选项的HTML代码，它们位于：

＆＃13;
＆＃13;
<ul class="newList" style="left: 0px; display: block;">
	<li class="option_0_option">Please select a status</li>
	<li class="option_1_option selected hiLite">New</li>
	<li class="option_3_option">Closed</li>
	<li class="option_4_option">Submit Error</li>
	<li class="option_5_option">Pending</li>
	<li class="option_7_option">Deleted</li>
	<li class="option_11_option">Request Rejected</li>
	<li class="option_37_option">Work In Progress</li>
	<li class="option_38_option">Resolved</li>
	<li class="option_39_option">Acknowledged</li>
</ul>
＆＃13;
＆＃13;
＆＃13;

我们必须在代码中分为两个步骤来选择选项：

1. 单击向下箭头可使所有选项可见（因为selenium无法单击不可见元素）。

2. 点击“已确认”＆＃39;选项

Python代码示例：

// find down arrow and click, please complete this part by yourself
// if you have difficult to do that, please tell me the exact HTML code of the down arrow 
driver.find_element_by_xxx('xxxxxxxxxx').click();

// find option to click (there are two ways)
1) if only one element's text is 'Acknowledged' in whole page
driver.find_element_by_xpath("//li[text()='Acknowledged']").click()
2) otherwise
driver.find_element_by_xpath("//ul[li[text='Please select a status']]/li[text()='Acknowledged']").click()