We Keep Coding

How to fetch the locator for the dynamic generated dropdown value?

I am writing the cypress test. I can see the developer has used the below script to select the dropdown list. They didnt use the select option for drop down. They used the div for dropdown.
So that you dont see the options are not getting displayed in the script
div class=" css-yk16xz-control">
<div class=" css-g1d714-ValueContainer">
<input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>
I have tried this cy.get(".css-g1d714-ValueContainer").click() in my test and it's getting clicked and it displays the dropdown. Now I have to select anyone value from the drop down. I dont see any options are displaying there when I do inspect in my browser.
By manualy I can select any one value and I click it and then I can see selected value is getting displayed in inspect browser.
<div class=" css-yk16xz-control">
<div class=" css-g1d714-ValueContainer">
<div class=" css-1uccc91-singleValue">Start</div>
<input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>
I dont see the 'start' in the beginning itself. So I tried these two code in cypress
Firstone
cy.get(".css-g1d714-ValueContainer").click()
cy.get(" css-1uccc91-singleValue").invoke("Start")
This also didnt work
Secondone
cy.get(".css-g1d714-ValueContainer").next(" css-1uccc91-singleValue","Start")
This also didnt work.
I wanted to know how to write the locator for selecting the dropdown value?

You can directly use .contains() once the dropdown is in the opened state to select the option. Add {matchCase: false} to disable the check for case sensitivity.
cy.get('.css-g1d714-ValueContainer').trigger("mousedown")
cy.get('.css-g1d714-ValueContainer').trigger("mouseup")
cy.contains('Start', { matchCase: false, timeout: 6000 }).click()

How to Select a dropdown list in a javascrip site using selenium in python3?

I am stuck in the following html code taken from a site that uses Javascript. What I want is to select the item "Short_Budget_Report" in Selenium using Select moduele. The html code is as follows:
<input id="WD51" ct="CB" lsdata="{1:'20ex',8:'WD52',9:'2347',11:'Short_Budget_Report',14:'Load\x20View',18:'View',44:false,48:'WD51\x2dtlbl'}" lsevents="{Select:[{ResponseData:'delta',ClientAction:'submit'},{}]}" type="text" autocomplete="off" tabindex="0" ti="0" title="Load View" class="lsField__input urEdf2TxtEnbl lsEdfLeftBrdRadius lsEdf3TxtHlpBtn urEdfVAlign urBorderBox lsControl--explicitwidth" readonly="" value="Short_Budget_Report" style="vertical-align:top;width:20ex;">
What I have tried:
dropdown_id = driver.find_element_by_xpath('//*[#id="WD51"]')
dropdown = Select(dropdown_id)
dropdown.select_by_value('Short_Budget_Report')
This gives the following error:
raise UnexpectedTagNameException(
selenium.common.exceptions.UnexpectedTagNameException: Message: Select only works on <select> elements, not on <input>

You can simply use send_keys() function to select particular option in dropdown list.
First locate the element of dropdown list by any of find_element() function
use send_keys() function on that element to select any value from list right away
In short, doing it in following way should get done what you need:
driver.find_element_by_id('WD51').send_keys('Short_Budget_Report')

jQuery: Make a text input box selected

You know how when you open a new tab, you can start typing without having to select the search bar? I've got a text input box in HTML, and I'd like to be able to open my webpage and have that text input box immediately typeable, for lack of a better term. Say my input box looks like this:
<input type="text" class="myInput" value="add an item"></input>
I'm using HTML, CSS and JavaScript/jQuery right now. What code can I add to make sure the text input box is immediately typeable?

Use autofocus:
<input type="text" class="myInput" value="add an item" autofocus/>
From the input documentation on MDN:
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the DOMContentLoaded event.

<input type="text" class="myInput" value="add an item" autofocus>
https://www.w3schools.com/TAgs/att_input_autofocus.asp

in html use autofocus, in jquery use $('.myInput').focus()

scrollbar for the dropdown list

I want to show scroll bar for the drop down list so that the user can select any one item from the available list. The drop down menu should show 5 items and a scroll bar to drag and see remaining items in the list when the user clicks on the drop down list. To show the drop down list i am using struts html tag library. Below is the struts html code to show drop down list.
<html:select name="myForm" property="city" styleId="city" tabindex="1" title="Please Select City">
<html:options property="city" labelProperty="city"/>
</html:select>
Do i need to write javascript function to achieve scroll bar for the <html:options>. I cannot use jQuery as my application does not support jQuery libraries. Please suggest how can i achieve this using javascript function.

Simply assign a class to option list and add overflow equal to auto. I simply added with style.
<html:select name="myForm" property="city" styleId="city" tabindex="1" title="Please Select City">

How do I make a drop down list selection update an image on a web page?

On the site http://www.gofundme.com/sign-up/ they have the cool ability to select your currency underneath where you enter an amount. When you change the currency it changes the symbol beside the amount you type in.
I'd like to do something similar with my website but don't have much of a clue about how to even go about it. Can anyone point me in the right direction?
Go easy on me guys; I've done a bit of website making before but never anything too spectacular.

The code on that site is all client-side, and is fairly simple.
You click the link, it invokes Javascript that shows the selection popup div.
When you select an item on the selection popup div, it also calls Javascript. That javascript modifies:
The original div's label text for the amount field (i.e. the big €)
The text below that describes your currently selected currency type (the one that pops up the div)
The data in the hidden form field, with the selected currency type
...and closes the popup div.
Edit: Apparently you also need the jQuery library in order to use the code in my answer :) You could substitute your own Javascript code, and get identical results, but it wouldn't look exactly like the code below.
Here is the code, ripped straight off "view source":
The amount box:
<div class="amt_box bg_white">
<label class="currency-display">$</label>
<input type="text" name="Funds[goalamount]" value="" class="big-field"
tabindex="1" />
</div>
The link that opens the popup div:
<h4>Display: US Dollars</h4>
The popup div:
<div class="currency currency-select-div" style="position:absolute; display:none;margin-left:45px;">
<ul>
<li>$ USD Dollar</li>
<li>$ CAD Dollar</li>
<li>$ AUD Dollar</li>
<li>£ GBP Pound</li>
<li>€ EUR Euro</li>
</ul>
</div>
The hidden form field:
<input type="hidden" id="currencyfield" value="USD" name="Organizations[currencycode]" />
The Javascript (jQuery) code that binds it all together:
$('.currency-select').click(function() {
$('.currency-select-div').show();
return false;
});
$('.currency-item').click(function() {
$('.currency-select-div').hide();
$('.currency-display').text($(this).attr('title'));
$('.currency-select').text($(this).text());
$('#currencyfield').val($(this).attr('code'));

You're going to want to uniquely identify the text that you're trying to change with your drop-down list first.
<span id="currencySymbol">$</span>
Then you're going to want to create a drop-down list that has the values you want.
<select id="currencySelect">
<option value="$">Dollars</option>
<option value="£">Pounds</option>
<option value="€">Euros</option>
</select>
Then you need to use JavaScript to change the value of the text based on the value of the drop-down.
document.getElementById('currencySelect').onchange = function(){
document.getElementById('currencySymbol').innerHTML = this.value;
}