unable to locate a react select drop down

[Muhammad Asad]

I am trying to locate an element in the react select drop down. The problem I am facing is that drop down elements are not showing in HTML. When i click on the drop down, a class named "css-css-2613qy-menu" shows in the HTML but as soon as i click on the HTML part or select an element manually from the drop down this class dis-appears from the HTML and all the elements of the drop down are in this div. So when selenium goes to locate it we get exception that "No such element exists". I am providing the HTML. Also attaching the image. 

<div class=" css-2b097c-container" id="selectjobs"><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span><div class=" css-yk16xz-control"><div class=" css-1hwfws3"><div class=" css-1uccc91-singleValue">Select</div><div class="css-1g6gooi"><div class="" style="display: inline-block;"><input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;"><div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Raleway, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div></div></div></div><div class=" css-1wy0on6"><span class=" css-1okebmr-indicatorSeparator"></span><div class=" css-tlfecz-indicatorContainer" aria-hidden="true"><svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg></div></div></div><input name="jobs" type="hidden" value="Select"></div>

[ralph van der horst]

Not sure if you have enough knowledge on this topic but we created an article regarding dynamic elements on my learnportal : https://learnautomatedtesting.com/blog/understanding_dynamic_elements_dom/

But it can also be something more specific and need more details

On Thu, Feb 22, 2024 at 3:26 PM Muhammad Asad <muhamm...@codingkey.com> wrote:

I am trying to locate an element in the react select drop down. The problem I am facing is that drop down elements are not showing in HTML. When i click on the drop down, a class named "css-css-2613qy-menu" shows in the HTML but as soon as i click on the HTML part or select an element manually from the drop down this class dis-appears from the HTML and all the elements of the drop down are in this div. So when selenium goes to locate it we get exception that "No such element exists". I am providing the HTML. Also attaching the image. 

<div class=" css-2b097c-container" id="selectjobs"><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span><div class=" css-yk16xz-control"><div class=" css-1hwfws3"><div class=" css-1uccc91-singleValue">Select</div><div class="css-1g6gooi"><div class="" style="display: inline-block;"><input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;"><div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Raleway, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div></div></div></div><div class=" css-1wy0on6"><span class=" css-1okebmr-indicatorSeparator"></span><div class=" css-tlfecz-indicatorContainer" aria-hidden="true"><svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg></div></div></div><input name="jobs" type="hidden" value="Select"></div>

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/fda6e253-d742-4eb0-916b-c5975001bcd7n%40googlegroups.com.