Choosing value from drop-down in DOM (Katalon Studio)
I have a problem with some div with drop-down in DOM (I create test in Katalon Studio).
I choose values through JavaScriptExecutor, but finally the fields are resetting.
The biggest problem is that we have 3 input fields with the same name, I have no idea how to properly call them, and then select a specific value later.
And HTML code:
<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>
reactjs dom katalon-studio
add a comment |
I have a problem with some div with drop-down in DOM (I create test in Katalon Studio).
I choose values through JavaScriptExecutor, but finally the fields are resetting.
The biggest problem is that we have 3 input fields with the same name, I have no idea how to properly call them, and then select a specific value later.
And HTML code:
<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>
reactjs dom katalon-studio
add a comment |
I have a problem with some div with drop-down in DOM (I create test in Katalon Studio).
I choose values through JavaScriptExecutor, but finally the fields are resetting.
The biggest problem is that we have 3 input fields with the same name, I have no idea how to properly call them, and then select a specific value later.
And HTML code:
<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>
reactjs dom katalon-studio
I have a problem with some div with drop-down in DOM (I create test in Katalon Studio).
I choose values through JavaScriptExecutor, but finally the fields are resetting.
The biggest problem is that we have 3 input fields with the same name, I have no idea how to properly call them, and then select a specific value later.
And HTML code:
<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>
<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>
<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>
reactjs dom katalon-studio
reactjs dom katalon-studio
edited Nov 14 '18 at 9:51
Weirdo_Mrln
asked Nov 13 '18 at 16:00
Weirdo_MrlnWeirdo_Mrln
588
588
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I think you can create custom keyword for later use. I have an example of dropdown list in Jira system at https://github.com/katalon-studio-samples/tips-and-tricks/blob/master/Keywords/com/jira/components/JSelect.groovy.
add a comment |
You need to select that exactly same way as you do manually like
- Click the select input value
- Wait for dropdown to be visible
- Select the particular value
Based on your html, your Katalon script will be like this.
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)
1
I think your xpath of dropdownValue pointed to the main div, not the Month div that will be clicked
– Tony Bui
Nov 14 '18 at 2:26
Yeap. Updated it. Thanks
– Navarasu
Nov 14 '18 at 2:35
Ok, thank you guys, but I have an error - Unable to click on object 'DropDownValue' (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible. I think this problem is due to the fact that the input "select-selected" appears on the page up to 4 times and we have to refer to the index of this input (or maybe you have other solutions)
– Weirdo_Mrln
Nov 14 '18 at 7:42
Add complete html of the select box with parent tags of current input. Imput may not be right element to be click.
– Navarasu
Nov 14 '18 at 9:02
When the selectBox box is clicked in first line, is the drop-down appear?
– Navarasu
Nov 14 '18 at 9:47
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284887%2fchoosing-value-from-drop-down-in-dom-katalon-studio%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you can create custom keyword for later use. I have an example of dropdown list in Jira system at https://github.com/katalon-studio-samples/tips-and-tricks/blob/master/Keywords/com/jira/components/JSelect.groovy.
add a comment |
I think you can create custom keyword for later use. I have an example of dropdown list in Jira system at https://github.com/katalon-studio-samples/tips-and-tricks/blob/master/Keywords/com/jira/components/JSelect.groovy.
add a comment |
I think you can create custom keyword for later use. I have an example of dropdown list in Jira system at https://github.com/katalon-studio-samples/tips-and-tricks/blob/master/Keywords/com/jira/components/JSelect.groovy.
I think you can create custom keyword for later use. I have an example of dropdown list in Jira system at https://github.com/katalon-studio-samples/tips-and-tricks/blob/master/Keywords/com/jira/components/JSelect.groovy.
answered Nov 14 '18 at 2:30
Tony BuiTony Bui
75027
75027
add a comment |
add a comment |
You need to select that exactly same way as you do manually like
- Click the select input value
- Wait for dropdown to be visible
- Select the particular value
Based on your html, your Katalon script will be like this.
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)
1
I think your xpath of dropdownValue pointed to the main div, not the Month div that will be clicked
– Tony Bui
Nov 14 '18 at 2:26
Yeap. Updated it. Thanks
– Navarasu
Nov 14 '18 at 2:35
Ok, thank you guys, but I have an error - Unable to click on object 'DropDownValue' (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible. I think this problem is due to the fact that the input "select-selected" appears on the page up to 4 times and we have to refer to the index of this input (or maybe you have other solutions)
– Weirdo_Mrln
Nov 14 '18 at 7:42
Add complete html of the select box with parent tags of current input. Imput may not be right element to be click.
– Navarasu
Nov 14 '18 at 9:02
When the selectBox box is clicked in first line, is the drop-down appear?
– Navarasu
Nov 14 '18 at 9:47
|
show 3 more comments
You need to select that exactly same way as you do manually like
- Click the select input value
- Wait for dropdown to be visible
- Select the particular value
Based on your html, your Katalon script will be like this.
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)
1
I think your xpath of dropdownValue pointed to the main div, not the Month div that will be clicked
– Tony Bui
Nov 14 '18 at 2:26
Yeap. Updated it. Thanks
– Navarasu
Nov 14 '18 at 2:35
Ok, thank you guys, but I have an error - Unable to click on object 'DropDownValue' (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible. I think this problem is due to the fact that the input "select-selected" appears on the page up to 4 times and we have to refer to the index of this input (or maybe you have other solutions)
– Weirdo_Mrln
Nov 14 '18 at 7:42
Add complete html of the select box with parent tags of current input. Imput may not be right element to be click.
– Navarasu
Nov 14 '18 at 9:02
When the selectBox box is clicked in first line, is the drop-down appear?
– Navarasu
Nov 14 '18 at 9:47
|
show 3 more comments
You need to select that exactly same way as you do manually like
- Click the select input value
- Wait for dropdown to be visible
- Select the particular value
Based on your html, your Katalon script will be like this.
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)
You need to select that exactly same way as you do manually like
- Click the select input value
- Wait for dropdown to be visible
- Select the particular value
Based on your html, your Katalon script will be like this.
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)
edited Nov 14 '18 at 2:34
answered Nov 13 '18 at 19:33
NavarasuNavarasu
2,0501923
2,0501923
1
I think your xpath of dropdownValue pointed to the main div, not the Month div that will be clicked
– Tony Bui
Nov 14 '18 at 2:26
Yeap. Updated it. Thanks
– Navarasu
Nov 14 '18 at 2:35
Ok, thank you guys, but I have an error - Unable to click on object 'DropDownValue' (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible. I think this problem is due to the fact that the input "select-selected" appears on the page up to 4 times and we have to refer to the index of this input (or maybe you have other solutions)
– Weirdo_Mrln
Nov 14 '18 at 7:42
Add complete html of the select box with parent tags of current input. Imput may not be right element to be click.
– Navarasu
Nov 14 '18 at 9:02
When the selectBox box is clicked in first line, is the drop-down appear?
– Navarasu
Nov 14 '18 at 9:47
|
show 3 more comments
1
I think your xpath of dropdownValue pointed to the main div, not the Month div that will be clicked
– Tony Bui
Nov 14 '18 at 2:26
Yeap. Updated it. Thanks
– Navarasu
Nov 14 '18 at 2:35
Ok, thank you guys, but I have an error - Unable to click on object 'DropDownValue' (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible. I think this problem is due to the fact that the input "select-selected" appears on the page up to 4 times and we have to refer to the index of this input (or maybe you have other solutions)
– Weirdo_Mrln
Nov 14 '18 at 7:42
Add complete html of the select box with parent tags of current input. Imput may not be right element to be click.
– Navarasu
Nov 14 '18 at 9:02
When the selectBox box is clicked in first line, is the drop-down appear?
– Navarasu
Nov 14 '18 at 9:47
1
1
I think your xpath of dropdownValue pointed to the main div, not the Month div that will be clicked
– Tony Bui
Nov 14 '18 at 2:26
I think your xpath of dropdownValue pointed to the main div, not the Month div that will be clicked
– Tony Bui
Nov 14 '18 at 2:26
Yeap. Updated it. Thanks
– Navarasu
Nov 14 '18 at 2:35
Yeap. Updated it. Thanks
– Navarasu
Nov 14 '18 at 2:35
Ok, thank you guys, but I have an error - Unable to click on object 'DropDownValue' (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible. I think this problem is due to the fact that the input "select-selected" appears on the page up to 4 times and we have to refer to the index of this input (or maybe you have other solutions)
– Weirdo_Mrln
Nov 14 '18 at 7:42
Ok, thank you guys, but I have an error - Unable to click on object 'DropDownValue' (Root cause: org.openqa.selenium.ElementNotVisibleException: element not visible. I think this problem is due to the fact that the input "select-selected" appears on the page up to 4 times and we have to refer to the index of this input (or maybe you have other solutions)
– Weirdo_Mrln
Nov 14 '18 at 7:42
Add complete html of the select box with parent tags of current input. Imput may not be right element to be click.
– Navarasu
Nov 14 '18 at 9:02
Add complete html of the select box with parent tags of current input. Imput may not be right element to be click.
– Navarasu
Nov 14 '18 at 9:02
When the selectBox box is clicked in first line, is the drop-down appear?
– Navarasu
Nov 14 '18 at 9:47
When the selectBox box is clicked in first line, is the drop-down appear?
– Navarasu
Nov 14 '18 at 9:47
|
show 3 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284887%2fchoosing-value-from-drop-down-in-dom-katalon-studio%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown