I want to select any date from the calendar to test some application .
I cant find the table or tr or td elements here .
I think i can get the table divison but not able to go ahead of this .
This is my solution
public String findElementInTable(WebDriver driver,String elementXpath) {
WebElement select2Element = driver.findElement(By.xpath(elementXpath));
select2Element.click();
WebElement datepicker = driver.findElement(By.xpath("//div[#class='period_picker_days']/table"));
List<WebElement> rows_table = datepicker.findElements(By.tagName("tr"));
int rows_count = rows_table.size();
// Loop will execute till the last row of table.
for (int row = 0; row < rows_count; row++) {
// To locate columns(cells) of that specific row.
List<WebElement> Columns_row = rows_table.get(row).findElements(By.tagName("td"));
// To calculate no of columns(cells) In that specific row.
int columns_count = Columns_row.size();
// Loop will execute till the last cell of that specific row.
for (int column = 0; column < columns_count; column++) {
// To retrieve text from that specific cell.
if (Columns_row.get(column).getText().equals(name)) {
String celtext = Columns_row.get(column + 2).getText();
System.out.println("Cell Value Of row number " + row + " and column number " + (column) + " Is "
+ celtext);
return Columns_row.get((column + 2)).getText();
}
}
}
return null;
}
Here is a detailed html snippet of the calendar
<div class="ParkingWidgetParkingLanding period_picker_box xdsoft_noselect animation xdsoft_norange visible active periodpickerstart" style="left: 487.467px; top: 857px; width: 511px; height: 294px;" unselectable="on">
<div class="period_picker_head">
<div class="period_picker_work">
<div class="period_picker_days">
<a class="periodpicker_btn_prev" href="#">Prev</a>
<table>
<tbody>
<tr>
<td class="period_picker_month5 periodpicker_table_container">
<table>
<tbody>
<tr>
<th class="period_picker_month" title="May 2016" colspan="7" data-dateend="2016/05/31" data-datestart="2016/05/1">May 2016</th>
</tr>
<tr class="period_picker_first_letters_tr">
<th class="period_picker_holiday">Sun</th>
<th class="">Mon</th>
<th class="">Tue</th>
<th class="">Wed</th>
<th class="">Thu</th>
<th class="">Fri</th>
<th class="period_picker_holiday">Sat</th>
</tr>
<tr>
<td class="period_picker_gray_period">1</td>
<td class="period_picker_gray_period">2</td>
<td class="period_picker_gray_period">3</td>
<td class="period_picker_gray_period">4</td>
<td class="period_picker_cell period_picker_weekday" data-date="2016/05/5">5</td>
<td class="period_picker_cell period_picker_weekday" data-date="2016/05/6">6</td>
<td class="period_picker_cell period_picker_holiday period_picker_last_cell" data-date="2016/05/7">7</td>
</tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
<td class="period_picker_month6 periodpicker_table_container">
<table>
Hi please do it like below (answer is as per the html source provided)
List<WebElement> dates = driver.findElements(By.xpath("//*[#class='period_picker_month5 periodpicker_table_container']/table/tbody/tr[3]/td"));
// for printing every date
// and selecting a date form the calender
String MyDate = "6";
for (int j = 0; j < dates.size(); j++) {
String date = dates.get(j).getText();
System.out.println(date);
if(dates.get(j).getText().equals(MyDate)){
dates.get(j).click();
break;
}
}
Try this for first date //html/body/div/div/div/div/table/tbody/tr/td/table/tbody/tr[3]/td[1]
Also you can download xpath finder, it's mozzila add-on i think it helps a lot.
When you install it just right click on element, choose Xiew xpath-> and it will show xpath for element.
Related
is it possible to display the data on which column month of the table?
below is the sample dashboard to achieve
and this is my DB
currently this is my dashboard. I want to align the data base on the period in the DB.
what should be my tboby look like to achieve the desired dashboard
this is my index html
<div class="w3-container w3-padding-64 w3-theme-l5">
<div class="w3-padding-16"><span class="w3-xlarge w3-border-purple w3-bottombar">COUNT PER BUSINESS UNIT</span></div>
<div>
<table id="businessUnit-tbl" class="table table-bordered display nowrap">
<thead>
<tr style="/*color:white;*/ align-content:center">
<td>MONTH</td>
</tr>
<tr #*style="color:white"*#>
<td>Business Unit</td>
<td id="jan">January</td>
<td id="feb">February</td>
<td id="mar">March</td>
<td id="apr">April</td>
<td id="may">May</td>
<td id="june">June</td>
<td id="july">July</td>
<td id="aug">August</td>
<td id="sept">September</td>
<td id="oct">October</td>
<td id="nov">November</td>
<td id="dec">December</td>
<td id="total">Total</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
According to my understanding of the topic, I suggest leaving tbody blank and trying to fill it with javascript
// append column to the HTML table
function appendColumn() {
var tbl = document.getElementById('my-table'), // table reference
i;
// open loop for each row and append cell
for (i = 0; i < tbl.rows.length; i++) {
createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
}
}
I have 3 loops
1-getting the name of the week day
2-getting the number of the day
1 and 2 came from js function.
JavaScript
var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
$scope.rangetxt = [];
var d1 = new Date(fromdate);
while (d1 <= new Date(todate)) {
//alert(DAYS[d.getDay()]);
$scope.rangetxt.push({ Day: DAYS[d1.getDay()] });
//console.log($scope.rangetxt);
d1 = new Date(d1.getTime() + (24 * 60 * 60 * 1000));
}
$scope.dateArray = [];
var currentDate = moment(fromdate);
var stopDate = moment(todate);
while (currentDate <= stopDate) {
$scope.dateArray.push({ Day: moment(currentDate).format('DD') })
currentDate = moment(currentDate).add(1, 'days');
}
HTML
<td class="employeedata">
<table class="table table-bordered table-hover myTable" style="font-size: 10px;" id="table2">
<thead>
<tr>
<th rowspan="3">Type</th>
</tr>
<tr>
<!--<th rowspan="2">Type</th>-->
<th ng-repeat="r in rangetxt">{{r.Day}}</th>
<!--<th rowspan="3"></th>-->
</tr>
<tr>
<th ng-repeat="dt in dateArray">{{dt.Day}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="df in duration | filter : du.StaffKey | limitTo:3 ">
<td>{{df.TypeTransDesc}}</td>
<td ng-repeat="x in dateArray " >
<span ng-repeat="(key,value) in df" ng-if="key=='D'+x.Day" **ng-class="{{df.['C'+x.Day]}}">**
{{value}}
</span>
</td>
</tr>
</tbody>
</table>
</td>
I am successfully show the data inside its cell but i cant apply the class,
i have 6 classes , i want to apply them based on a condition
don't know why and how
any idea, Thanks in advance
You can get the class name from the controller, create a function on the controller and call it from the html:
html:
ng-class="getDfClass(df, x.day)"
and in the controller:
getDfClass(df, day) {
return df['C'+day];
}
this assumes that the result of df['C'+x.Day] is a string with the name of the class you want to apply to the span
Im using MVC4 Razor and I just want to ask how to create a List of string and use it in a field seperated by comma? Cause I tried something and it shows an error Cannon implicitly convert type void to object Ill show you my set of codes
declared this on my header:
List<string> elements = new List<string>();
Then I want this List<string> elements to get populated inside a foreach loop
<tbody>
#for (var i = 0; i < Model.Cards.Count; ++i)
{
var counter = i + 1;
<tr>
<td valign="middle">
<p class="small">#counter</p>
</td>
<td valign="middle">
<p class="small">#Model.Cards[i].Number.Substring(0,5)</p>
</td>
#elements.Add(Model.Cards[i].Number.Substring(0,5))
</tr>
}
</tbody>
And use it in a Label
<div> Card Number <p> #String.Join(", ", elements.ToArray()) </p></div>
If you flow #Stephen Muecke, suggestion it's best. But if you flow your process the your code look like:
#{
List<string> elements = new List<string>();
}
<tbody>
#for (var i = 0; i < Model.Cards.Count; ++i)
{
var counter = i + 1;
var cardNumber=Model.Cards[i].Number.Substring(0,5);
elements.Add(cardNumber);
<tr>
<td valign="middle">
<p class="small">#counter</p>
</td>
<td valign="middle">
<p class="small">#cardNumber</p>
</td>
</tr>
}
</tbody>
#{
var str=string.Join(", ", elements.ToArray());
}
<div> Card Number <p> #str </p></div>
i was able to break string to chars array and surround each char in <span></span> but when im trying to pass this array to table the html wont render.
breaking the string:
//parse cron_format and edit each digit individually
$scope.parse = function (cron_format){
var parsed = cron_format.split('');
for(var i = 0; i < parsed.length; i++) {
parsed[i] = '<span>' + parsed[i] + '</span>';
}
return parsed;
}
when i try to create the table like this:
<table class="table table-bordered table-hover">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
</thead>
<tbody ng-repeat="(user_id,script_id) in data | filter: test">
<tr ng-repeat="(script_id, cron_format) in script_id">
<td>{{user(user_id)}}</td>
<td>{{script(script_id)}}</td>
<td ng-bind-html-unsafe="{{parse(cron_format)}}"></td>
</tr>
</tbody>
</table>
there are no values in cron_format:
without trying to render -> <td>{{parse(cron_format)}}</td>
the table looks like this:
what am i doing wrong?
UPDATE:
i changed function's two last rows :
$scope.parsed.htmlSafe = $sce.trustAsHtml(parsed.html);
return parsed;
and i get this error:
Can't interpolate: {{parse(cron_format)}}
TypeError: Cannot set property 'htmlSafe' of undefined
can someone explain whats the mistake im doing here?
I have the following html code for a table I am generating information from but I also need it to calculate the sum of the "TranAmt" column. Can someone help me with this?
<p>Hi Marly,</p>
<p>The following customer invoices were posted today:</p>
<table style="width: 1300px;" border="1" cellspacing="1.5" cellpadding="1.5" align="left">
<thead>
<tr style="background-color: #81BEF7;" align="center" valign="middle">
<td style="text-align: center;"><strong>Customer ID</strong></td>
<td style="text-align: center;"><strong>Customer Name</strong></td>
<td style="text-align: center;"><strong>Customer PO Number</strong></td>
<td style="text-align: center;"><strong>Invoice Number</strong></td>
<td style="text-align: center;"><strong>Invoice Date</strong></td>
<td style="text-align: center;"><strong>Post Date</strong></td>
<td style="text-align: center;"><strong>Invoice Amount</strong></td>
<td style="text-align: center;"><strong>Invoice Sales Tax Amount</strong></td>
<td style="text-align: center;"><strong>Create User</strong></td>
</tr>
</thead>
{BEGIN*REPEAT}
<tbody>
<tr>
<td>{CustID}</td>
<td>{CustName}</td>
<td>{CustPONo}</td>
<td>{TranID}</td>
<td>{TranDate}</td>
<td>{PostDate}</td>
<td>{TranAmt}</td>
<td>{STaxAmt}</td>
<td>{CreateUserID}</td>
</tr>
{END*REPEAT}
</tbody>
</table>
If you are using JQuery you can use the n-th child selector to add all the items of a column within a table.
http://api.jquery.com/nth-child-selector/
Here's an example
var rows = $("#table_id tr:gt(0)");
rows.children("td:nth-child(7)").each(function() {
the_sum += parseInt($(this).text());
});
This function will help you for getting the total of any column whose column header name you supplied to it. But I want to suggest one thing instead of tag names thead and tbody plz use some id, as it will create problem if you have multiple tables in the same page.
function someFunction() {
var invoiceTotalAmount = getTotal(("invoice amount").toUpperCase());
}
function getTotal(myString) {
var CellListing = $("thead > tr > td");
var selIndex=-1;
var sum = 0;
CellListing.each(function(index){
if($(this).children("strong").html().toUpperCase()===myString)
selndex= index+1;
});
var rows = $("tbody >tr");
rows.children("td:nth-child("+selIndex+")").each(function() {
sum += parseInt($(this).text());
});
return sum;
}
running example html sum of column needed
I don't know how to define variable in {FinalTranAmt} so i'm explain you
Tack a variable with initially 0 as value
For every repeat add {TranAmt} in {FinalTranAmt} & finally print it.
I don't know my structure is right or not.
{FinalTranAmt} = 0;
{BEGIN*REPEAT}
<tbody>
<tr>
<td>{CustID}</td>
<td>{CustName}</td>
<td>{CustPONo}</td>
<td>{TranID}</td>
<td>{TranDate}</td>
<td>{PostDate}</td>
<td>{TranAmt}</td>
<td>{STaxAmt}</td>
<td>{CreateUserID}</td>
</tr>
{FinalTranAmt} += {TranAmt} ;
{END*REPEAT}