I'm trying to test a registration form with Selenium IDE, but am having trouble with select elements from the Chosen library:
http://harvesthq.github.io/chosen/
I wonder if you can help me with the commands to select an option (could be any option by the way). I couldn't get past opening the dropdown with a simple mouseDown. Here's a sample webpage with both a single and multi select (download source files from the repository above.
<html>
<head>
<link rel="stylesheet" href="chosen/public/chosen.min.css">
<link rel="stylesheet" href="chosen/public/chosen.jquery.min.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="chosen/public/chosen.jquery.min.js"></script>
</head>
<body>
<select multiple class="chzn-select" style="width: 150px;">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
<br><br>
<select class="chzn-select" style="width: 150px;">
<option value="Test A">Test A</option>
<option value="Test B">Test B</option>
<option value="Test C">Test C</option>
</select>
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
</body>
</html>
Ok I did manage to crack it myself and it was as simple as:
Command: clickAt
Target: css=#id_country_chzn_o_1
(chooses the first item on a list of countries, use Firebug to find out what your ids are called)
Following steps solves this issue:
Step 01.
Command: clickAt
Target: id=iNationality_chosen
Step 02.
Command: clickAt
Target: css=div[id='iNationality_chosen'] div ul li:nth-child(2)
Note 01: iNationality_chosen here you can replace the id with your element ID
Note 02: li:nth-child(2) here you can provide any number that you a wish to select. 2 will be selecting the second child (option list).
I have same problem before. The solution is pretty simple and normal. This is the best practice for Select command in Selenium IDE. Here it is:
Command : Choose select as your Command
Target : Select your element ID you want to point at
Value : Set your value using this format index=1 // this is the most important thing, and then you can change the number to your prefered number
For example:
Command: select
Target: id=province
Value: index=2
Good luck!
I had a similar issue using selenium api and robotframework. The element wasn't clickable because chosen adds a display:none. I solved it by executing a jquery javascript which removes the style attribute.
In robotframework style:
Execute Javascript $("#id").removeAttr("style");
Where id is the id of the select.
Related
I upgraded the jquery library from 1.4.2 to 3.4.0 Have a drop down. .val() is returning the selected value as expected, but .text() is returning is entire object. Need to know how to get the displayed text for the selected option.
$('#properties').change(function(){
var selected_id=$('#properties option:selected').val();
var selected_value=$('#properties option:selected').text();
$('#idresult').text(selected_id);
$('#textresult').text(selected_value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select id="properties" style="width: 100%; height: 80px;" size="6">
<option value="1">Country</option>
<option value="3">City</option>
<option value="4">Metro Area (Only U.S.)</option>
<option value="2">State/Province</option>
<option value="5">Zip Code (Only U.S.)</option>
</select>
<div id="textresult"></div>
<div id="idresult"</div>
it is working fine when I tried it on jsfiddle and stackoverflow code snippet. But in my code, it is not giving the below values. Any ideas what might have gone wrong. It works fine when I switch back jquery to 1.4.2
selected_id is 1 as expected.
selected_value is k.fn.init [option, prevObject: k.fn.init(1)].
Expecting it to be "Country"
In old school server side languages like PHP or ASPX, HTML elements can be sent to the browser or not based on the user's authorization. For example, in PHP we could:
<?php if (user->isInRole('Admin')) { ?>
<select id="customerList">
<option value="1">Customer 1</option>
<option value="2">Customer 2</option>
</select>
<?php } ?>
How is this done with Aurelia? Do we still need to use a server-side language so that the element is never sent to the browser?
Pretty similar actually. You could use if.bind="". Which basically removes it from the DOM if the condition isn't met. So for your example, you would have a user object that holds the current state of a user, and pass that into your function. So you'd have something like this:
<select if.bind="isAdmin(userObj.Role)" id="customerList">
<option value="1">Customer 1</option>
<option value="2">Customer 2</option>
</select>
So if that function returns true, then the select tag will be displayed. If it returns false, it will be removed from the DOM.
My AUT have different tabs to test and validate various WebElements, having almost identical properties, present on these tabs.
I need to validate a dropdown searchbox and validate the options listed in the dropdown.
My script can not locate this dropdown searh box, while the xpath work perfectly fine in firebug and can identify the search box.
The error displayed is:
Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"xpath","selector":"//div[#class='btn-group']/select[#id='selectBS']"}
My script is as below:
if(Driver.findElement(By.xpath("//div[#class='btn-group']/select[#id='selectBS']")).isDisplayed());
{
System.out.println(" drop down box is displayed on the View Bill screen");
}
The HTML is as below:
<div class="col-md-5 col-sm-6 col-xs-12">
<div class="row panel panel-default panel-heading">
<div class="col-sm-4 col-xs-12">
<div class="dropdown">
<div class="btn-group">
<select id="selectBS" class="ng-pristine ng-valid ng-touched" ng-change="getBasicSearchSelectedOption()" ng-model="basicSearchSelectedOption" ng-options="option.text for option in basicSearchoptions track by option.index">
<option value="0" selected="selected" label="Search For..">Search For..</option>
<option value="1" label="Invoice Group Number">Invoice Group Number</option>
<option value="2" label="Account Number">Account Number</option>
<option value="3" label="Account Name">Account Name</option>
<option value="4" label="Type">Type</option>
</select>
</div>
</div>
</div>
Please let me know what could be wrong, and why Selenium is not able to locate the element using xpath, while its working fine in xpath.
Also, please let me know if my xpath is not correct.
Check if is present, after that, do some action so the options are visible and check that an option is visible. If these work then it may be an issue checking isDisplayed for elements with type select.
I'm trying to use tooltipster jQuery plugin, but it doesn't work for or tag :
I've just tried this simple code :
<div id="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
--> div works fine
<select id="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
--> select doesn't work
<span id="my-tooltip">
test with span
</span>
--> span doesn't work
Could you please help me ?
here is my page
thank you all !
From looking at your code and site the issue is due to your multiple use of the id my-tooltip. IDs should only be used once to identify one node. A simple test can be done to prove this using jQuery, try running this on the page:
jQuery('#my-tooltip')
You'll see that only one node is returned, this is the one that has your initialised tooltip.
To fix this you'll need to change your nodes to use classes, i.e.
<div class="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
<select class="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
<span class="my-tooltip">test with span</span>
In your tooltipster setup, you'll want to have the following selector and options enabled:
jQuery('.my-tooltip').tooltipster({
// Original setup
content: jQuery('<span><img src="/../../../popup.png" /> <strong>This text is in bold case !</strong></span>')
// Additional options
multiple: true,
contentAsHTML: true
});
I hope this helps! :)
I am developing framework for selenium automation and I have got stuck to get the dropdown option's value using dropdown. I have dropdown option but now I want the value of same dropdown. Is it possible to get it in selenium.
For example:
Here is the Html tag:
<select id="periodId" name="period" style="display: none;">
<option value="week1">1</option>
<option value="week2">2</option>
<option value="week3">3</option>
<option value="week4">4</option>
<option value="week5">5</option>
<option value="week16">6</option>
</select>
Now in the framework which I have developed, I will pass the dropdown option '5', now I want the value of dropdown option '5'. Is that possible to get value 'week5' for dropdown option '5' using selenium?
Try this and let me know.
Select period = new Select(driver.findElement(By.id("periodId")));
period.selectByVisibleText("5");
String value = period.getFirstSelectedOption().getAttribute("value");