As part of a test scrip I have to redirect to a 3rd party hosted payment page. However, when I try and find the input box elements it errors slightly differently depending on which call I try:
$driver->find_element_by_id("card.billingAddress.houseNumberOrName")->clear
returns "Element is not currently visible and so may not be interacted with"
$driver->find_element_by_xpath('//input[#id="card.billingAddress.houseNumberOrName"')->clear
returns "SyntaxError: The expression is not a legal expression."
The source of the section I am searching is:
<tr>
<td colspan="2"><div class="fieldSubHeader">Billing Address</div>
</td>
</tr>
<tr>
<td><div id="idAddress1_card" style="display:inline">Address 1</div>
<div id="idHouseNumberOrName_card" style="display:none">House Number/Name
</div</td>
<td><div class="fieldDiv" id="idDivAddress1_card">
<input type="text" class="inputField" id="card.billingAddress.houseNumberOrName" name="card.billingAddress.houseNumberOrName" value="" size="15" maxlength="40" />
</div></td>
</tr>
Is it the . in the ID that is causing the issue?
(I have checked the computed CSS and it is not hidden!)
Many thanks
You are missing the closing ]. Replace:
'//input[#id="card.billingAddress.houseNumberOrName"'
with:
'//input[#id="card.billingAddress.houseNumberOrName"]'
HERE ^
Note that you might simplify it by switching directly to the find_element_by_id() method.
Related
Basically, in English I want to tell Selenium "look for the content ttc202 in column one, of a multi-row, multicolumn table, then mouseOver on the Edit link"
HTML is as follows:
<tr id="86" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" tabindex="0" role="row" aria-selected="true">
<td aria-describedby="jqLst_Short Name" style="text-align:left;" role="gridcell">
ttc202
</td>
<td aria-describedby="jqLst_Long Name" style="text-align:left;" role="gridcell">
Testing Training Company 202
</td>
<td aria-describedby="jqLst_Actions" title="" style="text-align:center;" role="gridcell">
<a class="act avw" title="View this Organisation" href="company/view?lcId=86"></a>
<a class="act aed" title="Edit this Organisation" href="company/edit?lcId=86"></a>
</td>
</tr>
I have tried this:
//td[contains(text(),'ttc202')]/following-sibling::td[contains(a/title(),'Edit this Organisation')]/a
All help appreciated. I assume I am missing something to skip over the first column, but can't imagine what will enable me to do that...
Progress:
I have found the following as an alternative which should get to the correct cell, but I am not able to workout how to target the title in the link code:
//td[normalize-space() ="ttc202"])[1]/following-sibling::td[2]/a[. = 'Edit']
I think this is progress just not sufficient to get me to the finish line!
After much investigation I found the following answer, perhaps this might help others who come across this question:
//tr[contains(td[1], "ttc202")]/td[3]/a[#title='Edit this Organisation']
The trick was realising which cell the information was in (represented by the square brackets).
I want to wrap fields in a <div class="validation-error"> when they have validation errors, and in plain <div>s otherwise:
Validation Error:
<div class="validation-error">
<sf:input path="title" cssErrorClass="validation-error"/>
<sf:errors path="title" cssErrorClass="validation-error" />
</div>
No Validation Error:
<div>
<sf:input path="title" cssErrorClass="validation-error"/>
<sf:errors path="title" cssErrorClass="validation-error" />
</div>
How can I check that title has an error or not?
You shouldn't apply validation-error class to whole <div> element of your input. I don't think that <errors> tag was meant to work like that.
What you could do is very simple and neat solution. Simply display error message with all proper classes and styles applied to it or don't display it at all. For instance:
<tr>
<td><label>Username</label></td>
<td><form:input id="username" path="nickname" /></td>
<td><span id="usernameError" class="error"><form:errors path="nickname" /></span></td>
</tr>
When there is no error message, appropriate cell will be left blank and user won't see anything. However, if the message will be displayed - it will have proper styling thanks to class="error" notation in mine example.
Ohh, and you can use divs, spans or any other elements if you wish. I just tend to use table for forms.
I'm working on a small problem where I'm trying to show/hide a panel based on two criteria
A specific data field must not be blank
The specific data filed must also not equal "Not Relocatable"
Unfortunately this doesn't seem to be working for me (note that setting either one or the other criteria works just fine.)
<asp:Panel runat="server" Visible='<%#If(Not String.IsNullOrEmpty(DataBinder.Eval(Container.DataItem, "_236")) Or Not DataBinder.Eval(Container.DataItem, "_236") = "Not Relocatable", True, False)%>'>
<tr>
<td>
</td>
<td class="align-right lightgreen">
Buyer would consider relocating a business, if it is:
</td>
<td>
</td>
<td colspan="3">
<%#DataBinder.Eval(Container.DataItem, "_236")%>
</td>
<td>
</td>
</tr>
</asp:Panel>
Can anyone lend a hand to rectify this problem for me?
The syntax <%# %> is a data binding syntax, not an inline expression syntax. You cannot use procedural code inside of it like you can in the inline code <% %> tags.
Data binding tags must contain a single Eval or Bind function. If you need to do conditional branching based on those functions, you will need to do it using inline code around the binding tags.
I've been messing with this for far too long, and managed to get IE8 working, but IE7 has me stumped.
I've got a table, and for each column, I am trying to extract a number of divs. I am only extracting divs which match specific selectors, not all divs in the column.
My original jquery selector was
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
This worked great in FF, but didn't trigger the .each function at all in IE.
After messing around for a bit, I got to
jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') > div.a7', table#a+'tableId).each(function(){
alert(jQuery(this.attr('id'));
});
Not so nice, but works in IE8.
I had tried all sorts of combinations using .eq(+'columnNum+') but nothing else was working.
Now I go and test in IE7, and again the .each isn't being triggered.
What is the nicest way (and cross-browser compatible) to work with this sort of .each element?
--------------addition--------------
After further testing and playing around with suggestions from DrJ and bdukes, I've found that the table#'+tableId breaks the function in both IE7&8.
I've gone back to my original code
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
as that seems to me the most efficient.
If I remove 'table#a'+tableId, i get the correct response in all browsers, except that it is adding up the results from all tables, and I need to be able to get only the results from one table at a time.
I have also tried 'table#a'+tableId+'>td:nth-child('+columnNum+')').each, but that doesn't work either.
The first function i've used works perfectly in firefox.
----------------the html being selected---------------------------
The tables are being created dynamically in javascript so I can't really copy and past it, but here is what the output looks like. It ends up looking kinda like a gantt chart on a table.
<table id="a1">
<tr>
<th colspan="5">
Group Name
</th>
</tr>
<tr class="rowId1" >
<td>
<div class="a1" id="a43" style="margin-left:13px; width:60px" ></div>
</td>
<td>
</td>
<td>
<div class="a3" id="a93" style="margin-left:4px; width: 80px" ></div>
<div class="a2" id="a94" style="margin-left:4px; width: 30px" ></div>
</td>
<td>
<div class="a1" id="a24" style="margin-left: 15px; width: 65px;" ></div>
</td>
<td>
</td>
</tr>
</tr>
<tr class="rowId1" >
<td>
<div class="a7" id="a24" style="margin-left:10px; width:60px" ></div>
</td>
<td>
<div class="a2" id="a15" style="margin-left:14px; width: 22px" ></div>
</td>
<td>
;
<div class="a2" id="a105" style="margin-left: 8px; width: 50px" ></div>
</td>
<td>
</td>
<td>
<div class="a4" id="a102" style="margin-left: 5px; width: 45px;" ></div>
</td>
</tr>
</table>
It turns out this was an issue with IE failing when two different elements have the same ID. Apparently this breaks the .each function.
I had two tables
table.notes#a1 & table.inputs#a1
The .each function should have gone through each table but instead found neither.
jQuery also wouldn't run in ie with
jQuery('div.a1, div.a3, div.a4, div.a7','table.inputs#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
which it should have done, as I am them pointing directly to a specific table even if the id is not unique.
I'm using id's retrieved from the database for the id, and IE doesn't like id's that start with numbers, so I just added an 'a' to the beginning of the id.
However, it apparently doesn't like that either, so now I'm adding the first letter of the class and then the '1' or whatever the id number is.
This solves the issue.
I currently have a databound dropdown list on my ASP.Net C# 2.0 website that has around 400 items in it. I want to replace it with something similar like the textbox in google search where you enter letter and only the entries starting with those letters pop up
what is a good way of implementing it? Are there controls that already exists that anybody can suggest?
One way to do this using HTML5 (for small datasets of course) is datalist:
<input list="users" name="users">
<datalist id="users">
<option value="Alice">
<option value="Bob">
<option value="Chuck">
<option value="Chris">
<option value="Duke">
<option value="Emily">
</datalist>
For larger datasets AJAX is a better way to go.
Take a look at http://docs.jquery.com/Plugins/Autocomplete
Also here is a tutorial for use with ASP.Net
check complete.ly too
http://complete-ly.appspot.com/
it has no dependencies and weights very little.
If these are known enrties, you can use JQuery, and on the OnUpdate event:
if it's a long list, make Ajax Request to your webserver, retrieve the best option
if it's a short list, you can load all the options to the page, and offer the optional texts without making a server request.
Checkout the JQuery library for implementations on how to display the suggestion.
There's an AutoComplete extender as past of the AJAX Control Toolkit for ASP.NET. There are plenty of different options that you can set for client caching, delay interval. Just point it at a web service or page method and away you go.
TextBoxValueToDropDownList
function AddNames(text) {
if (document.myForm.insertText.value == "") {
document.getElementById("insertText").style.border = "1px solid red";
return false;
}
else {
var option = document.createElement("OPTION");
option.text = text.value;
option.value = text.value;
document.getElementById("dropDownList").options.add(option);
document.myForm.insertText.value = "";
document.getElementById("insertText").style.border = "1px solid green";
}
}
<form name="myForm">
<table>
<tr>
<td>
<input type="text" name="insertText" id="insertText" /></td>
<td></td>
<td>
<select name="dropDown" id="dropDownList">
</select>
</td>
</tr>
<tr>
<td>
<input type="button" value="Insert" id="button" onclick="AddNames(insertText);" /></td>
</tr>
</table>
</form>