How to get input field embedded in table using page-object accessor - watir

Given the HTML snippet below how can I, using page-object field accessors, get the second input field, the one with id="333:".
I can't use the id to identify the field as it's auto-generated.
Using page-object accessors I can get the embedded table and the correct cell but the cell object is a PageObject::Elements::TableCell which doesn't seem to have any methods that allow access to the embedded span and input field.
I can get the input field using native Watir accessors - i.e., browser.div( ... etc ...) but would prefer to use just page-object accessors if possible.
If not possible then I'll live with native Watir. Thanks
<div class="modalContent">
<table role="presentation" id="324:_layoutTbl" class="axial">
<tbody>
<tr>
<td>
<input id="326:" name="" value="" onchange="juic.fire("326:","_change",event);" onfocus="juic.fire("326:","_focus",event);" onblur="juic.fire("326:","_blur",event);" type="text">
</td>
</tr>
<tr>
<td class="sfTH">
<label for="332:">Users:</label>
</td>
<td>
<table class="noborder" role="presentation">
<tbody>
<tr>
<th>
<label id="336:" class="rcmFormLabel">Hiring Manager</label>
<label id="337:" for="333:" class="rcmFormLabe">Users, Hiring Manager</label>
</th>
<td><span class="autocompspan ">
<input class="autocompinput" id="333:" name="333:" onfocus="juic.fire("333:","_focus",event);" size="20" value="Bill Murray" role="combobox" type="text">
<input value="111111" id="333:_hidden" name="333:_hidden" type="hidden">
</span>
<div id="335:" style="display:none"><img alt="" class="globalFloatLeft">
<div id="335:_error" style="color:#ff0000">undefined is required</div>
<div style="clear:both;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

After more experimenting I found the answer to my question. I declared the table accessor, e.g., div(:my_table, :class => 'modalContent').table.table then in the code, to get the input field in the first row I did my_text_field = my_table_element[0].text_field_element which returned the PageObject::TextField object in column 2 of row 1

Related

How to update jBoxes?

I have a form that uses jBox to provide additional info for some fields in tooltips. The text that is displayed depends on the value of the closest select-tag. jBox is executed on PageLoad (I create a single jBox which uses data-attributes to get title and content) and I then update the data-attributes in response to the change-event on the select-control.
Unfortunately that does not work, the tooltip stays with the initial value.
I have a cut-down repro with tooltip that illustrates the behaviour of not being updated (alertis used to show actual values of data-attributes after a change-event)
$(function() {
$("[data-jbox-content]").jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip",
getTitle: "data-jbox-title",
getContent: "data-jbox-content"
});
});
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<body>
<table>
<tbody>
<tr>
<th>Variable</th>
<th colspan="2">Type</th>
<th>Description</th>
</tr>
<tr>
<td><label for="dt1">Car</label></td>
<td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').data('jbox-title','blabla');$('#infoCar').data('jbox-content','dummy');alert($('#infoCar').data('jbox-title')+' / ' + $('#infoCar').data('jbox-content'))">
<option>Key</option>
<option selected="selected">Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option>Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
</tr>
<tr>
<td><label for="dt2">Age</label></td>
<td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').data('jbox-title','blabla');$('#infoAge').data('jbox-content','dummy');alert($('#infoAge').data('jbox-title')+' / ' + $('#infoAge').data('jbox-content'))">
<option>Key</option>
<option>Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option selected="selected">Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
</tr>
</tbody>
</table>
</body>
There is a common misunderstanding of how jQuery uses .data() and .attr() methods.
.data() adds some internal data to the element itself and will not set an attribute.
To set a data-xxx attribute you need to use .attr(). See more here: https://api.jquery.com/attr/
Also, check out updated snippet:
$(function() {
$("[data-jbox-content]").jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip",
getTitle: "data-jbox-title",
getContent: "data-jbox-content"
});
});
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<body>
<table>
<tbody>
<tr>
<th>Variable</th>
<th colspan="2">Type</th>
<th>Description</th>
</tr>
<tr>
<td><label for="dt1">Car</label></td>
<td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').attr('data-jbox-title','blabla');$('#infoCar').attr('data-jbox-content','dummy');">
<option>Key</option>
<option selected="selected">Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option>Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
</tr>
<tr>
<td><label for="dt2">Age</label></td>
<td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').attr('data-jbox-title','blabla');$('#infoAge').attr('data-jbox-content','dummy');">
<option>Key</option>
<option>Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option selected="selected">Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
</tr>
</tbody>
</table>
</body>

