PDF not getting generated when using iText API with CSS - java

I am trying to generate pdf from HTML having CSS.
Below is the code snippet
Document document = new Document();
PdfWriter pdfWriter = PdfWriter.getInstance(document, new FileOutputStream(outFileName));
document.open();
String htmlTxt = FileUtils.readFileToString(new File(dirPath + inpFileName), "UTF-8");
ByteArrayInputStream fis = new ByteArrayInputStream(htmlTxt.getBytes("UTF-8"));
XMLWorkerHelper worker = XMLWorkerHelper.getInstance();
// worker.parseXHtml(pdfWriter, document, fis);
worker.parseXHtml(pdfWriter, document, new FileInputStream(dirPath + inpFileName),
new FileInputStream(CSS));
// close the document
document.close();
// close the writer
pdfWriter.close();
I tried generating pdf using
worker.parseXHtml(pdfWriter, document, fis);
PDF gets generated without
which worked fine then used
worker.parseXHtml(pdfWriter, document, new FileInputStream(dirPath + inpFileName), new FileInputStream(CSS));
In this case pdf gets generated but without any content .
I also tried how to use CSS resolver as suggested in iText Parse HTML with CSS Example
IMPORTANT Note -- The HTML has been generated from jTidy API.
Here is the HTML and CSS file
#pdfPreview { font-family: arial }
#pdfPreview .page_1 {position:relative; overflow: hidden;padding: 0px;border: none;width: 90%;margin:0 auto;}
#pdfPreview .page_1 .id_1 {border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 100%;overflow: hidden;}
#pdfPreview .page_1 .id_2 {border:none;margin: 107px 0px 0px 8px;padding: 0px;border:none;width: 720px;overflow: hidden;}
#pdfPreview .page_1 #dimg1 {position:absolute;top:181px;left:0px;z-index:-1;width:736px;height:677px;}
#pdfPreview .page_1 #dimg1 #img1 {width:736px;height:677px;}
#pdfPreview .page_1 #inl_img1 {position:relative;width:7px;height:17px;}
#pdfPreview #page_2 {position:relative; overflow: hidden;margin: 41px 0px 37px 40px;padding: 0px;border: none;width: 776px;}
#pdfPreview #page_2 #pdfPreview .id_1 {border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 776px;overflow: hidden;}
#pdfPreview #page_2 .id_2 {border:none;margin: 28px 0px 0px 8px;padding: 0px;border:none;width: 720px;overflow: hidden;}
#pdfPreview #page_2 #dimg1 {position:absolute;top:7px;left:0px;z-index:-1;width:741px;height:935px;}
#pdfPreview #page_2 #dimg1 #img1 {width:741px;height:935px;}
#pdfPreview .vehicleDescriptionTable{
border: black 1px solid;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(1){
width: 3%;
padding-left: 1%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(2){
width: 57%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(3){
width: 3%;
padding-left: 1%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(4){
width: 37%;
}
#pdfPreview td{
vertical-align: top;
}
#pdfPreview tr{
/* line-height: 0em; */
}
#pdfPreview html {
font: 13px 'Arial';
}
#pdfPreview p.sectionHead {
text-align: center;
font: 16px 'Arial' bold;
background-color: #ccc;
height: 2em;
padding-top: .5em;
margin-bottom: 0;
border-top: black 1px solid;
border-left: black 1px solid;
border-right: black 1px solid;
/* width: 774px; */
}
#pdfPreview p.subSectionHead {
font-size: 14px;
font-weight: bold;
background-color: #eee;
margin-top: 0;
height: 1.5em;
padding-left: 2%;
padding-top: .2em;
margin-bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
/* border-bottom: none; */
/* border-right: black 1px solid; */
/* width: 100%; */
}
#pdfPreview table {
/* border: 1px solid black; */
border-bottom: 4em;
width: 100%;
}
#pdfPreview td:nth-child(3) {
border-left: black 1px solid;
}
#pdfPreview tbody {
border-bottom: black 1px solid;
/* padding-bottom: 1em; */
}
#pdfPreview p {
margin-top: 0;
margin-bottom: .2em;
}
#pdfPreview .floatright{
float: right;
text-align: right;
}
#pdfPreview .floatleft{
float:left;
text-align: left;
}
#pdfPreview .topmargin{
margin-top:.4em;
}
/*Melissa Page2*/
#pdfPreview #page2, #vehicleListTable, #table3 {
width: 90%;
margin: 0 auto;
border-spacing: 0px;
}
#pdfPreview #page2 thead {
background-color: #eee;
}
#pdfPreview #page2 thead th:first-child {
padding-bottom: 2rem;
text-align: left;
}
#page2 thead th:nth-child(2) {
padding-bottom: 2rem;
text-align: right;
}
#pdfPreview #page2 tbody .simple td {
font-weight: bold;
}
#pdfPreview #page2 tbody .simple td p {
font-weight: normal;
}
#pdfPreview #page2 tbody .header {
width: 15%;
padding: .3rem;
background-color: #eee;
font-weight: bold;
}
#pdfPreview #page2 tbody .subheader {
width: 10%;
padding: .3rem;
}
#pdfPreview #page2 tbody .subtableheader {
text-align: center;
}
#pdfPreview #page2 tbody .fillout {
padding: .3rem;
text-align: center;
color: #E6E6E6;
}
#pdfPreview #page2 tbody .filledout {
padding: .3rem;
text-align: center;
color: black;
}
#page2 tbody .bottomrow {
padding-bottom: 6rem;
text-align: left;
}
#pdfPreview .border-top {
border: 1px solid black;
}
#pdfPreview .border-top-left{
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .border-middle-left {
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .border-middle-fix{
border-bottom: 1px solid black;
}
#pdfPreview .border-middle {
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .bottom-left {
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .bottom-right {
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .footer1{
margin-bottom:4em;
}
#pdfPreview td.topmargin{
width:50%;
}
#pdfPreview .footerClass{
width:90%;
margin:0 auto;
padding-bottom:4em;
}
#pdfPreview .mainBodyHeadArea{
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
}
#pdfPreview .submissionCellLeft{
width:50%;
padding:1em;
}
#pdfPreview .submissionCellRight{
width: 50%;
padding:1em;
border-left: 1px solid black;
}
#pdfPreview td.addressCity {
width: 40%;
}
#pdfPreview td.addressZip {
width: 20%;
}
#pdfPreview td.addressState {
width: 20%;
}
#pdfPreview td.addressCountry {
width: 20%;
border-left:none;
}
#pdfPreview table{
border-spacing: 0;
}
#pdfPreview .addressRow{
padding: 0;
}
#pdfPreview #vehicleListTable th, #pdfPreview #vehicleListTable td {
padding:.5em;
font-weight: bold;
}
#pdfPreview .filloutHeight{
height:1em;
}
#pdfPreview .borderLeft{
border-left:1px solid black;
}
#pdfPreview .fillAddressCity,.fillAddressState,.fillAddressCountry,.fillAddressZip{
margin-left: 3em;
}
#pdfPreview .center{
text-align: center;
}
#pdfPreview #vehicleListTable, #pdfPreview #table3 {
width:90%;
margin:0 auto;
}
#pdfPreview td {
padding:.5em;
}
#pdfPreview {
width: 800px;
}
#pdfPreview p, td{
font-size:12px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml-stylesheet href="foo.css" media="all" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Java (vers. 2009-12-01), see jtidy.sourceforge.net" />
<meta charset="UTF-8" />
<title>PDF HTML Title</title>
<link rel="Stylesheet" type="text/css" href="previewStylesPDF.css" />
</head>
<body>
<div id="pdfPreview">
<table id="page2">
<thead>
<tr>
<th colspan="2" class="border-top-left">Table Title</th>
<th colspan="6" class="border-top">Author Name</th>
</tr>
</thead>
<tbody>
<tr class="simple">
<td colspan="8" class="border-middle-left">Single or Multiple
Vehicle Registration for a Single Customer</td>
</tr>
<tr class="simple">
<td colspan="8" class="border-middle-left">
<p>Instructions for members only: Scan and upload this
completed and <b><ins style="font-weight: bold">signed</ins> form
to the mail-id myName#Company.com</b></p>
</td>
</tr>
<tr>
<td class="header border-middle-left">Dealer</td>
<td class="subheader border-middle-fix">Dealer Name</td>
<td colspan="4" class="border-middle fillDealerName filledout">
Mercedez</td>
<td class="subheader border-middle">Phone</td>
<td colspan="2" class="border-middle fillDealerPhone filledout">
(###)###-####</td>
</tr>
<tr>
<td class="subheader border-middle-left">Name Dealer Code</td>
<td class="border-middle-fix fillDealerCode filledout">BorderLand</td>
<td class="subheader border-middle">Dealer Contact Name</td>
<td colspan="3" class="border-middle fillDealerContact filledout">
</td>
<td class="subheader border-middle">Email</td>
<td class="border-middle fillDealerEmail filledout"></td>
</tr>
</tbody>
</table>
<table id="vehicleListTable">
<thead>
<tr>
<th class="header border-middle-left">Serial Number</th>
<th colspan="4" class="subtableheader border-middle-fix">COL TITLE #1</th>
<th colspan="2" class="subtableheader border-middle borderLeft">COL TITLE #2</th>
<th colspan="2" class="subtableheader border-middle">COL TITLE #3</th>
</tr>
</thead>
<tbody>
<tr class="filloutHeight">
<td class="fillout border-middle-left filloutHeight"></td>
<td class="fillout border-middle-fix filloutHeight" colspan="4">
</td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
</tr>
<tr class="filloutHeight">
<td class="fillout border-middle-left filloutHeight"></td>
<td class="fillout border-middle-fix filloutHeight" colspan="4">
</td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
</tr>
</tbody>
</table>
<table id="table3">
<tbody>
<tr>
<td class="header border-middle-left">Customer</td>
<td class="subheader border-middle-fix">Name</td>
<td colspan="3" class="border-middle fillCustomerName filledout">
Atlantis City</td>
<td class="subheader border-middle">Phone</td>
<td colspan="2" class="fillout border-middle">Phone</td>
</tr>
<tr>
<td class="subheader border-middle-left" colspan="2">Authorized
Representative Name</td>
<td class="fillout border-middle" colspan="6">Name</td>
</tr>
<tr>
<td class="subheader border-middle-left">Email</td>
<td class="fillout border-middle" colspan="7">Email</td>
</tr>
<tr>
<td class="subheader border-middle-left">Address</td>
<td class="border-middle filladdress1 filledout" colspan="7">Street Address</td>
</tr>
<tr>
<td colspan="8" class="addressRow">
<table>
<tbody>
<tr>
<td class="subheader border-middle-left addressCity">City <span
class="fillAddressCity filledout">ATLANTIS</span></td>
<td class="subheader border-middle addressState">State/Province
<span class="fillAddressState filledout">EE</span></td>
<td class="subheader border-middle addressCountry">Country</td>
<td class="subheader border-middle addressZip">Zip/Postal Code
<span class="fillAddressZip filledout">99999</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="4" class="subheader border-middle-left">The above
vehicles will be used for the following vocation / applications
only:</td>
<td class="fillout border-middle" colspan="4">Vocation</td>
</tr>
<tr class="simple">
<td colspan="8" class="border-middle-left">
<p><b>Customer Certification:</b> All information to go here.</p>
</td>
</tr>
<tr>
<td colspan="4" class="subheader bottomrow bottom-left">Customer
Authorized customer representative signature (REQUIRED)</td>
<td colspan="4" class="subheader bottomrow bottom-right">Date</td>
</tr>
</tbody>
</table>
<div class="footerClass">
<div class="floatleft topmargin">
<p class="">PDF (Rev: 4/2/2014)</p>
</div>
<div class="floatright topmargin">
<p class="">Page 2 of 2</p>
</div>
</div>
</div>
</body>
</html>

Related

How can I bind an array of data to html table using Spring boot REST apllication and not by Spring MVC

I have a Spring Boot REST application, in which one of the REST API sends mail to the respective users.
I have designed a mailer template in Html and my rest API has data in an array which I am binding to an Html table using and tags.
How can I bind an array of data to Html table using Spring Boot REST application and not by Spring MVC
1. HTML code
<tr>
<td style="padding: 20px 18px 0; color: #888686; font-size: 15px; font-family: 'Open Sans';">
<table style="border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
DATE</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
AVAILABILITY</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK END TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK END TIME</th>
</tr>
<c:forEach var="oldList" items="${scheduleDetailsOld}">
<tr>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.day}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.availability}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workEndTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakEndTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</td>
</tr>
2.email sender method
public void shiftUpdatedMailForEditor(Staff staff) {
new Thread(() -> {
try {
Map<String, String> values = new HashMap<>();
values.put("getName", staff.getName());
values.put("getSubject", "Work schedule details have been modified.");
mailerService.sendStaffShiftUpdatedForEditorEmail(values, staff.getEmail());
} catch (PaperTrueException e) {
e.printStackTrace();
}
}).start();
}
3. get HTML temlate service
protected void sendStaffShiftUpdatedForEditorEmail(Map<String, String> valuesMap, String receiverEmail)
throws PaperTrueJavaException {
// concerned Editor (receiverEmail)
System.out.println("Inside sendStaffShiftUpdatedForEditorEmail");
mailer.sendMail("xyz#gmail.com", "xyz#gmail.com", valuesMap.get("getSubject"),
formatHtml(getHTMLBody(HtmlTemplateURL), valuesMap));
}
4. here is my controller
#PostMapping("/update-schedule-details")
public ResponseEntity<StatusResponse> updateScheduleDetails(#Valid #RequestBody addScheduleDetailsBody body,
Model model) {
StatusResponse statusResponse = new StatusResponse();
try {
util.isStaffLoggedIn(request, response, List.of(StaffRole.EDITOR, StaffRole.HR_MANAGER));
Iterator<AddScheduleDetails> iterator = body.getScheduleDetails().iterator();
ArrayList<ScheduleDetails> scheduleDetailsNew = new ArrayList<ScheduleDetails>();
ArrayList<ScheduleDetails> scheduleDetailsEarlier = new ArrayList<ScheduleDetails>();
while (iterator.hasNext()) {
AddScheduleDetails addScheduleDetails = (AddScheduleDetails) iterator.next();
if (scheduleDetailsService.getShift(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId())) {
addScheduleDetails(addScheduleDetails);
} else {
scheduleDetailsEarlier = updateScheduleDetails(addScheduleDetails, scheduleDetailsEarlier);
}
ScheduleDetails scheduleDetails = scheduleDetailsService.get(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId());
scheduleDetailsNew.add(scheduleDetails);
}
model.addAttribute("scheduleDetailsOld", scheduleDetailsEarlier);
model.addAttribute("scheduleDetailsNew", scheduleDetailsNew);
emailSender.shiftUpdatedMailForEditor(util.getLoggedInStaff(request));
statusResponse.setStatus(new Status("Editor Schedule Details Updated Successfully"));
} catch (PaperTrueException e) {
util.logException(e, LogType.GET_JOBS);
statusResponse.setStatus(new Status(e.getCode(), e.getMessage()));
}
return ResponseEntity.ok(statusResponse);
}

