Question

html页面包含两个容器。每个容器都有两列，左侧是可选列表项，右侧是选定列表项。因此，一旦您单击列表项，它就会从左列移动到右列。

第一个容器用于关联客户端。

第二个容器适用于国家。

他们都使用类似的代码而没有唯一的ID或名称。第一个容器的HTML代码：

   <div class="col-sm-12 col-md-6">
<div class="tab-section">
<h3 class="section-header"> Associated Client(s) </h3>
<div class="row">
<div class="col-sm-12">
<div id="ClientControlDiv">
<div style="margin: 0 auto; width: 450px;">
<select id="AssociatedClientList" class="multi-select" name="AssociatedClientList" multiple="multiple" style="position: absolute; left: -9999px;">
<div id="ms-AssociatedClientList" class="ms-container">
<div class="ms-selectable">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selectable" class="ms-elem-selectable ms-hover">
<span>(Test) 3M</span>
</li>
</ul>
</div>
<div class="ms-selection">
<div class="panel-heading ">
<div class="panel-title">Selected Client(s)</div>
</div>
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selection" class="ms-elem-selection" style="display: none;">
<span>(Test) 3M</span>
</li>

国家/地区第二个容器的HTML代码：

<div class="col-sm-12">
<div id="DesignationControlDiv">
<div style="margin: 0 auto; width: 450px;">
<select id="AssociatedDesignationsList" class="multi-select" name="AssociatedDesignationsList" multiple="multiple" style="position: absolute; left: -9999px;">
<div id="ms-AssociatedDesignationsList" class="ms-container">
<div class="ms-selectable">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="d86b9350_aa83_43c7_bc2b_5fc7f5c6ccae-selectable" class="ms-elem-selectable ms-hover">
<span>Afghanistan</span>
</li>
</div>
<div class="ms-selection">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="d86b9350_aa83_43c7_bc2b_5fc7f5c6ccae-selection" class="ms-elem-selection" style="display: none;">
<span>Afghanistan</span>
</li>

选择html代码后：

<div class="ms-selection">
<div class="panel-heading ">
<div class="panel-title">Selected Client(s)</div>
</div>
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selection" class="ms-elem-selection ms-selected ms-hover" style="">
<span>(Test) 3M</span>
</li>

Ruby代码我试过了两个：

@b.select_list(:class => "ms-list").li(:text => "(Test) 3M").when_present.select
@b.select_list(:class => "ms-list").li.span(:text => "(Test) 3M").select

Answer 1

这是一个初步答案，因为您提出疑问需要更多代码才能确定您真正要做的事情：

@b.li(:id => /.*selectable/, :text => "(Test) 3M").hover
@b.li(:id => /.*selectable/, :text => "(Test) 3M").click

这假设您未在问题中显示的其他列表的ID为/.*selected/。因此，Watir应该查找包含li的ID的所有selectable项，然后查找带有文本"(Test) 3M").select的第一个项目。

Answer 2

根据提供的HTML，没有select_list元素。例如：

 b.ul(class: "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").exists?
 #=> true
 b.ul(class: "ms-list").li(id: /selectable/).span(text: "(Test) 3M").exists?
 #=> true
 b.select_list(:class => "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").exists?
 #=> false

如果您想点击“（测试）3M”，请尝试以下方法：

 b.ul(class: "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").click

当元素没有可用ID时，无法选择列表元素查找解决方案

2 个答案: