How to get the updated count of rows in a table after changing the page number - selenium

Actually in the table i'm working on there is pagination. I could get the count of rows present in the first page.
When i change the page number, table row count is not getting updated as per the second page.
How to force selenium to update the count after changing the page number. page refresh is not the solution as i need to navigate to second page again
public Boolean checkMessageIsFailed(String message, String channelNameToCheck, String channelTypeToCheck) {
UIPublish uiPublish = new UIPublish(driver);
Boolean isMessageSent = null;
SimplifyUtils.waitTillElementFound(uiPublish.currentPageNumber, 60);
//getting the page count
int pageCount = Integer.parseInt( uiPublish.totalPages.getText());
for (int j=1; j< pageCount;pageCount++)
{
//getting the rows present in the table
int messagesCount = uiPublish.listOfTextInMessages.size();
for (int i = 0; i < messagesCount; i++)
{
//getting the text from each row to match
//matching the text of the required message sent with the messages present in the sent messages
if (uiPublish.listOfTextInMessages.get(i).getText().equalsIgnoreCase(message))
{
String currentChannel = driver.findElements(By.xpath("//*[#id='inbox-wrapper']//tr["+ (i + 1)+ "]")).get(i).getAttribute("data-original-title");
}
}
//navigating to naxt page if the condition is not matched
uiPublish.navigateToNextPage.click();
}
return isMessageSent;
}
<div class="grid simple">
<div class="grid-body no-border email-body">
<br>
<div class="row-fluid">
<div id="email-list" class="table-responsive">
<form id="schMsgFORM" name="schMsgFORM" action="/viewSentSchMessage.action"
method="post">
<table class="table table-striped table-hover" id="emails">
<thead>
<tr>
<th>
</th>
<th>Social Channel
</th>
<th>Message
</th>
<th>Scheduled Time
</th>
<th>Actions
</th>
</tr>
</thead>
<tbody>
<tr id="outputWTFrUjUyYlE1d1piNG1XUmNuUFBnUT09">
<td class="small-cell v-align-middle" style="width: 2%">
<div class="checkbox check-success ">
<input name="msgcheckbox" id="chkboxWTFrUjUyYlE1d1piNG1XUmNuUFBnUT09"
value="WTFrUjUyYlE1d1piNG1XUmNuUFBnUT09" type="checkbox">
<label for="chkboxWTFrUjUyYlE1d1piNG1XUmNuUFBnUT09"></label>
</div>
</td>
<td style="width: 150px">
<div class="account-sent">
<div class="row">
<div class="display-inline">
<div class="profile-pic" data-toggle="tooltip" title=""
data-original-title="galloway360">
<img class="account-profile"
src="http://pbs.twimg.com/profile_images/378800000473105984/b0ad2b50b4fb81303d32720afea274ea_normal.png"
alt="">
<div class="social-icon-pub">
<span
class="social-icon-twitter img-responsive social-icon-box">
</span>
</div>
</div>
</div>
</div>
</div>
</td>
<td style="width: 50%">
<div class="muted message-wrap">
<br>
Source: Auto 2016/12/08 17:35:30 Message: How's your day?
</div>
<p class="sch-details">
Sent by: Nagarjuna reddy
<em>Scheduled from Profile :
NA
</em>
</p>
</td>
<td style="width: 15%">
<p class="muted m-t-5">
2016-12-08 05:35 PM
</p>
<p class="region">
(Asia/Calcutta)
</p>
</td>
<td style="width: 10%">
<a
href="/social/editUpdate?s360securetoken=SU0wxc4jrR8DE8Lf5hzKnRYasjg&schMsgId=WTFrUjUyYlE1d1piNG1XUmNuUFBnUT09&pageSource=publish"
data-toggle="tooltip" title="" type="button"
class="btn btn-success btn-small" data-original-title="Edit">
<i class="fa fa-pencil">
</i>
</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>

Related

ASP.Net Core 5 Print Div Vertical Alignment Problem