If you use some standard library like Datatables, it will be much easier. See this,
https://datatables.net/reference/option/ajax.data
This way, you can just send json data from your REST API in response

Header banner to start CSS after another div

My code with css is defined in my JSP and css as follows:
basic.css
*{
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css
#Outage{
width: 984px;
margin: 0 auto;
}
#bgd{
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper{
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner{
padding-right: 100px;
overflow: auto;
}
header.jsp
<div id="bgd">
<div id="Wrapper">
<div><img src="<%=contextPath%>/images/logo.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
<div>
<div>
Now I want to add outage at the top of all this as follows:
<div id="Outage">
<div id="notificationDiv" style="display:none; width: 255px; height: 34px;">Test</div>
</div>
<div id="bgd">...////...</div>
But this is acting as a layover on "bgd", so the img gets cuts off. I would want actually "Outage" to have a plain background and "bgd" and its css to start only after "Outage". Any help highly appreciated.
basic.css * {
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css #bgd {
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper {
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner {
padding-right: 100px;
overflow: auto;
}
<div id="bgd">
<div id="Wrapper">
<div><img src="https://data.photofunky.net/output/image/4/1/7/1/4171e9/photofunky.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
</div>
</div>
I see that the div outage gets the same body as the dbg. Is there a way to apply body to my 1st div and bgd has its own div?

Entering values in a table through java selenium

Got a table with below html structure
<table style="width: 100%;" data-bind="foreach: CargoViewModel.PackageArray()">
<tbody style="border-bottom: 1px solid black !important">
<tr>
<td style="width: 19%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 20%; color: rgb(51, 51, 51);">
<input type="text" style="width: 85%;" data-bind="value: NoOfPkgs, hasFocus: NoOfPackagesFocus, event: { blur: OnNoOfPkgsChange }" onkeypress="return allowNumericOnly(event);" ondrop="AllowOnPaste(event,this,'Numeric');" onpaste="AllowOnPaste(event,this,'Numeric');" maxlength="5" placeholder="Packages">
</td>
<td colspan="2" style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<div class="input-group" data-bind="singlePopup: { pkgtype: 'PkgType', pkgtypename: 'PkgTypeName', callback: $root.PkgTypePopup }">
<input type="text" class="igPWCTextBox" data-bind="value: PkgTypeName, attr: { 'id': ($index() + 1) + '_txtPkgName' }, event: { blur: OnPkgsTypeChange.bind($data, 'CargoEdit') }, hasFocus: PkgTypeNameFocus" oncopy="return false" ondrag="return false" onpaste="return false" placeholder="Type" id="1_txtPkgName"><span class="input-group-btn">
<button class="butn" type="button" data-bind="attr: { 'id': ($index() + 1) + '_btnPkgType' }" tabindex="-1" id="1_btnPkgType"><i class="icon-search"></i></button>
</span>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsHazardous">
<a tabindex="-1" data-bind="attr: { 'title': HazardousIconTitle }" class="ui-icon icon-warning-sign red" style="font-size: 1.4em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#" title="DG"></a>
</td>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsReefer">
<a tabindex="-1" class="ui-icon icon-asterisk blue" title="Temperature Controlled" style="font-size: 1.6em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#"></a>
</td>
<td align="right" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsNonStackable"><span style="margin-right: 5px; vertical-align: middle; font-weight: bold; font-size: 14px;" title="Non Stackable">NS</span></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossPerPiece, event: { blur: OnPkgGrossPerPiece }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Per Piece">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossWeight, event: { blur: OnPkgGrossWeightChange }, hasFocus: PkgGrossWeightFocus" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Gross Weight">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 17%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgLength, event: { blur: OnPkgLengthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="L">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgWidth, event: { blur: OnPkgWidthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="W">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgHeight, event: { blur: OnPkgHeightChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="H">
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgVolume, event: { blur: OnPkgVolumeChange }, hasFocus: PkgVolumeFocus" onkeypress="allowNumbersafterDecimalPoint(event,this,IHDecimals.VolCBM);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Volume">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayVolumeUOM()">m<sup>3</sup></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 23%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea rows="3" title="Shipping Marks" style="width: 4.63cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" data-bind="value: MarksandNos, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), change: OnChangeCargoInput.bind($data, 'PkgMarks') }" placeholder="Shipping Marks"></textarea>
</td>
<td style="width: 27%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea title="Description" style="width: 5.51cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" rows="3" data-bind="value: GoodsDescription, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), change: OnChangeCargoInput.bind($data, 'PkgDesc') }" placeholder="Description"></textarea>
</td>
</tr>
</tbody>
<tbody style="border-bottom: 1px solid black !important">
<tr>
<td style="width: 19%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 20%; color: rgb(51, 51, 51);">
<input type="text" style="width: 85%;" data-bind="value: NoOfPkgs, hasFocus: NoOfPackagesFocus, event: { blur: OnNoOfPkgsChange }" onkeypress="return allowNumericOnly(event);" ondrop="AllowOnPaste(event,this,'Numeric');" onpaste="AllowOnPaste(event,this,'Numeric');" maxlength="5" placeholder="Packages">
</td>
<td colspan="2" style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<div class="input-group" data-bind="singlePopup: { pkgtype: 'PkgType', pkgtypename: 'PkgTypeName', callback: $root.PkgTypePopup }">
<input type="text" class="igPWCTextBox" data-bind="value: PkgTypeName, attr: { 'id': ($index() + 1) + '_txtPkgName' }, event: { blur: OnPkgsTypeChange.bind($data, 'CargoEdit') }, hasFocus: PkgTypeNameFocus" oncopy="return false" ondrag="return false" onpaste="return false" placeholder="Type" id="2_txtPkgName"><span class="input-group-btn">
<button class="butn" type="button" data-bind="attr: { 'id': ($index() + 1) + '_btnPkgType' }" tabindex="-1" id="2_btnPkgType"><i class="icon-search"></i></button>
</span>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsHazardous">
<a tabindex="-1" data-bind="attr: { 'title': HazardousIconTitle }" class="ui-icon icon-warning-sign red" style="font-size: 1.4em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#" title="DG"></a>
</td>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsReefer">
<a tabindex="-1" class="ui-icon icon-asterisk blue" title="Temperature Controlled" style="font-size: 1.6em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#"></a>
</td>
<td align="right" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsNonStackable"><span style="margin-right: 5px; vertical-align: middle; font-weight: bold; font-size: 14px;" title="Non Stackable">NS</span></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossPerPiece, event: { blur: OnPkgGrossPerPiece }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Per Piece">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossWeight, event: { blur: OnPkgGrossWeightChange }, hasFocus: PkgGrossWeightFocus" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Gross Weight">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 17%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgLength, event: { blur: OnPkgLengthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="L">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgWidth, event: { blur: OnPkgWidthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="W">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgHeight, event: { blur: OnPkgHeightChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="H">
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgVolume, event: { blur: OnPkgVolumeChange }, hasFocus: PkgVolumeFocus" onkeypress="allowNumbersafterDecimalPoint(event,this,IHDecimals.VolCBM);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Volume">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayVolumeUOM()">m<sup>3</sup></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 23%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea rows="3" title="Shipping Marks" style="width: 4.63cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" data-bind="value: MarksandNos, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), change: OnChangeCargoInput.bind($data, 'PkgMarks') }" placeholder="Shipping Marks"></textarea>
</td>
<td style="width: 27%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea title="Description" style="width: 5.51cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" rows="3" data-bind="value: GoodsDescription, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), change: OnChangeCargoInput.bind($data, 'PkgDesc') }" placeholder="Description"></textarea>
</td>
</tr>
</tbody>
</table>
How can I send values (through sendkeys) into textboxes and checkboxes associated with each row. How to traverse through each row with in this table.
The rows can also be dynamically added but how can I send values to textboxes and select checkboxes with in this table structure
Trying to achieve this through Selenium Java

This piece of code after hits and misses with the xpath(s) is working well.
List<WebElement> tbodyElements = driver.findElements(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody"));
System.out.println(tbodyElements.size());
for(int i=1; i<= tbodyElements.size(); i++)
{
String value=null;
if(i%2 == 0)
{
value="Bag";
}
else if(i%2==1)
{
value="Pallet";
}
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[1]/table/tbody/tr[1]/td[1]/input")).sendKeys("10");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[2]/table/tbody/tr[2]/td/input")).sendKeys("100");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[3]/table/tbody/tr[2]/td/input")).sendKeys("200");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[1]/table/tbody/tr[2]/td[3]/input")).click();
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[4]/textarea")).sendKeys("SM");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[5]/textarea")).sendKeys("Description");
driver.findElement(By.id(i+"_txtPkgName")).sendKeys(value);
Thread.sleep(2000);;
driver.findElement(By.xpath("(//li[#class='active']//a)["+i+"]")).click();
}

