locked
select element span in unordered list or ul in dropdown select values with selenium RRS feed

  • Question

  • User2131089582 posted

     have unordered list where when i click the element it will show the result here is the html page

    <div class="dataTables_length col s12" id="dataTables-1_length"><label>Show</label><div class="select-wrapper"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-49a1af1e-da84-b5fc-3c3f-ce38dc701d6a" value="10" wtx-context="444F3577-1027-491E-8B1A-08A1D49E2E7E"><ul id="select-options-49a1af1e-da84-b5fc-3c3f-ce38dc701d6a" class="dropdown-content select-dropdown" style="width: 382px; ; top: 0px; left: 0px; opacity: 1; display: none;"><li class="active"><span>10</span></li><li class=""><span>25</span></li><li class=""><span>50</span></li><li class=""><span>100</span></li></ul><select name="dataTables-1_length" aria-controls="dataTables-1" class="initialized" wtx-context="3DE7F091-A80A-4AB0-8CB0-0B8D71C12B52"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select></div></div>

    hre is what i have already tried with c# using selenium

       driver.FindElementsByXPath("//ul[@class='dropdown-content select-dropdown']")[0].Click();
                driver.FindElementsByXPath("//span[contains(text(),'100')]")[0].Click();

    but the above code still fails. then i try second using below code

    var select = driver.FindElementsByXPath("//input[@class='select-dropdown']")[0];
            select.SendKeys("100");
            select.Click();

    but it won't click.

    i'm sure there is something wrong with my coded, i hope you can help me to resolve my issues, Thanks

    Wednesday, March 4, 2020 4:50 PM

Answers

  • User-1330468790 posted

    Hi, hocamahdi99,

     

    Could you please specify what the purpose you want to achieve?

    "when i click the element it will show the result" is not very clear.

    Instead, it would be helpful to target the problem to illustrate the target like, "Click which element", "it will show what kind of result" "the result is from where, select element or input element?".

     

    Although I am not sure about the target, I tried your code and found that there was two mistakes indeed.

    • The Code below will throw "ElementNotInteractableException"

    driver.FindElementsByXPath("//ul[@class='dropdown-content select-dropdown']")[0].Click();
    

    Reason:

    The returned element is as below which is obviously not able to be interactive since the css property 'display' is set to none. The element is hidden from the view, althought exists in the DOM.

    <ul id="select-options-49a1af1e-da84-b5fc-3c3f-ce38dc701d6a" class="dropdown-content select-dropdown" style="width: 382px; ; top: 0px; left: 0px; opacity: 1; display: none;'>
      <li class="active">
        <span>10</span>
      </li>
      <li class="">
        <span>25</span>
      </li>
      <li class="">
        <span>50</span>
      </li>
      <li class="">
        <span>100</span>
      </li>
    </ul>

    Solution:

    You can use IJavaScriptExecutor to change the style.

    var select = driver.FindElementsByXPath("//ul[@class='dropdown-content select-dropdown']")[0];
    IJavaScriptExecutor js = driver as IJavaScriptExecutor;
    js.ExecuteScript("arguments[0].style='display: block;'", select);
    //clicked, but no effect. You can imagine that you click an unordered list of a html website except that you bind a js function on that. select.Click();

     

    • The code below will not be working 
    var select = driver.FindElementsByXPath("//input[@class='select-dropdown']")[0];
    select.SendKeys("100");
    select.Click();

    Reason:

    The input element is already set as 'readonly'.

    As you can see, the content of the element "var select" is: 

    <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-49a1af1e-da84-b5fc-3c3f-ce38dc701d6a" value="10" wtx-context="444F3577-1027-491E-8B1A-08A1D49E2E7E" />

    So, it will not accept the value "100" which you sent by the code "select.SendKeys("100");"

    Solution:

    IJavaScriptExecutor can be applied on the element to remove the attribute "readonly" and then assign it with value "100". After that, if you want to keep the input element non-editable, you can just setAttribute of the element.

    var select = driver.FindElementsByXPath("//input[@class='select-dropdown']")[0];
    IJavaScriptExecutor js = driver as IJavaScriptExecutor;
    //Remove "readonly" js.ExecuteScript("arguments[0].removeAttribute('readonly','readonly')", select); select.Clear(); select.SendKeys("100");
    //Add "readonly" back js.ExecuteScript("arguments[0].setAttribute('readonly','readonly')", select); select.Click();

    Hope this can help you.

    Best regards,

    Sean
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 5, 2020 6:02 AM
  • User-1330468790 posted

    Hi, hocamahdi99,

      

    I have tried to attach an alert function to this input and it worked well from my side.

    After checking the error message and the screenshot (which is not clear) you provided, it might be caused by two reasons:

    1.There is an element overlapping the 'Input' element.

    2.The Input element is not rendered

      

    Solution:

    1.Use javascript to find the element and trigger the click event.

    js.ExecuteScript("$(':input.select-dropdown').click()");
    js.ExecuteScript("arguments[0].click()", select);

    2.Use Actions for clicking the element

    Actions actions = new Actions(driver);
    actions.MoveToElement(select).Click().Perform();

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 6, 2020 12:06 PM