I have tried various alignment settings, but nothing is making a difference. Please have a look at the far right column in the image below and notice that the price is shifted down compared with the columns to the left.
Note that this is the print preview
This is what the same table looks like on the web page when not printing.
You can see that in the web page, I have set the margin for the last column to mt-0.
Here is my code:
<div class="row">
<div class="col-4">
<button class="btn btn-primary" onclick="printDiv()">Print</button>
</div>
</div>
<div class="row" id="PrintDiv">
<div class="col-md-8 offset-2">
<div class="row d-flex">
<div class="col-8">
<p>
<h2>#ViewBag.FullName</h2>
<h4>Order History</h4>
</p>
</div>
<div class="col me-1">
<img src="#(Configuration.GetValue<string>("StorageContainerURL"))/store-logo.png" )
class="img-fluid " style="max-height:75px;width:auto" alt="Alternate Text" />
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Order ID</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model)
{
<tr>
<td class="align-middle">#order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td class="align-middle">#order.Id</td>
<td class="align-middle">
<ul style="list-style-type:none">
#foreach (var item in order.OrderItems)
{
<li>
<div class="alert alert-info" role="alert">
<span class="badge bg-success">#item.Amount</span> [#item.Price.ToString("c")] - #item.Product.Name
</div>
</li>
}
</ul>
</td>
<td class="mt-0">#order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>
</table>
</div>
</div>
#section Scripts{
<script type="text/javascript">
function printDiv() {
var divContents = document.getElementById("PrintDiv").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
}
Does anyone have any suggestions to make Total column align properly with the other columns?
I figured out the problem shortly after I posted the question. I realized that the Printed Version of the page would not recognize the Bootstrap classes. So instead, I changed all columns to use inline styles for alignment.
<tbody>
#foreach (var order in Model)
{
<tr>
<td style="vertical-align:text-top">#order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td style="vertical-align:text-top">#order.Id</td>
<td style="vertical-align:text-top">
<ul style="list-style-type:none">
#foreach (var item in order.OrderItems)
{
<li>
<div class="alert alert-info" role="alert">
<span class="badge bg-success">#item.Amount</span> [#item.Price.ToString("c")] - #item.Product.Name
</div>
</li>
}
</ul>
</td>
<td style="vertical-align:text-top">#order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>

Unable to calculate product qty

I'm trying to calculate the quantity of items in my vue. The problem I'm having is that my computed property isn't picking up my object, because my thinking was as you can see with the commented out section is that I was going to loop through it and calculate the quantity, but since I'm not able to grab productItems I'm not able to loop through it.
Here is my code
<template>
<div class="content-header">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr v-for="item in products">
<td>
{{ item['name'] }}
</td>
<td>
<input style="width: 100px; margin-left: 0; display: inline"
type="number" class="form-control"
v-model="productItems[item['name']]['unit']"
>
</td>
</tr>
<tr>
<td></td>
<td>
Consumption total: {{ consumptionTotal }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: [],
data(){
return {
productItems: {}
},
computed:{
consumptionTotal(){
console.log(this.productItems);
// return Object.keys(this.productItems).reduce((carry, item) => {
// carry += Number(this.productItems[item]['unit'])
// return carry;
// }, Number(0));
},
},
watch: {
},
methods: {
},
mounted() {
}
}
</script>
Try below steps. Hopefully it will helps you.
Step 1: productItems should be an array
Step 2: Calculate functions be like
computed: {
consumptionTotal () {
return this.productItems.reduce((total, item) => {
total += item.unit
return total
}, Number(0))
}
}
Step 3: HTML template will be like
<div class="content-header">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr v-for="item in productItems" :key="item.id">
<td>{{item.id}}</td>
<td>
{{item.name}}
</td>
<td>
<input style="width: 100px; margin-left: 0; display: inline" type="number" class="form-control" :value="item.unit">
</td>
</tr>
<tr>
<td></td>
<td>
Consumption total: {{ consumptionTotal }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
DEMO

Not able to check the check box, exception "element not visible"

In an table which can contain more rows, user is searchable using the email id. After searching, selecting the first check box. But selenium is throwing the element not visible exception.
//*[#id='share_user']/tbody/tr1/td1//label
//*[#id='share_user']/tbody/tr1/td1//input
//label[#for='checkbox_416']
last identifier is dynamic. Still getting the element not visible exception.
Table code is mentioned below
<table class="table table-striped table-hover dataTable" id="share_user"
aria-describedby="share_user_info">
<thead>
<tr role="row">
<th class="small-cell sorting" role="columnheader" tabindex="0"
aria-controls="share_user" rowspan="1" colspan="1" style="width: 137px;"
aria-label="Share Profile : activate to sort column ascending">Share Profile </th>
<th class="medium-cell sorting" role="columnheader" tabindex="0"
aria-controls="share_user" rowspan="1" colspan="1" style="width: 523px;"
aria-label="User Details: activate to sort column ascending">User Details</th>
<th class="medium-cell sorting_asc" role="columnheader" tabindex="0"
aria-controls="share_user" rowspan="1" colspan="1" style="width: 366px;"
aria-sort="ascending" aria-label="Access: activate to sort column descending">Access</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class="">
<div class="checkbox check-default">
<input name="checkUser" id="checkbox_416" value="416" class="shareCheck"
type="checkbox">
<label for="checkbox_416"></label>
</div>
</td>
<td class=" ">
<img src="" class="img-responsive display-inline share-image">
<div class="display-inline">
<p class="share-name">alexx</p>
<p class="muted">
<i class="fa fa-envelope" hidden="true"></i>
<span>alexxm360#gmail.com</span>
</p>
</div>
</td>
<td style="vertical-align: middle;" class=" sorting_1">
<div class="select2-container medium-cell" id="s2id_rolelink416"
style="float:left;">
<a href="javascript:void(0)" onclick="return false;" class="select2-choice"
tabindex="-1">
<span class="select2-chosen">PROFILE ADMIN</span>
<abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow">
<b></b>
</span>
</a>
<input class="select2-focusser select2-offscreen" id="s2id_autogen11"
type="text">
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<input autocomplete="off" autocorrect="off"
autocapitalize="off" spellcheck="false" class="select2-input"
type="text">
</div>
<ul class="select2-results">
</ul>
</div>
</div>
<select name="profileUsers.roleId" id="rolelink416"
class="medium-cell select2-offscreen" style="float:left;" tabindex="-1">
<option value="6">PROFILE ADMIN</option>
<option value="7">PROFILE AGENT</option>
<option value="8">PROFILE VIEWER</option>
<option value="196">profile role</option>
</select>
</td>
</tr>
</tbody>
</table>
providing the screen shots as well.
Try to use explicit wait with Expected Conditions
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement checkbox = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#id='share_user']/tbody/tr[1]/td[1]//input")));
checkbox.click();
You can use the following expression, I have verified working fine.
driver.findElement(By.xpath("//*[#id='share_user']/tbody/tr[1]/td[1]/div")).click();
Try this
int ele_size=driver.findElements(By.xpath("locator")).size();
driver.findElements(By.xpath("locator")).get(ele_size-1).click();
We might encounter element not visible exception if element matching the locator existed in the DOM but is not currently visible. So we have to take the size of the element in first statement then in next statement we have to take the first element from the list and click on element.
Used this //*[#id='share_user']/tbody/tr[1]/td[1]/div worked

XPath: Get previous item, filtering by class

I have this HTML:
<div class="DivHeaderSizes" data-subgroup="1">
<img style="display:none" class="help-size-img-colorbox" data-subgroup="1_Man" src="Man.gif">
<div class="subgroup-description">Jogging</div>
<div class="help-size-link cboxElement" data-subgroup="1_Man">Tutorial</div>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="41" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="41">41</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_41" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_41" class="txt-Size" data-price="19.50" data-size="41" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="42" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="42">42</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_S" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_S" class="txt-Size" data-price="19.50" data-size="42" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Using Selenium with C# and starting from input element with name
ctl00$CthBody$sizelist$TxtSize_41
I want the XPath expression to get the text "Jogging". Thanks.
If the context node is input[#name='ctl00$CthBody$sizelist$TxtSize_41'], then the following XPath will select the div containing "Jogging":
(preceding::div[#class='subgroup-description'])[1]
Or you could use:
ancestor::div[1]/preceding-sibling::div[1]/div[#class='subgroup-description']

AngularJs in not working in Partial View

I am working in asp.net mvc4 with Razor View. I am using angularJs with it. But in partial view angularJs is not working.
Here is my view code:
#using (Html.BeginForm("Create", "Requisition", FormMethod.Post, new { id = "RequisitionForm", ng_app = "" }))
{
#Html.ValidationSummary(true)
<div class="divSection">
<div class="divBox divSectionLeftLeft">
<label>Product</label>
</div>
<div class="divBox divSectionLeftRight">
<input type="text" id="ProductName" name="ProductName" ng-model="newItem.ProductName" />
</div>
<div class="divBox divSectionRightLeft">
<label>Quantity</label>
</div>
<div class="divBox divSectionRightRight">
<input type="text" id="Quantity" name="Quantity" ng-model="newItem.Quantity" />
</div>
</div>
<div class="divClear">
</div>
<div class="ContainerRowButton">
<button type="button" class="btn btn-primary btn-mini" ng-click="items.push(newItem); newItem={}">Add Req-Detail</button>
</div>
<div style="width: 800px; height: 160px; overflow-y: scroll">
<table class="table table-striped table-bordered" id="RequisitionDetailsTbl" ng-init="items=[]">
<thead>
<tr>
<th>Product
</th>
<th>Quantity
</th>
<th>Action</th>
</tr>
</thead>
<tr ng-hide="items.length">
<td colspan="3">No Requisition Added Yet. . .</td>
</tr>
<tbody ng-repeat="item in items">
<tr>
<td>{{item.ProductName}}
</td>
<td>{{item.Quantity | number:2}}
</td>
<td>
<button type="button" id="delReqDetail" ng-click="items.splice($index, 1);" class="btn btn-primary btn-mini">Delete</button>
</tr>
</tbody>
</table>
</div>
}
My _Layout is like this:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery, ~/bundles/jqueryui, ~/bundles/others")
Here "~/bundles/others" contains the angular.js.
I am not getting any error in firebug console. What wrong am I doing?
One more thing I am showing the partialview in popup window. The code Works fine if I don't use it in popup window.