Geting the position of an array element in node js express

i have retrieved a list of abjects from firebase onto my ejs file: and i am retrieving them in this manner:
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
I am however trying to implement an Onclick for so that when an item is clicked on it carries its info to the next page: I have tried to store it in aninput field like:
**<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">**
But i just cant get the individual item it pulls the whole array when i check for the value.Any help
Here is the sample data
Then i use jquery to submit:
$(document).ready(function () {
$("#event").click(function(){
var en = $("#evname").val();
$("#categ").val(en);
$("#eventform").submit();
});
});
Here is the rendered htmlsource and images /:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<%Object.keys(notes).forEach(function(key,idx){%>
<tr>
<td id="tid" name="tid" class="tid" ><%= idx %></td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
<input type="hidden" id="idd" name="idd" class="idd" value="<%= idx %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td id="elocation" name="elocation"><%=notes[key].location %></td>
<td id="ecodes" name="ecodes"><%=notes[key].code %></td>
<td id="edate" name="edate"><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Here is the rendered html from the browser:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<tr>
<td id="tid" name="tid" class="tid">0</td>
<form name="eventForm-0" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-0" name="categ" class="categ" value="zuri.png">
<input type="hidden" id="idd" name="idd" class="idd" value="0">
<td id="evname-0" name="evname-0">zuri.png</td>
<td id="elocation" name="elocation">zuri.png</td>
<td id="ecodes" name="ecodes"></td>
<td id="edate" name="edate">-LZfAvzWGudUK78TGtT_</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">1</td>
<form name="eventForm-1" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-1" name="categ" class="categ" value="Africa Tourism Technology and Innovation Awards">
<input type="hidden" id="idd" name="idd" class="idd" value="1">
<td id="evname-1" name="evname-1">Africa Tourism Technology and Innovation Awards</td>
<td id="elocation" name="elocation">USIU – Africa</td>
<td id="ecodes" name="ecodes">AA24VI</td>
<td id="edate" name="edate">25th – 26th April, 2019</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">2</td>
<form name="eventForm-2" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-2" name="categ" class="categ" value="2nd Annual Global M I C E Summit">
<input type="hidden" id="idd" name="idd" class="idd" value="2">
<td id="evname-2" name="evname-2">2nd Annual Global M I C E Summit</td>
<td id="elocation" name="elocation">Trademark Hotel</td>
<td id="ecodes" name="ecodes">RT79XV</td>
<td id="edate" name="edate">11th – 13th September, 2019</td>
</tr>
</tbody>
You have a number of issues with your code, and despite trying to highlight them in comments there isn't enough space, hence this 'incomplete' answer
For starters you are opening a form tag before your forEach loop. You then close it during the first loop. So on your subsequent iterations there isn't a form to find.
Secondly, you have reused the same ID during the loop, which you should not do as it will generate multiple items with the same ID if you have multiple Objects you're looping through. If you have 2 elements with an ID of 'foo', using multiple of the same ID will lead to unintended consequences , each ID should be unique.
Thirdly you don't have a <table> tag around your tbody, some browsers therefore strip the tbody so you're click event will never fire. Also your rows are within a <tr> element so you should attach your click handler to this.
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form> // YOU'RE CLOSING YOUR FORM HERE INSIDE THE LOOP ITERATION
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Now this isn't tested, and as I don't know the complete layout of your page it's a bit of a stab in the dark, but you could try something like the following and see if you have any luck
<%Object.keys(notes).forEach(function(key,idx){%>
<table>
<tbody id="event-<%= idx =>" name="event" class="eventName">
<tr class="row">
<td>1</td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
</table>
And a click handler similar to
$(document).ready(function () {
$(".row").click(function(ev){
let form = ev.currentTarget.querySelector('form');
form.submit()
});
A simpler version using vanilla JS can be found here https://jsfiddle.net/xvag0mj2/

Objects in IE are not getting identified by VBA

Iam trying to automate IE Browser using VBA. There are nearly 25 links in the browser page but when i use getElementsByTagName("a") function VBA is identifying only 2 links form the page. Iam using IE 8 and MS Office 2007 package.
Have any one faced the same issue earlier. Kindly help
<form name="form1" action="/insurance/gs/servlet/API.gs.pol.nb.action.NewBizAction" method=post>
<input type="hidden" name='operId' value="">
<input type="hidden" name="policyId" value = "309865">
<input type="hidden" name='isCustomer' value="1">
<input type="hidden" name='indDeletePartyId' value="">
<input type="hidden" name='orgDeletePartyId' value="">
<input type="hidden" name='deletePartyId' value="">
<input type="hidden" name='roleType' value="">
<input type="hidden" name='submissionCustId' value="0">
<input type="hidden" name='newPartyId' value="null">
<input value="API.gs.pol.nb.action.NewBizAction?operId=LoaderCustInfo&policyId=309865" type="hidden" name="fromUrl" >
<table cellpadding="1" cellspacing="1" class="table_frame">
<tr>
<td class="body">
<div class="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_data">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="table_heading1">
<tr>
<td class="table_heading1_tdleft table_heading1_tdpic"></td>
<td class="table_heading1_td">
<table border="0" cellspacing="0" cellpadding="0" class="table_heading1_1">
<tr>
<td class="arrow_td"><img src="/insurance/icp/ifoundation/html/foundation/ui31/images/common/arrow1.gif" /></td>
<td width="49%" nowrap="nowrap" class="font_heading1">
Customer List
</td>
<td width="49%" align="right" >
<a class="a2" href="#" onClick="javascript:if(cheBefSelCust()){loadIndiCust()}">Individual</a>
<a class="a2" href="#" onClick="javascript:if(cheBefSelCust()){loadOrganCust()}">Company</a>
</td>
</tr>
</table>
</td>
<td class="table_heading1_tdright table_heading1_tdpic"></td>
</tr>
</table>
In the above HTML Page I want to Select the Link Individual

Find label name which doesn't contain input immediately from a table

I am having a table which contains multiple td/tr.
My problem is label which i want to get doesn't contains input immediately neither that label has any attributes property.
I want to get "Countries of Permanent Residence" and Dates which are in span but doesn't have any properties that span is in div that too doesn't contains any property.
I tried with
formElement[input[name="icims_gh_Permanent_Country_Residence"]]
But don't know how to get associate label.
Html looks like:
<div style="margin:0px">
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Countries of Permanent Residence (list all) </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Dates </span>
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style="margin:0px">
<div>
<input type="hidden" name="icims_gh_Permanent_Country_Residence" value="1">
<a name="0.1_icims_ga_Permanent_Country_Residence"></a>
<div>
<table style="width:100%;border:0px">
<tbody>
<tr>
<td>
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountry"> </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountryDates"> </span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Nested Repeaters Using Table Tags

I am using the following code to try and use nested repeaters in WinJS:
<table class="grid" id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
<thead>
<tr>
<th colspan="4" class="groupHeader" data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></th>
</tr>
</thead>
<tbody data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
<tr>
<td data-win-bind="textContent: ContactDate.DateTime BindingConverter.toshortdate"></td>
<td data-win-bind="textContext: SalesPerson"></td>
<td data-win-bind="textContext: ContactMethod"></td>
<td><span class="symbol"></span></td>
</tr>
</tbody>
</table>
However, it is not rendering any results for the 2nd repeater.
When I use the same data source and similar markup using DIVs, it works:
<div id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
<div>
<div data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></div>
<div data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
<span data-win-bind="textContent: ContactMethod"></span>
</div>
</div>
</div>
I don't really want to use Divs as this is tabular data. Any idea why using table tags behaves differently?
Did you assign give data to your outer repeater?
The following works in a blank project for me:
<script>
window.list = new WinJS.Binding.List([
new WinJS.Binding.List([1, 2, 3]),
new WinJS.Binding.List([4, 5, 6]),
]);
</script>
<div data-win-control="WinJS.UI.Repeater" data-win-options="{ data: list }">
<span data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data : this"></span>
</div>
Try replacing
data-win-bind="winControl.data: ch"
with:
data-win-options="{data: ch}"

Resources