All replies

  • User-1330468790 posted

    Hi, hocamahdi99,

     

    Could you please specify what the purpose you want to achieve?

    "when i click the element it will show the result" is not very clear.

    Instead, it would be helpful to target the problem to illustrate the target like, "Click which element", "it will show what kind of result" "the result is from where, select element or input element?".

     

    Although I am not sure about the target, I tried your code and found that there was two mistakes indeed.

    • The Code below will throw "ElementNotInteractableException"

    driver.FindElementsByXPath("//ul[@class='dropdown-content select-dropdown']")[0].Click();
    

    Reason:

    The returned element is as below which is obviously not able to be interactive since the css property 'display' is set to none. The element is hidden from the view, althought exists in the DOM.

    <ul id="select-options-49a1af1e-da84-b5fc-3c3f-ce38dc701d6a" class="dropdown-content select-dropdown" style="width: 382px; ; top: 0px; left: 0px; opacity: 1; display: none;'>
      <li class="active">
        <span>10</span>
      </li>
      <li class="">
        <span>25</span>
      </li>
      <li class="">
        <span>50</span>
      </li>
      <li class="">
        <span>100</span>
      </li>
    </ul>

    Solution:

    You can use IJavaScriptExecutor to change the style.

    var select = driver.FindElementsByXPath("//ul[@class='dropdown-content select-dropdown']")[0];
    IJavaScriptExecutor js = driver as IJavaScriptExecutor;
    js.ExecuteScript("arguments[0].style='display: block;'", select);
    //clicked, but no effect. You can imagine that you click an unordered list of a html website except that you bind a js function on that. select.Click();

     

    • The code below will not be working 
    var select = driver.FindElementsByXPath("//input[@class='select-dropdown']")[0];
    select.SendKeys("100");
    select.Click();

    Reason:

    The input element is already set as 'readonly'.

    As you can see, the content of the element "var select" is: 

    <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-49a1af1e-da84-b5fc-3c3f-ce38dc701d6a" value="10" wtx-context="444F3577-1027-491E-8B1A-08A1D49E2E7E" />

    So, it will not accept the value "100" which you sent by the code "select.SendKeys("100");"

    Solution:

    IJavaScriptExecutor can be applied on the element to remove the attribute "readonly" and then assign it with value "100". After that, if you want to keep the input element non-editable, you can just setAttribute of the element.

    var select = driver.FindElementsByXPath("//input[@class='select-dropdown']")[0];
    IJavaScriptExecutor js = driver as IJavaScriptExecutor;
    //Remove "readonly" js.ExecuteScript("arguments[0].removeAttribute('readonly','readonly')", select); select.Clear(); select.SendKeys("100");
    //Add "readonly" back js.ExecuteScript("arguments[0].setAttribute('readonly','readonly')", select); select.Click();

    Hope this can help you.

    Best regards,

    Sean
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 5, 2020 6:02 AM
  • User2131089582 posted

    Thanks for you answer, i'm appreciate with your good explanation, i tried with your solution

    var select = driver.FindElementsByXPath("//input[@class='select-dropdown']")[0];
    IJavaScriptExecutor js = driver as IJavaScriptExecutor;
    //Remove "readonly"
    js.ExecuteScript("arguments[0].removeAttribute('readonly','readonly')", select);
    select.Clear();
    select.SendKeys("100");
    //Add "readonly" back
    js.ExecuteScript("arguments[0].setAttribute('readonly','readonly')", select);
    select.Click();

    it almost success but it won't click 
    https://imgur.com/NH91F91

    https://imgur.com/AZmkwMR

    Thursday, March 5, 2020 1:25 PM
  • User-1330468790 posted

    Hi, hocamahdi99,

      

    I have tried to attach an alert function to this input and it worked well from my side.

    After checking the error message and the screenshot (which is not clear) you provided, it might be caused by two reasons:

    1.There is an element overlapping the 'Input' element.

    2.The Input element is not rendered

      

    Solution:

    1.Use javascript to find the element and trigger the click event.

    js.ExecuteScript("$(':input.select-dropdown').click()");
    js.ExecuteScript("arguments[0].click()", select);

    2.Use Actions for clicking the element

    Actions actions = new Actions(driver);
    actions.MoveToElement(select).Click().Perform();

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 6, 2020 12:06 PM