How do I click a hidden checkbox and/or change the value of a hidden element (from "2" to "1") using ruby and watir?
The html
[div class="spec"]
[span class="listheader"]Rechtsgebieden[/span]
[div]
[span class="legalarea" style="cursor:default" onmouseout="hlt(this,false);" onmouseover="hlt(this,true);" ondblclick="call(this, '.legalarea');" onclick="call(this, '.legalarea');"]
[table id="ctl00_cphMC_SS_eJuris_fltrJurLegalArea_cbt" border="0"] [/table]
[/div]
[span class="legalarea-root " style="cursor:default" onmouseout="hlt(this,false);" onmouseover="hlt(this,true);"]
[div id="ctl00_cphMC_SS_eJuris_fltrJurLegalArea_qwtA105qwausqwt_pu" class="CheckboxValuePopup" style="display:none;position:absolute;" name="ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA105qwausqwt-pu"] [/div]
[span class="legalarea-root " style="cursor:default" onmouseout="hlt(this,false);" onmouseover="hlt(this,true);"]
[input id="ctl00_cphMC_SS_eJuris_fltrJurLegalArea_qwtA109qwausqwt_cb_cv" type="hidden" value="2" name="ctl00$cphMC$SS$eJuris$fltrJurLegalArea$qwtA109qwausqwt$cb_cv"]
[img ondblclick="CheckBox(this, '.ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA109qwausqwt-pu', true);" onclick="CheckBox(this, '.ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA109qwausqwt-pu', true);" src="http://portal.rechtsorde.nl/img/2.png"]
[a class="search-filter-link" onclick="$('.ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA109qwausqwt-pu').dialog('open'); callerID=this;"]Handels- en ondernemingsrecht[/a]
The code that works to access the element/find the value:
browser.hidden(:name, /A111/)first.value
you can use the JS to change the value
browser.execute_script('document.getElementById("ctl00_cphMC_SS_eJuris_fltrJurLegalArea_qwtA109qwausqwt_cb_cv").value = "1"')
Watir does not allow you to change the values of hidden elements. Watir is attempting to simulate an actual user. Since users cannot change the hidden element, neither can Watir. Instead, you should be trying to interact with the element that call the function to change the hidden element.
The html provided seems a bit awkward (see comment on question), but my guess is that the hidden value changes when clicking the img that looks like a blank checkbox field.
You could try clicking the image that is a sibling to the hidden field:
browser.hidden(:name, /A111/).first.parent.img.click
Given that the name of the hidden field appears to be dynamically generated, you might want to also try the following (which I think are based on the parts less likely to change):
#Assuming that the link text beside the checkbox is unique
browser.link(:text => 'Handels- en ondernemingsrecht').parent.img.click
#Assuming that there is only one hidden element with 'fltrJurLegalArea' in the name:
browser.hidden(:name, /fltrJurLegalArea/).first.parent.img.click
Related
I was wondering how to click on a input in capybara.
So far I've tried
click_on('#js-emu-submit.button.pl3.pr3.mb0.mr1')
click('js-emu-submit')
find('input', exact_text: 'Get an Estimate', match: :first).click
None of them have worked
This is the HTML from the webpage.
<input type="submit" name="commit" value="Get an Estimate" id="js-emu-submit" class="button pl3 pr3 mb0 mr1" data-disable-with="Get an Estimate">
I am just wondering how to click on the item.
Looking at the docs for click_on - https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#click_link_or_button-instance_method - you can see that it's a combination of click_button and click_link and says to check each of those for the type of locator it accepts. Looking at click_button, https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#click_button-instance_method, you can see that it will find any <input> element of type submit, reset, image, button (which your HTML element is) and that the locator can be any of id, Capybara.test_id attribute, value, or title. A CSS selector is not one of those things so that explains why your click_on attempt fails. Assuming your <input> element is visible on the page then any of the following should click it
click_on 'js-emu-submit' # match on id
click_button 'js-emu-submit' # id
click_button 'Get an Estimate' # match on value - should work with `click_on` too
The other option is to just use click on an element located another way. click does not take a locator - https://www.rubydoc.info/gems/capybara/Capybara/Node/Element#click-instance_method - so that explains why your second attempt doesn't work, and an input element doesn't have child text inside the element so that explains why your third attempt doesn't work. Things that should work using click would be
find('#js-emu-submit').click # find element by CSS id selector and click it
find(:button, 'js-emu-submit').click # find by id using the :button selector
find('input[value="Get an Estimate"]').click # find by CSS attribute selector
...
I'm struggling to enable proper ARIA support for this case. I have a input field which works like a filter, and a set of elements which will be filtered by this input field. The focus is always on the input field, and with arrow up and down you can navigate through the result set. The input needs constant focus because whenever I start typing again, the input should be updated and filter the result set.
Now I want that my screen reader reads the name of the elements when I navigate through the result set. But if I press arrow down (or up) the reader repeats the full part of the input field.
Hint: The result set contains images and text and will open the element in a new view when it is clicked.
<input ng-change="$ctrl.doFilter()" ng-keydown="$ctrl.handleKeydown($event)">
<div class="filter-results" role="list">
<div ng-repeat="item in $ctrl.results track by $index"
ng-class="($index == $ctrl.selectedItem ? 'item-selected' : '')"
ng-click="$ctrl.navigateToSelected()"
ng-mouseover="$ctrl.selectItem($index)"
role="listitem"
<div ng-bind-html="$ctrl.displayName(item)"></div>
</div>
</div>
(shortened example)
HandleKeypress just sets the id of selected item, which will be highlighted by using the proper class.
Is there any solution that screen readers read the name (displayName) of the selected item?
One way to do it, and I'm not advocating this is the best way, but it seems to work, is to have an onkeydown handler for your input field (which you may already have) and when the up/down arrow key is pressed (which it sounds like you're already listening for), you can update a visually hidden <span> (or <div>) that has aria-live set to "polite" and update the text within that <span> with the text of your result item. I think the screen reader will still read the contents of your input field but it should also read the aria-live text too. Maybe not the ideal solution, but you'll get your result item announced.
Some (very) rough code:
<span id="result" aria-live="polite" class="sr-only"></span>
<script>
function mykeydown(e) {
if (e.keyCode == 40)
document.getElementById("result").innerHTML = "whatever is the next result";
}
</script>
Note: You can see the "sr-only" class here - What is sr-only in Bootstrap 3?
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span
I am trying to click a button within a table on a webpage within IE, the source of the button shows:
<input type="image" src="img/testimg.png" onclick="picture_return(this,'92b84574a336a090618f151b6fc821cf:5','http://testwebpage.com/in/834');" value="Test Web Button">
This is a part of a large table with multiple <td> within the source, this is within another table which is then within the following class:
<div class="section_client_dnBox">
I tried to go through a few of the items within the class by using the following VBA code:
IE.Document.getElementsByClassName("section_client_dnBox")(0).Click
However, had no luck as (0) didn't press anything and anything larger ie, (1) gave me an error. So my question now is basically, is there any way of clicking the button using something simple such as reffering to it's value within the table (value="Test Web Button")?
From my experience, you need to look at the tag name rather than the class name. This is an example of the code I generally use when finding buttons.
For Each MyHTML_Element In document.getElementsByTagName("input")
If MyHTML_Element.Type = "submit" Then
MyHTML_Element.Click: Exit For
End If
Next
You might be able to change the . type to = "image". I too am just learning how to use IE automation in VBA so I am not a champ at it either. I hope that helps.
CSS selector:
It is far simpler to use a CSS selector of input[value='Test Web Button']. No loop required.
It says get element with input tag having attribute value having value = 'Test Web Button'. "[]" means attribute.
.querySelector method of document is how you apply the selector.
CSS query:
VBA:
ie.document.querySelector("input[value='Test Web Button']").Click
I want dynamically add text-box in html page when user is press a button. and after that i want to get the respective field value or all field value.
I tried doing ng-repeat but it will not work. can anyone tell me how i will achieve this.
I would indeed use ng-repeat, and just push a new object onto the array. Maybe something like this?
<button ng-click="textFields.push("")">Add</button>
<textarea ng-repeat="val in textFields" ng-model="val"></textarea>
Well there are a few things you could try. One of them is loading a hidden div when clicked on the button. The hidden div contains the text box.
Like this :
$(document).ready(function(){
$("#hiddendiv").hide();
$("#button").click(function(){
$("#zmedia").show();
}};
And in your html form you just add a div that contains a textbox and the id of the dive should be "hiddendiv". The downside is that once the hidden div is loaded, it cant be removed. There are other scripts that are a lot more sophisticated, check these links out:
https://github.com/wam/jquery-addable
http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/