I'm trying to inspect a select_list element with options that have a custom attribute. Like in the following example, each option has a "title"
<select id="mySelectList">
<option title="title1" value="1">Title 1</option>
<option title="title2" value="2">Title 2</option>
<option title="title3" value="3">Title 3</option>
</select>
I need access to the options' title, but each option doesn't really respond to the attribute_value method. Is it possible to retrieve values of a custom attribute for options in Watir?
I'm using watir and IE
For the HTML you have provided, this worked for me, using watir-webdriver and Firefox:
browser.option(:text => "Title 3").attribute_value "title"
=> "title3"
If you need all of them:
browser.options.each {|option| puts option.attribute_value "title" }
outputs
title1
title2
title3
Using watir gem (2.0.2) and Internet Explorer 9:
browser.element(:css => "option").attribute_value "title"
=> "title1"
or
browser.select_list(:id => "mySelectList").elements.each {|option| puts option.attribute_value "title" }
outputs
title1
title2
title3
Related
I am wondering if I can check if an element has a certain attribute after locating it, and if it has that attribute, avoid it and get a new one.
Here is the html I am using:
<option
value="19438389624960">
1
</option>
<option
disabled="disabled"
value="19438389657728">
2
</option>
<option
value="19438389690496">
3
</option>
<option
disabled="disabled"
value="19438389723264">
4
</option>
As you can see, 2 of the 4 options have a disabled="disabled" attribute that I want to avoid, is there anyway I can do that ?
I currently have this code that chooses a random value out of all the options:
var list = [];
$('select[name=id]').find('option').each(function (index, element) {
list.push($(element).attr('value'));
});
const randomVar = list[Math.random() * list.length | 0]
variant = randomVar
But this code still will choose the ones that have the disabled="disabled" attr
You can use this:
$('select[name=id]').find('option[disabled!="disabled"]').each(...)
to skip the options that have disabled=disabled. Then, you will be picking a random one from only the non-disabled items. Since cheerio uses the same selector engine as jQuery, you can find this kind of stuff in the relevant page of the jQuery doc.
:not is a regular css pseudo, which means it works everywhere:
$('option:not([disabled="disabled"])')
or probably just:
$('option:not([disabled])')
I have been researching for a way to change the element of a web page and have yet found (or understood) how to do it.
In the above element I want to be able to change numerical value of to another number that is represented by a placeholder (i.e. nod for number of draws. Or do I have to do it manually every time I run the program?).
My OS is Ubunt 18.04 and using latest python, selenium and pycharm IDE.
These are just a couple of the websites I have visited and I have visited a lot.
https://www.youtube.com/watch?v=tdgAIDR9snc
http://allselenium.info/javascript-using-python-selenium-webdriver/
Set value of input instead of sendKeys() - selenium webdriver nodejs
WEBELEMENT:
<select name="ctl00$MainContent$ddlRange" id="ctl00_MainContent_ddlRange">
<option selected="selected" value="1"> Single Draw</option>
<option value="2"> 2 Consecutive</option>
<option value="3"> 3 Consecutive</option>
<option value="4"> 4 Consecutive</option>
<option value="5"> 5 Consecutive</option>
<option value="10">10 Consecutive</option>
<option value="20">20 Consecutive</option>
</select>
And my basic code is:
from Selenium import WebDriver
browser = webdriver.Chrome('/usr/bin/chromedriver')
page=browser.get("whatever address of whatever webpage interested in")
elem=browser.find_element_by_css_selector("#ctl00_MainContent_ddlRange")
browser.execute_script("arguments[0].setAttribute('<option selected="selected" value="20">','20 Consecutive</option>')", elem)
My goal is to change the value number in the first part of the option tag from:
<option selected="selected" value="1"> Single Draw</option>
to this:
<option selected="selected" value="44"> Single Draw</option>
In the execute_script I am always getting end of statement expected after the last ).
I am also getting errors of ',' or ')' expected in the areas of "selected" and "20"
Also the css and xpath selectors to these are:
for <select name="ctl00$MainContent$ddlRange" id="ctl00_MainContent_ddlRange">
selector = #ctl00_MainContent_ddlRange
xpath = //*[#id="ctl00_MainContent_ddlRange"]
for <option>
selector = #ctl00_MainContent_ddlRange > option:nth-child(1) (note that nth-child() can be 1 - 7)
xpath = //*[#id="ctl00_MainContent_ddlRange"]/option[1] (note that option[] can also be 1 - 7)
I have the webpage saved to disc and I can go into the html and change that one number then save the file and when I click on it works. I just want to be able to automate it.
Any help is much appreciated
Idzireit
EDIT:
So far this is the closest I have come to actually inserting the value I want. The new code is as follows:
browser.execute_script("""arguments[0].setAttribute
('select', '<option selected="selected" value="nod"> &snbsp;draws </option>')""", get_draws)
Results in this:
<option value="20" select="<option selected="selected" value="nod"> &snbsp;draws </option>">20 Consecutive</option>
The javascript I am trying to inject is getting injected in the middle of the element I am trying to modify (notice the option sequence repeats in the middle of the first bracket).
How can I correct this to make it look like this:
<option selected="selected" value="a number I am trying to change"> Draw<\option>
EDIT SOLVED:
Figured out how to change the value of an element. I had to change the search method of that element to this:
get_draws = browser.find_element_by_tag_name('option')
Then my next line was pretty simple:
browser.execute_script("""arguments[0].setAttribute('value', '100')""", get_draws)
For your second question, parametrizing the int value, try the following:
var = 100
js = f"arguments[0].setAttribute('value', '{var}')"
browser.execute_script(js, get_draws)
Just pass the value you want to the var variable.
I would like to apply the grouped text in listbox, looks like this
to
this is listbox in the resources page.
I tried to add the ‘optgroup’ tag into
'manager\templates\default\element\tv\renders\input\listbox-multiple.tpl'
but still not working, the 'optgroup’ tag will be ignored.
I unterstand that I should ‘Adding a Custom TV Input Type’ but the document didn’t include the details about grouping input values.
That is easy ;)
your listbox should contain a #CHUNK yourchunk
In that chunk you can perform nearly everything, that genereates a list, like:
<select name="something" id="something" >
<option value="" selected disabled>choose</option>
<optgroup label="Headline 01">
[[pdoResources? &parents=`0` &where=`{"template:=":40` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
<optgroup label="Headline 02">
[[pdoResources? &parents=`0` &where=`{"template:=":41` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
<optgroup label="Headline 03">
[[pdoResources? &parents=`0` &where=`{"pagetitle:=":"something"` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
I'm a little bit confused with Angular and ng-options.
I have a simple array and I want to init a select with it. But, I want that options value = label.
script.js
$scope.options = ['var1', 'var2', 'var3'];
html
<select ng-model="myselect" ng-options="o for o in options"></select>
What I get:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
What I want:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
So I tried:
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(But it didn’t work.)
Edit:
My form is submitted externally, which is why I need 'var1' as the value instead of 0.
You actually had it correct in your third attempt.
<select ng-model="myselect" ng-options="o as o for o in options"></select>
See a working example here:
http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model.
As a result, the HTML will look incorrect but the model will still be set properly when choosing a value. (i.e. AngularJS will translate '0' back to 'var1')
The solution by Epokk also works, however if you're loading data asynchronously you might find it doesn't always update correctly. Using ngOptions will correctly refresh when the scope changes.
You can use ng-repeat with option like this:
<form>
<select ng-model="yourSelect"
ng-options="option as option for option in ['var1', 'var2', 'var3']"
ng-init="yourSelect='var1'"></select>
<input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>
When you submit your form you can get value of input hidden.
DEMO
ng-selected
ng-repeat
If you setup your select like the following:
<select ng-model="myselect" ng-options="b for b in options track by b"></select>
you will get:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
working fiddle: http://jsfiddle.net/x8kCZ/15/
you could use something like
<select ng-model="myselect">
<option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
{{o}}
</option>
</select>
using ng-selected you preselect the option in case myselect was prefilled.
I prefer this method over ng-options anyway, as ng-options only works with arrays. ng-repeat also works with json-like objects.
<select ng-model="option" ng-options="o for o in options">
$scope.option will be equal to 'var1' after change, even you see value="0" in generated html
plunker
i tried to select a value out of a combo box via groovy(geb).
the html code is:
<select id="entity-list-form:statusSearchBtn" name="entity-list-form:statusSearchBtn" size="1" style="width: 200px;">
<option value="">alle</option>
<option value="REGISTERED" selected="selected">Wartet auf Bestätigung</option>
<option value="REJECTED">Registrierung zurückgewiesen</option>
<option value="APPROVED">Registrierung angenommen</option>
<option value="UNSUBSCRIBED">Abgemeldet</option>
</select>
i tried to access these elements via
$("entity-list-form").statusSearchBtn = "alle"
or
$("entity-list-form").statusSearchBtn.value() == "alle"
a different approach was in the page siet to add
statusSearchBtn { $('select[name$="entity-list-form:statusSearchBtn"]') }
and also the case with the name only like entity-list-form. in this caes i tried it like
statusSearchBtn = "alle"
or
statusSearchBtn.value() == "alle"
the last one end without any errors, but didnt change the selected value to "alle".
the former one ended in No such property: statusSearchBtn for class: geb.navigator.EmptyNavigator.
i greatly apprichiate any advice,
I think:
$("select", name : "entity-list-form:statusSearchBtn").value('alle')
$("select", name : "entity-list-form:statusSearchBtn").value() = 'alle'