Cant un-hide css element to choose an element value with selenium - javascript

Im automating something on some website and I have a dropdown menu that is customise, now the developer that developed it set the original dropdown to be hidden, it looks like this:
now I want to choose some value of the dropdown with selenium but I cant find the element since its hidden, so I want to use js to uncheck the hidden and choose a value.
this is my html block where you can see the web elements:

Remove the jcf-hidden class (or remove the class attribute completely) via "execute script".
Example in Python:
elm = driver.find_element_by_id("company_stage")
driver.execute_script("arguments[0].removeAttribute('class');", elm)
In ScalaTest, it should be:
val ele: Option[Element] = find(id("company_stage"))
executeScript("arguments[0].removeAttribute('class');", ele)

Related

How to handle dynamic Elements in Dropdown in Java Selenium

I want to select a values in dropdown. and my problem is. I can't locate the specific element as they are dynamic and they will just appear in the inspect elements Once I choose a value in dropdown.
and I can't right click and inspect element the values in dropdown when the dropdown is open as it will close as soon as I left click.
I also can't use "Select" class as they are embedded in "div" html element
I also can't use "SendKeys" as the dropdown don't have textfield
Here are the codes I tried to use.
//try #1
driver.findElement(dropDown).click();
JavascriptExecutor js = (JavascriptExecutor)driver;
((WebElement) js.executeScript("document.getElementById('dropwDownID).value='VALUE I WANT'")).click();
note: when I tried this script("document.getElementById('dropwDownID).value='VALUE I WANT') in the console, it returns the value I want.
//try #2
driver.findElement(dropDown).click();
WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.elementToBeClickable(this_Element_Only_Appear_When_I_Choose_A_Value));
Please see attached picture

Selenium Node JS, can't click on specific element with xpath

I am trying to make a free open source script to buy shoes, exactly in this page: https://www.zalando.es/nike-sportswear-nike-waffle-one-zapatillas-summit-whitewhite-black-orange-ni112o0jj-a11.html .
I can get elements and click them as usual with driver module
driver.findElement(By.id('uc-btn-accept-banner')).click();
Error happens when I try to pick a foot size, first opening the size selector with
driver.findElement(By.id('picker-trigger')).click(); //THIS ONE WORKS.
driver.findElement(By.xpath('/html/body/div[7]/div/div[3]/div/form/div/div[1]/div/label/span')).click(); // THIS ONE DOESN'T.
I tried clicking some elements by xpath on the site and all of them are working but the foot size.
Can someone help me picking the foot size? I don't mind if it uses other method.
You are using a wrong selector there.
After opening the drop down menu you can select any size by locator like this:
//input[#name="size-picker"]/..//span[text()="39"]
It will be like this:
driver.findElement(By.id('picker-trigger')).click();
driver.findElement(By.xpath('//input[#name="size-picker"]/..//span[text()="39"]')).click();
Just update the value of desired size in the XPath expression
It it a drop down: (But we can not use Select class from Selenium since the drop down is not built using Select option tag)
Click on a drop down using this xpath :
//span[text()='Elige una talla']/..
and click like this :
driver.findElement(By.xpath("//span[text()='Elige una talla']/..")).click();
Now you would see a list of foot size :
Select them with the below xpath :
//form[#name='size-picker-form']/descendant::label[contains(#for, 'size-picker')][3]
This will select 3rd item from the shown list. You have to change [3] to other number incase you would like to select different size.
driver.findElement(By.xpath("//form[#name='size-picker-form']/descendant::label[contains(#for, 'size-picker')][3]")).click();
This should select 40 size

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

Chosen jQuery framework select option from dropdown with Javascript

I'm using the Chosen jQuery framework with a basic select statement.
I use the following line of code to open the dropdown:
$('#<id-of-your-select>_chzn').trigger('mousedown');
That statement opens the Chosen dropdown.
Then I want to select the top item which is a li element with the id: pt_chzn_o_1.
I've tried the following, but none of them will select the option.
$('#pt_chzn_o_1').trigger('mousedown');
$('#pt_chzn_o_1').click();
How do you select an option using Javascript/jQuery as if I clicked the top option with my mouse.
Why don't you just change the selected index instead? It seems like you are trying to achieve the same thing but go about it in the "human way" as oppose to the "programming way", like so:
$('#<id-of-your-select>').val('value-of-pt_chzn_o_1').trigger('chosen:updated');
Make sure to change both the jQuery selector and the value to match your circumstances.
This is what ended up working for me:
The initial click triggers an event to show additional fields(optional, only needed in my specific case).
$("#<id-of-your-select>_chzn").trigger("click")
This statement opens the Chosen dropdown:
$("#<id-of-your-select>_chzn").trigger("mousedown")
Execute this statement on the li element id of the chosen dropdown element you want to choose.
$("#pt_chzn_o_1").trigger("mouseup")

How to display title on html dropdown items for non-javascript browsers?

I am using ASP.Net MVC 2.0 with C#.
I have a html dropdown control on my page which may contain items with longer text. The page design does not allow me to increase the drop down width so that I can display entire text for each item. To overcome this, I am trying to display a title on mouse over of each item so that use can see the item text. This is achievable using javasctipt and I am happy with the solution. But what if the client has disabled javascript on his browser? Is there any way we can display title for each drop down item without depending on javascript? May be using the "title" attrbute of option or something simillar? I am targeting my code to work for IE8 clients.
Following is my current implementation. I have called a javascript function on mousemove. This loops through drop down options and assigns the selected value to the title attribute of selected option.
<%: Html.DropDownListFor(model => model.SelectedTeamId, new SelectList((IEnumerable)""), "Please Select", new { #class = "wid140", id = "QueryTeam", onmousemove ="ShowSelectedText(this);"})%>

Categories