I am working with Selenide, however, I need to count the number of rows in the table to write tests. The table has the functionality of displaying the number of rows, I want to check that when selecting, for example, 15 rows, 15 is displayed in the table. However, I do not understand exactly how to count them using selenide.
<table class="table_pay">
<tbody>
<div class="srringtable">
<div class="srringtable">
<div class="srringtable">
<div class="srringtable">
<div class="srringtable">
<div class="srringtable">
<div class="srringtable">
<div class="srringtable">
</tbody>
</table>
You can count the number of rows in the table using Selenide by finding all elements with the class "srringtable" and then using the .size() method.
int rowCount = $$(".srringtable").size();
JQuery will be easy.
let rowCount = $(".srringtable").length;
$("input#count").val(rowCount);
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<table class="table_pay">
<tbody>
<div class="srringtable"></div>
<div class="srringtable"></div>
<div class="srringtable"></div>
<div class="srringtable"></div>
<div class="srringtable"></div>
<div class="srringtable"></div>
<div class="srringtable"></div>
<div class="srringtable"></div>
</tbody>
</table>
<input id="count">
Related
<div _ngcontent-c8="" class="col-md-2 col-sm-3 mar-top-15 ng-star-inserted">
<div _ngcontent-c8="" class="card card-style half shadow border-0 pointer mat-ripple" matripple="">
<div _ngcontent-c8="" class="card-top">
<h4 _ngcontent-c8="" class="card-text top-part top-tesxtarea" style="background-color: rgb(117, 65, 0);">Action For Me
<mat-icon _ngcontent-c8="" class="none mat-icon mat-black material-icons" color="black" role="img" aria-hidden="true" id="display_2">grade</mat-icon>
</h4>
</div>
<div _ngcontent-c8="" class="card-buttom">
<h1 _ngcontent-c8="" class="card-text buttom-number" id="count_2">11</h1>
</div>
</div>
</div>
If you have many of these div blocks and want to extract text from the one which grade is equal to 11 you can use expression like:
//h1[contains(#class,'buttom') and text()='11']/parent::*/preceding-sibling::*/descendant::h4
Demo:
More information:
XPath Tutorial
XPath Axes
XPath Operators & Functions
I hava a play.jsp and I wanted to display the data in a formatted way like the question id and question in a single line and answer in next single line. How can I do that? I would be very thankful for the answers.
<div class="container">
<table class="table">
<center>
<p>Question</p>
<c:forEach items="${quiz}" var="qz">
<p> ${qz.id}</p>
<p>${qz.question}</p>
<p>${qz.ans1}</p>
<p> ${qz.ans2} </p>
<p>${qz.ans3} </p>
</c:forEach>
</center>
</table>
</div>
Now I am getting output in this way
Just put them in the same <p></p> like <p>${qz.id} ${qz.question}</p>
Also <center> tag was deprecated in HTML5 because it defines the presentation of its contents -- it doesn't describe its contents.
Use CSS instead:
.centered {
text-align: center;
}
.centered {
text-align: center;
}
<div class="container">
<table class="table">
<div class="centered">
<p>Question</p>
<c:forEach items="${quiz}" var="qz">
<p>${qz.id} ${qz.question}</p>
<p>${qz.ans1}</p>
<p> ${qz.ans2} </p>
<p>${qz.ans3} </p>
</c:forEach>
</div>
</table>
</div>
I am trying to export html table using js provided by Ngiriraj Table Export Demo. My table is paginated by bootstrap-table.js .
When I am exporting data in any format only 1 table page is getting exported.
Also, while exporting pdf, I am only getting only 4 columns in pdf.
The code is attached below.
Jsp page:
<div style="padding: 10px;">
<br>
<table id="table" data-search="true" data-show-columns="true"
data-pagination="true">
<thead>
<tr>
<c:forEach items="${keys}" var="keys">
<th data-field="${keys}" data-sortable="true">${keys}</th>
</c:forEach>
</tr>
</thead>
</table>
<nav class="navbar navbar-default export">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Download grid data as</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#"
onClick="$('#table').tableExport({type:'excel',escape:'false'});">XLS</a></li>
<li><a href="#"
onClick="$('#table').tableExport({type:'csv',escape:'false'});">CSV</a></li>
<li><a href="#"
onClick="$('#table').tableExport({type:'pdf',escape:'false'});">PDF</a></li>
<li><a href="#"
onClick="$('#table').tableExport({type:'json',escape:'false'});">JSON</a></li>
</ul>
</div>
</nav>
</div>
I have included .js files as:
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script
src="${pageContext.request.contextPath}/static/js/tableExport.js"></script>
<script
src="${pageContext.request.contextPath}/static/js/jquery.base64.js"></script>
<script src="${pageContext.request.contextPath}/static/js/base64.js"></script>
<script src="${pageContext.request.contextPath}/static/js/sprintf.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jspdf.js"></script>
For all above .js files please refer Ngiriraj Table Export demo.
Thanks in advance.
Currently working on Selenium WebDriver and using Java.I want to select values in date range from the drop down.. I want to know how can I select the values as Date, Month and year in the year range date picker
HTML Code:
<html>
<head>
<body>
<div class="display_wait_overlay">
<div class="section wrapper">
<div id="test-not" class="fade modal text-left">
<div id="monthlyinvoiceremainder" class="fade modal text-left">
<div id="monthlyinvoiceremainderBox" class="btm_bx">
<div id="depositDetailsResponse" class="fade modal text-left">
<div id="depositDetails" class="fade modal text-left">
<footer class="footer navbar_custom" style="">
<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-bottom" style="display: block; top: 155.933px; left: 758.133px;">
<div class="datepicker-days" style="display: none;">
<div class="datepicker-months" style="display: none;">
<div class="datepicker-years" style="display: block;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th class="datepicker-switch" colspan="5">2010-2019</th>
<th class="next" style="visibility: hidden;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="year old">2009</span>
<span class="year">2010</span>
<span class="year">2011</span>
<span class="year">2012</span>
<span class="year">2013</span>
<span class="year">2014</span>
<span class="year">2015</span>
<span class="year disabled">2016</span>
<span class="year disabled">2017</span>
<span class="year disabled">2018</span>
<span class="year disabled">2019</span>
<span class="year new disabled">2020</span>
</td>
</tr>
</tbody>
<tfoot>
</table>
</div>
</div>
</body>
</html>
This page displays several records when i select the Crime Number form the href tag i only want to post the data in that row only. Can someone tell me where i am going wrong here:
I did a different form for each record that returns from the server but only the first record gets returned all the time.
EDIT
The page is POST using java script and the Id its receiving is NULL
The crimeRecNo is posted accurately however the victim and criminal list only the first row is posted and not the selected one.Why????
function submitPage(crimeRecNo) {
document.getElementById("crimeList"+$('#crimeRecNo').val()).action = "getCrime/"+ crimeRecNo + ".htm";
document.getElementById("crimeList"+$('#crimeRecNo').val()).method = "POST";
document.getElementById("crimeList"+$('#crimeRecNo').val()).submit();
}
Html
</head>
<body>
<c:forEach items="${crimes}" var="crime">
<form:form id="crimeList${crime.crimeRecNo}" name="crimeList" commandName="crime">
<div id="content">
<div class="row-${crime.crimeRecNo}">
<h2>
<a class="crimeRecNo" href="${crime.crimeRecNo}">Crime Record
Number : ${crime.crimeRecNo}</a><form:input path="crimeRecNo" id="crimeRecNo"
value="${crime.crimeRecNo}" />
</h2>
<div class="crimeReport">
<label>${crime.crimeDetails}</label>
</div>
<div id="container">
<div id="crimePhotoz">
<div id="victimLabel">
<label class="heading">Victims/Witness In Crime</label>
</div>
<div class="grid_row">
<c:forEach items="${crime.victims}" var="victim">
<input type="hidden" value="${victim.photo}" class="foto" />
<canvas class="canvas" height="200" width="200"></canvas>
</c:forEach>
<c:forEach items="${crime.victims}" var="victim">
<div class="names">
<a class="crimeNames" href="${victim.socialSecurityNumber}">${victim.name}</a>
<form:input path="victims" id="victims" value="${victim.socialSecurityNumber}" />
</div>
</c:forEach>
</div>
<div id="criminalLabel">
<label class="heading">Criminals In Crime</label>
</div>
<div class="grid_row2">
<c:forEach items="${crime.criminals}" var="criminal">
<input type="hidden" value="${criminal.photo}" class="foto" />
<canvas class="canvas" height="200" width="200"></canvas>
</c:forEach>
<c:forEach items="${crime.criminals}" var="criminal">
<div class="names">
<a class="crimeNames" href="${criminal.socialSecurityNumber}">${criminal.name}</a>
<form:input path="criminals" id="criminals" value="${criminal.socialSecurityNumber}" />
</div>
</c:forEach>
</div>
</div>
</div>
</div>
<hr>
</div>
</form:form>
</c:forEach>
</body>
</html>
Maybe you are missing some quotes?
document.getElementById(${crime.crimeRecNo})
If ${crime.crimeRecNo} is a string this becomes
document.getElementById(myRecNo)
which is invalid javascript. In this case you should add quotes:
document.getElementById("${crime.crimeRecNo}")
If ${crime.crimeRecNo} is a number you don't need quotes but then you might have invalid ids. According to this html ids must at least start with a character. Iam not sure if this can cause problems but maybe you should try <form id="record-${crime.crimeRecNo}" .. >