Cannot locate Element that exist, getting NullPointerException instead of NoSuchElement

I'm trying to automatize a web datatable testing. I'm getting this NullPointerException in every WebElement object I'm using to locate. My code is simple as possible:
public class tableTestStepDefs {
#FindBy(how = How.XPATH, using = "//*[#id=\"contenido-table\"]/tbody/tr[1]/td[3]")
public WebElement cell1;
#FindBy(how = How.ID, using = "\"DTE_Field_sufijo\"")
public WebElement editableCell1;
#When("^I click on cell1 to make it editable$")
public void hagoClickEnUnaCeldaDeLaColumnaSufijo(){
driver.get("http://192.168.242.104:7777/some/context");
cell1.click();
}
I'm getting NullPointerException in every object, instead of NoSuchElementException which is the one I usually get when the driver cannot find some element, while the driver is properly entering the page. If I debug, I can locate all the elements with the same id or xpath expression in the driver's instance. No idea what's going on
Here is the HTML part:
<div class="dataTables_scrollBody ps-container ps-theme-default ps-active-x" data-ps-id="77fa0bd8-5ef4-1c4e-e67a-a8675b515900" style="position: relative; overflow: auto; width: 100%; height: 762px;">
<table id="contenido-table" class="table table-condensed table-striped dataTable no-footer" role="grid" aria-describedby="contenido-table_info" style="width: 2072px;">
<thead>
<tr role="row" style="height: 0px;">
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 112px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="ICAO Aerolinea: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">ICAO Aerolinea</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 43px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Vuelo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Vuelo</div>
</th>
<th class="text-center editable sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 43px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Sufijo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Sufijo</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 71px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Matricula: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Matricula</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 33px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Tipo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Tipo</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Aeronave: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Aeronave</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Categoria: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Categoria</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 52px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Origen: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Origen</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 96px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Escala Previa: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Escala Previa</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 96px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Estado Vuelo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Estado Vuelo</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 139px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Programada: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Programada</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 116px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Estimada: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Estimada</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 93px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Actual: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Actual</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 58px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Servicio: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Servicio</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 44px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Stand: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Stand</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 47px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Cintas: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Cintas</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 91px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Inicio Cintas: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Inicio Cintas</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 73px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fin Cintas: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fin Cintas</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 115px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Primera Maleta: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Primera Maleta</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 107px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Ultima Maleta: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Ultima Maleta</div>
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class=" text-center" name="ICAO Aerolinea">DRA</td>
<td class=" text-center" name="Vuelo">5485</td>
<td class=" text-center editable" name="Sufijo"></td>
<td class=" text-center" name="Matricula" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">GBC001</td>
<td class=" text-center" name="Tipo" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">NA</td>
<td class=" text-center" name="Aeronave">A001</td>
<td class=" text-center" name="Categoria">C</td>
<td class=" text-center" name="Origen">LEBB</td>
<td class=" text-center" name="Escala Previa" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;"></td>
<td class=" text-center" name="Estado Vuelo">SCH</td>
<td class=" text-center" name="Fecha Programada" style="min-width: 97px">03/10/2018</td>
<td class=" text-center" name="Fecha Estimada"></td>
<td class=" text-center" name="Fecha Actual"></td>
<td class=" text-center" name="Servicio">A</td>
<td class=" text-center" name="Stand"></td>
<td class=" text-center" name="Cintas"></td>
<td class=" text-center" name="Inicio Cintas"></td>
<td class=" text-center" name="Fin Cintas"></td>
<td class=" text-center" name="Primera Maleta"></td>
<td class=" text-center" name="Ultima Maleta"></td>
</tr>
<tr role="row" class="even">
<td class=" text-center" name="ICAO Aerolinea">AAA</td>
<td class=" text-center" name="Vuelo">1234</td>
<td class=" text-center editable" name="Sufijo"></td>
<td class=" text-center" name="Matricula" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">GBC001</td>
<td class=" text-center" name="Tipo" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">NA</td>
<td class=" text-center" name="Aeronave">A001</td>
<td class=" text-center" name="Categoria">C</td>
<td class=" text-center" name="Origen">LEBB</td>
<td class=" text-center" name="Escala Previa" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;"></td>
<td class=" text-center" name="Estado Vuelo">SCH</td>
<td class=" text-center" name="Fecha Programada" style="min-width: 97px">03/10/2018</td>
<td class=" text-center" name="Fecha Estimada"></td>
<td class=" text-center" name="Fecha Actual"></td>
<td class=" text-center" name="Servicio">A</td>
<td class=" text-center" name="Stand"></td>
<td class=" text-center" name="Cintas"></td>
<td class=" text-center" name="Inicio Cintas"></td>
<td class=" text-center" name="Fin Cintas"></td>
<td class=" text-center" name="Primera Maleta"></td>
<td class=" text-center" name="Ultima Maleta"></td>
</tr>
</tbody>
</table>
<div class="ps-scrollbar-x-rail" style="width: 2063px; left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" tabindex="0" style="left: 0px; width: 2055px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div>
</div>
</div>

You are missing initialization of PageFactory, that's why you get NullPointerException instead of NoSuchElementException
Add constructor like this:
public class tableTestStepDefs {
#FindBy(how = How.XPATH, using = "//*[#id=\"contenido-table\"]/tbody/tr[1]/td[3]")
public WebElement cell1;
#FindBy(how = How.ID, using = "\"DTE_Field_sufijo\"")
public WebElement editableCell1;
public tableTestStepDefs() { //this!
PageFactory.initElements(driver, this);
}
#When("^i click on cell1 to make it editable$")
public void hagoClickEnUnaCeldaDeLaColumnaSufijo(){
driver.get("http://192.168.242.104:7777/some/context");
cell1.click();
}

One of your FindBy statements are wrong.
#FindBy(how = How.ID, using = "\"DTE_Field_sufijo\"")
You are saying that the ID includes the extra quotes. It should read:
#FindBy(how = How.ID, using = "DTE_Field_sufijo")
Try making that change and see if it works. Otherwise, you'll need to include the actual error message to help pin down where the problem is.

Can't render html in Wicket

Let's consider I have a HTML markup:
<div class="pull-right">
<div class="btn-group">
<a href="#" class="btn btn-default">
<i class="ico ico-prev"></i>
</a>
<div class="dropdown2 inline">
<a href="#" class="btn btn-default btn-shorter">
<strong>1-8</strong>
</a>
<ul class="dropdown-menu spec_width">
<li><a data-ico="1" href="#">10-30</a></li>
<li>30-40</li>
<li>40-50</li>
<li>50-60</li>
</ul>
</div>
<a href="#" class="btn btn-default">
<i class="ico ico-next"></i>
</a>
</div>
<span class="page-title">from<strong>45</strong></span>
.dropdown-menu {
padding: 0;
margin: 0;
left: -1px;
top: 37px;
font-size: 13px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
border: 1px solid #d1d4d3;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #f9f9f9;
}
.dropdown-menu li > a {
color: #4d5357;
padding: 8px 20px;
}
.spec_width {
width: 72px;
min-width: 72px;
left: 50% !important;
margin-left: -36px;
max-height: 150px;
min-height: 30px;
float: left;
overflow: hidden;
display: block !important;
visibility: hidden;
}
.spec_width li {
line-height: 29px;
width: 100%;
text-align: center;
padding: 4px 0;
}
.spec_width li:hover {
background: #e1e1e1;
}
.spec_width li a {
padding: 0px 0;
background: none !important;
width: 100%;
text-align: center;
}
I use that markup in ModalWindow, and it works pretty good, but when I apply CSS class to <ul> tag I don't see it in the browser, but when I inspect element, it generates in HTML code. I think that it must be because I use it in ModalWindow, and something(script, style) is conflicted. Any ideas?

In order to use Wicket to create HTML emails, we need to fake the request/response cycle. I wrote this convenient method that renders a bookmarkable page (pageclass + pageparameters) to a string:
http://www.danwalmsley.com/render_a_wicket_page_to_a_string_for_html_email
protected String renderPage(Class extends Page> pageClass,
PageParameters pageParameters) {
//get the servlet context WebApplication application =
(WebApplication) WebApplication.get();
ServletContext context = application.getServletContext();
//fake a request/response cycle MockHttpSession servletSession =
new MockHttpSession(context); servletSession.setTemporary(true);
MockHttpServletRequest servletRequest = new MockHttpServletRequest(
application, servletSession, context); MockHttpServletResponse servletResponse = new MockHttpServletResponse(
servletRequest);
//initialize request and response servletRequest.initialize();
servletResponse.initialize();
WebRequest webRequest = new WebRequest(servletRequest);
BufferedWebResponse webResponse = new
BufferedWebResponse(servletResponse); webResponse.setAjax(true);
WebRequestCycle requestCycle = new WebRequestCycle(
application, webRequest, webResponse);
requestCycle.setRequestTarget(new
BookmarkablePageRequestTarget(pageClass, pageParameters));
try { requestCycle.request();
log.warn("Response after request: "+webResponse.toString());
if (requestCycle.wasHandled() == false) {
requestCycle.setRequestTarget(new WebErrorCodeResponseTarget(
HttpServletResponse.SC_NOT_FOUND)); } requestCycle.detach();
} finally { requestCycle.getResponse().close(); } return
webResponse.toString();
}

The problem was solved after I append target.appendJavaScript("launchJS();"); where I had AjaxRequestTarget in my pages.

Categories

Resources