I'm using Selenium with Mink to automatically register in a number of our websites.
To do that you have to select your birth date from three select inputs. I just use select-option with the xpath of the select field and the value of the option I want.
It works fine in Firefox and Chrome but in Safari, with some of the pages it works and with others nothing happens. There's no exception or anything, it just doesn't do anything with the select fields and then the rest of the test fails because the registration didn't work.
The CSS of the select fields is like this:
<select name="Signup:Birthday[day]" size="1" class=" date_day" id="Birthday">
<option value="" selected="selected">---</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
.......
</select>
I am using xpath //*[#id="Birthday"] and option 3 but in Safari it just does nothing.
public function selectState($option, $name) {
$page = $this->getSession()->getPage();
$selectElement = $page->find('xpath', '//*[#id="Birthday"]');
$selectElement->selectOption($option);
}
Any ideas?
You can try:
JavascriptExecutorUtils
.setSelectedOptionByDisplayValue(driver, webSeleniumElement.getWebElement(), "texte");
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("arguments[0].onchange();", webSeleniumElement.getWebElement());
Related
I have a form with code similar to:
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
Which produces a dropdown like this:
However I would like to change the css color of the disabled selected entry (what the user sees when they load the page - the picture above). Is this possible, and if so what would the proper CSS call be?
I have looked at similar posts for IE here that mention:
select option [disabled] { background-color: blue; }
but this does not work for me (I am using Google Chrome).
To clarify - I would like to change the CSS before the user clicks and opens the dropdown box.
Your CSS must be
select option[disabled] { background-color: blue; }
Without the space after option. It should work better this way.
With the space, it applies to descendants of the option.
use below css for disabled select option
select option:disabled {
background-color: blue;
}
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
I need to target "selected" attribute in drop down menu so I can compare if item marked as selected is the item what I need to have selected.
Can you help me with methods, what I can use for this ?
<option value="Title" selected>Title</option>
<option value="First Name">First Name</option>
<option value="Middle Name">Middle Name</option>
Thank you :)
I've found an answer finally -
$crawler->filter('option[selected]')->attr('value');
works for me :)
Maybe something like that (not tested)
$target = $crawler->filterXPath('//.../option/#selected')->text();
or
$target = $crawler->filterXPath('//.../option')->attr('selected')->text();
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
I currently have a drop down navigation that opens a modal lightbox window.
I would like to not open the the window if there in an option with no URL selected which is the first default option.
I have tried a number of techniques such as:
- returning false on the onsubmit event of the form.
- Attempting to bind a click event to the goURL a href link using jQuery that would then either
1) call event.preventDefault or 2)stop propagation events.
- coding an onclick event to the goURL a href link.
Below is the html code
<h3>Request a <span>Quote</span></h3>
<form action="#">
<div class="select">
<select id="URL" name="URL" onchange="$('#goLink').attr('href', $('#URL').val());">
<option value="">- Choose a Link -</option>
<option value="/node/1/lightbox2">Link 1</option>
<option value="/node/2/lightbox2">Link 2</option>
<option value="/node/3/lightbox2">Link 3</option>
<option value="/node/4/lightbox2">Link 4</option>
<option class="last" value="/node/5/lightbox2">Link 5</option>
</select>
</div>
</form>
GO
You have to remove the rel attribute if you need a simple link without lightbox effect. The href attribute does not affect it.
Here is a sample of a jQuery code (not necessary the perfect one but just as an example):
$("#url").change(function(){
var selected = $('url :selected'), // Get the selected option
selectedVal = selected.val(); // Get the selected option value
if (selectedValue == "") {
$('#goLink').removeAttr('rel'); // Remove the rel if the value is empty
} else {
$("#goLink").attr('href',selectedVal).attr('rel','lightframe'); // Add rel=lightframe attribute and the href
}
});
I have been searching the web for a result all day to solve my question...
I want a list of options, that would each link to a different image. However, instead of the image opening in a new window, I want the image to open in a lightbox on the same page (lightbox evolution for wordpress is the plugin I am using).
I have tried using onclick in input field, and the lightbox will open (if class="lightbox") but no image loads.
I don't know if I need to add a function that will allow the input to recognize which option is selected so that when the input button is clicked, that that specific image opens in a lightbox.
And if I do need a function, I don't know where to add the function... onclick? Somewhere in the option tag, or select tag?
<form>
<select>
<option value="linkimage1.jpg">image 1</option>
<option value="linkimage2.jpg">image 2</option>
<option value="linkimage3.jpg">image 3</option>
<input type="button" value="submit" />
</select>
</form>
Any help would be appreciated, even if it's to a good link that could explain how I could create a function and add it to my code, and then use a solution to call the function into my dropdown.
Thanks
If using iLightBox http://ilightbox.net/ you can do that like this:
<select id="selectImage">
<option>Select Image</option>
<option value="linkimage1.jpg">image 1</option>
<option value="linkimage2.jpg">image 2</option>
<option value="linkimage3.jpg">image 3</option>
</select>
<script>
jQuery(document).ready(function($){
$('select#selectImage').change(function(){
var $this = $(this),
url = $this.val();
$.iLightBox(url);
});
});
</script>