I'm trying to test my GWT application using selenium, the html generated by GWT Textbox is shown as below:
<input type="text" class="gwt-TextBox" >
No value there, but from UI i can see the text, Is there a way to get the value from selenium?
UPDATE: I can locate the input from selenium, but can not get its value, for example the value of above input is "blahblah...", which i can see from page UI, but can't get from the above html.
#Bhumika is correct, having a unique id attribute for every element you would want to manipulate is good programming practice. But if you don't have that and can't get it added, you still have a good handle on this particular case: the placeholder attribute. To locate the element, use the XPath //input[#placeholder='Input note title...']. To obtain the value of the field, get its value attribute.
Like #BMT said, you should get the value using getAttribute, like this
GWT Code
TextBox textField = new TextBox();
textField.ensureDebugId("textFieldId");
Selenium Code
driver.findElement(By.id("textFieldId")).getAttribute("value");
You could see all the properties (visible or invisible) of one element using Inspect Element Tool of browsers (F12), then get the value you want.
Each widget should have a id for selenium testing. Here selenium does not identify element, and you are not able to get value which are on UI. so you have to set id for input widget.
i.e
TextBox textField= new TextBox();
textField.getElement().setId("name");
If you want the resulting DOM to look like
<input type="text" class="gwt-TextBox" value="myValue">
you'll have to use
textBox.getElement().setAttribute("value", "myValue");
instead of
textBox.setText("myValue")
That's because setText will only update the value property (i.e. theDomElement.value = "myValue"), which will not update the value attribute (i.e. <input value="myValue"/>).
When updating a property, the browser will not update the associated attribute.
Related
I am trying to use RSelenium to navigate with Firefox. I need to change an option button in about:config page for parameter browser.helperApps.neverAsk.saveToDisk. With RSelenium I am able to find the element I need to modify, but then I cannot find a way to update the value.
This is my HTML string to find
<tr class=""><th scope="row">browser.<wbr>helperApps.<wbr>neverAsk.<wbr>saveToDisk</th><td class="cell-value"><form id="form-edit"><input type="text"></form></td><td class="cell-edit"><button data-l10n-id="about-config-pref-save-button" class="primary button-save" title="Salva" form="form-edit"></button></td><td class="cell-reset"></td></tr>
I am using
go4 = rsc$findElement(using = "xpath", value = "//th[substring-after(normalize-space(string(.)),': ')=browser.helperApps.neverAsk.saveToDisk']")
but the error I get is
Summary: NoSuchElement
Detail: An element could not be located on the page using the given search parameters.```
How can I find the element and change the default value?
Thank you
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
So, I'm trying to access the input field hidden deep within a paper input field. This is so that I can change the input type and so on. After inspecting the element, You can see that it has 2 shadow roots as explained in this blog. However, the method explained in that blog no longer works. I'm using dart version 1.5.3, polymer 0.12.0-dev.
I try to query the paper input like so:
querySelector('#paper-input-id').shadowRoot.querySelector('#input');
However, that returns null. This is because the shadowRoot property only returns the first shadow root. The input field is buried in the second shadow root. I guess what I am asking is if there is a generic way to select the nth-shadow root of an element?
This seems exactly how I did it in the unit test for <core-input>
var input = dom.document.querySelector("#changeAndInputEvent") as CoreInput;
var domInput = (input.shadowRoot.olderShadowRoot.querySelector('#input') as dom.InputElement);
what also should work is
var domInput = (dom.document.querySelector("#changeAndInputEvent /deep/ #input");
or
var domInput = (dom.document.querySelector("* /deep/ #changeAndInputEvent /deep/ #input");
when the paper-input itself is inside a shadow-dom
Instead of using shadowRoot and olderShadowRoot, which may change if for whatever reason paper-input decides to inherit something new that then inherits from core-input, try using the more generic shadowRoots map (note the 's'):
querySelector('#paper-input-id').shadowRoots['core-input'].querySelector('#input');
I have a Employee entity that I'm binding to an "Edit" view in an MVC3/Razor application. The Employee entity has a property for OccupationTypeId. OccupationTypeId points to the OccupationType table which contains several lookup values. The natural choice would be to use #Html.DropDownListFor to render a <select> tag containing a list of Occupations.
The OccupationType table schema is fairly standard: Id, Name, Description, IsEnabled. Since OccupationTypes can be disabled, I want the OccupationTypeId drop down to still render disabled options so the user can always see their selection if it's disabled, but a disabled option can't be selected by the user. In other words, a user can't change an existing OccupationTypeId to a disabled option.
I thought about creating a #Html extension method to build my <select> tag with the options and simply tack on a disabled attribute to disabled options. I think that would be straight forward...
However, disabled selected options don't seem to post back to the controller method. In other words, Employee.OccupationTypeId would be null when I post to Edit.
Is there any way to change this behavior or is this built in to MVC 3? I thought about using hidden fields, but what if OccupationTypeId is required and I have validation enabled?
Has anyone else faced this?
Thanks
You could have a hidden field that gets updated when the change event occurs in the dropdown list. This way the OccupationTypeId field is always passed.
<input name='CurrentOccupationId' type='hidden' value='#Model.Employee.OccupationTypeId' />
<script>
$(function() {
$('#dropDownId').change(function() {
$('input[name="CurrentOccupationTypeId"]').val($(this).val());
});
});
</script>
Is there any way to change this behavior or is this built in to MVC 3?
I thought about using hidden fields, but what if OccupationTypeId is
required and I have validation enabled?
It has nothing to do with MVC 3 in particular; all disabled html elements don't post back in general.
The solution I've used is to "simulate" the disable element by styling the appropriate element with CSS. You can, for example, set the element's background (or foreground) color to gray and set the readonly attribute (when it makes sense) instead.
See this similar thread.
I have a bunch of optional "write-in" values for a survey I'm working on.
These are basically a radio button with a textbox within the answer field - the idea being that you would toggle the button and write something into the box.
What I'd like to do is have the radio button toggled whenever a user clicks in the text field - this seems like a use-case that makes a lot of sense.
Doing this:
<input type="radio" id="radiobutton"><label for="radiobutton">Other: <input type="text" id="radiobutton_other"></label>
works fine in Chrome (and I am guessing, other WebKit browsers as well), but there are weird selection issues in Firefox, so I'm assuming its a non-standard practice that I should stay away from.
Is there a way to replicate this functionality without using JavaScript? I have an onclick function that will work, but we're trying to make our site usable for people who might have NoScript-type stuff running.
Putting an input inside a label actually has a slightly different meaning. It doesn't make the input itself a label, it implicitly associates the label with the input in the same way as if they were linked by a for/id.
However, this only happens when the label doesn't already have a for attribute to override that (see HTML4 s17.9: “When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.”). It is unclear according to spec what should happen when both containment and for are present.
(And also it doesn't work in IE, which makes the point moot in practical terms.)
No, you'll need some scripting for this.
<input type="radio" id="radiobutton">
<label for="radiobutton_other">Other:</label>
<input type="text" id="radiobutton_other">
<script type="text/javascript">
var other= document.getElementById('radiobutton_other');
other.onchange=other.onkeyup= function() {
if (this.value!=='')
document.getElementById('radiobutton').checked= true;
};
</script>
It (an input inside a label) validates just fine as HTML 4.01. One potential issue I can see with your code is that both radio elements have the same ID in your example. Element IDs must be unique in HTML and XHTML documents and you should use the name attribute instead to identify a radio group.
If you are still having trouble after changing this, you will have to move the input outside of the <label> element and use scripting.