如何使用带有 java 的 selenium Web 驱动程序从下拉菜单中选择一个元素？

Posted 2023-02-26

【中文标题】如何使用带有 java 的 selenium Web 驱动程序从下拉菜单中选择一个元素？

【英文标题】：How to Select an element from dropdown menu using selenium web driver with java?

【发布时间】：2016-02-04 11:49:43

【问题描述】：

<div class="select-dropdown-icon"
	ng-mousedown="onDropdownBtnMousedown()"></div>

<div class="select-dropdown" ng-click="onDropdownClick($event)"
	style="display: block;">
	<div class="select-contents-container ng-isolate-scope"
		kt-scrollpane="" on-infinite-scroll="onInfiniteScroll()"
		ng-transclude="">
		<kt-select-option value="off_duty" class="ng-scope ng-isolate-scope">
			<div class="select-option-container select-option-highlighted"
				ng-mouseenter="onMouseenter()" ng-click="onClick()"
				ng-class="'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue"
				ng-transclude="" style="">
				<span class="ng-scope">Off Duty</span>
			</div>
		</kt-select-option>
		<kt-select-option value="sleeper" class="ng-scope ng-isolate-scope">
			<div class="select-option-container select-option-selected"
				ng-mouseenter="onMouseenter()" ng-click="onClick()"
				ng-class="'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue"
				ng-transclude="">
				<span class="ng-scope">Sleeper</span>
			</div>
		</kt-select-option>
		<!-- ngIf: !logSuggestions.log.isEldEnabled -->
		<kt-select-option value="driving"
			ng-if="!logSuggestions.log.isEldEnabled"
			class="ng-scope ng-isolate-scope">
			<div class="select-option-container" ng-mouseenter="onMouseenter()"
				ng-click="onClick()"
				ng-class="'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue"
				ng-transclude="" style="">
				<span class="ng-scope">Driving</span>
			</div>
		</kt-select-option>
		<!-- end ngIf: !logSuggestions.log.isEldEnabled -->
		<kt-select-option value="on_duty" class="ng-scope ng-isolate-scope">
			<div class="select-option-container" ng-mouseenter="onMouseenter()"
				ng-click="onClick()"
				ng-class="'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue"
				ng-transclude="" style="">
				<span class="ng-scope">On Duty</span>
			</div>
		</kt-select-option>
	</div>
</div>

请检查代码并告诉我如何访问下拉菜单并选择一个元素。元素是“上班”“卧铺”“下班”

【问题讨论】：

给定的 html 仅显示单词 driving。没有任何下拉菜单。你能分享一些关于 HTML 的更多细节吗？还有问题到底出在哪里？

我已经编辑了 HTML，你可以看看。我是 HTML 和 selenium 的新手，所以我在访问主下拉菜单时遇到问题，而不是选择任何一个选项“下班”“睡眠者”“上班”，我想选择以下任何选项。@mk08

您的编辑中缺少某些内容。你可以分享网址吗？

请检查您的编辑代码。HTML 代码从未像现在这样

你现在可以检查代码吗@mk08

【参考方案1】：

如果您熟悉 HTML，您就会知道下拉菜单传统上是使用 Select 标记实现的。 Selenium WebDriver 提供了一个类来处理这样的选择。

Select select = new Select(driver.findElement(By.id("select")))

但是，使用 jQuery Bootstrap 和其他技术开发的较新网站使用 spans、divs、li 和其他标签以不同方式实现这一点。你的代码也是这样开发的。所以我们必须遵循以下方法。通常，下拉列表和下拉列表值位于 DOM 的不同部分。我们必须通过检查页面来源来正确识别它。

点击下拉框，等待下拉值出现

WebElement dropDown = driver.findElement(By.className("select-dropdown-icon"));
dropDown.click();

通过单击选择所需的下拉值。

WebElement dropDownValueOffDuty  = driver.findElement(By.xpath("//kt-select-option[@value='off_duty']/div"));
dropDownValueOffDuty.click();

希望对你有帮助。