select element span in unordered list or ul in dropdown select values with selenium[Answered] RSS

• • Reply
  hocamahdi99

  Member

  8 Points

  85 Posts

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

  Mar 04, 2020 04:50 PM|hocamahdi99|LINK

   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; position: absolute; 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

• • Reply
  Sean Fang

  Contributor

  2840 Points

  840 Posts

  Re: select element span in unordered list or ul in dropdown select values with selenium

  Mar 05, 2020 06:02 AM|Sean Fang|LINK

  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; position: absolute; 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
   

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  hocamahdi99

  Member

  8 Points

  85 Posts

  Re: select element span in unordered list or ul in dropdown select values with selenium

  Mar 05, 2020 01:25 PM|hocamahdi99|LINK

  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

• • Reply
  Sean Fang

  Contributor

  2840 Points

  840 Posts

  Re: select element span in unordered list or ul in dropdown select values with selenium

  Mar 06, 2020 12:06 PM|Sean Fang|LINK

  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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.