Question

我在div下拉菜单中遇到一些问题（我在Katalon Studio中创建了测试）。我通过JavaScriptExecutor选择值，但最终这些字段正在重置。

最大的问题是我们有3个同名输入字段，我不知道如何正确调用它们，然后再选择一个特定值。

和HTML代码：

<div class="row">
   <div class="col-12">
      <h6>Date of birth</h6>
      <p>Your date of birth will be used for age verification purposes only</p>
   </div>
   <div class="col-12 col-lg-4">
      <div class="custom-select-checkout ">
         <input class="select-selected" value="May" readonly="">
         <div class="select-items select-hide">
            <div>January</div>
            <div>February</div>
            <div>March</div>
            <div>April</div>
            <div>May</div>
            <div>June</div>
            <div>July</div>
            <div>August</div>
            <div>September</div>
            <div>October</div>
            <div>November</div>
            <div>December</div>
         </div>
      </div>
   </div>
   <div class="col-12 col-lg-4">
      <div class="custom-select-checkout ">
         <input class="select-selected" value="Day" readonly="">
         <div class="select-items select-hide">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            <div>15</div>
            <div>16</div>
            <div>17</div>
            <div>18</div>
            <div>19</div>
            <div>20</div>
            <div>21</div>
            <div>22</div>
            <div>23</div>
            <div>24</div>
            <div>25</div>
            <div>26</div>
            <div>27</div>
            <div>28</div>
            <div>29</div>
            <div>30</div>
            <div>31</div>
         </div>
      </div>
   </div>
   <div class="col-12 col-lg-4">
      <div class="custom-select-checkout ">
         <input class="select-selected" value="Year" readonly="">
         <div class="select-items select-hide">
            <div>2018</div>
            <div>2017</div>
            <div>2016</div>
            <div>2015</div>
            <div>2014</div>
            <div>2013</div>
            <div>2012</div>
            <div>2011</div>
            <div>2010</div>
            <div>2009</div>
            <div>2008</div>
            <div>2007</div>
            <div>2006</div>
            <div>2005</div>
            <div>2004</div>
            <div>2003</div>
            <div>2002</div>
            <div>2001</div>
            <div>2000</div>
            <div>1999</div>
            <div>1998</div>
            <div>1997</div>
            <div>1996</div>
            <div>1995</div>
            <div>1994</div>
            <div>1993</div>
            <div>1992</div>
            <div>1991</div>
            <div>1990</div>
            <div>1989</div>
            <div>1988</div>
            <div>1987</div>
            <div>1986</div>
            <div>1985</div>
            <div>1984</div>
            <div>1983</div>
            <div>1982</div>
            <div>1981</div>
            <div>1980</div>
            <div>1979</div>
            <div>1978</div>
            <div>1977</div>
            <div>1976</div>
            <div>1975</div>
            <div>1974</div>
            <div>1973</div>
            <div>1972</div>
            <div>1971</div>
            <div>1970</div>
            <div>1969</div>
            <div>1968</div>
            <div>1967</div>
            <div>1966</div>
            <div>1965</div>
            <div>1964</div>
            <div>1963</div>
            <div>1962</div>
            <div>1961</div>
            <div>1960</div>
            <div>1959</div>
            <div>1958</div>
            <div>1957</div>
            <div>1956</div>
            <div>1955</div>
            <div>1954</div>
            <div>1953</div>
            <div>1952</div>
            <div>1951</div>
            <div>1950</div>
            <div>1949</div>
            <div>1948</div>
            <div>1947</div>
            <div>1946</div>
            <div>1945</div>
            <div>1944</div>
            <div>1943</div>
            <div>1942</div>
            <div>1941</div>
            <div>1940</div>
            <div>1939</div>
            <div>1938</div>
            <div>1937</div>
            <div>1936</div>
            <div>1935</div>
            <div>1934</div>
            <div>1933</div>
            <div>1932</div>
            <div>1931</div>
            <div>1930</div>
            <div>1929</div>
            <div>1928</div>
            <div>1927</div>
            <div>1926</div>
            <div>1925</div>
            <div>1924</div>
            <div>1923</div>
            <div>1922</div>
            <div>1921</div>
            <div>1920</div>
            <div>1919</div>
         </div>
      </div>
   </div>
</div>

Answer 1

您需要选择与手动操作完全相同的方式

单击选择的输入值
等待下拉菜单可见
选择特定值

基于您的html，您的Katalon脚本将如下所示。

TestObject selectBox = new TestObject('SelectBox').addProperty('css', ConditionType.EQUALS, "input.select-selected")
WebUI. click(selectBox)

TestObject dropdownValue = new TestObject('DropDownValue').addProperty('xpath', ConditionType.EQUALS, "//div[contains(@class, 'select-items')]/div[contains(text(), 'May')]")
WebUI.waitForElementVisible(dropdownValue, 30)
WebUI.click(dropdownValue)

Answer 2

我认为您可以创建自定义关键字以供以后使用。我在https://github.com/katalon-studio-samples/tips-and-tricks/blob/master/Keywords/com/jira/components/JSelect.groovy的Jira系统中有一个下拉列表示例。

从DOM中的下拉菜单中选择值（Katalon Studio）

2 个答案: