Unable to find an Xpath of an element using webdriver and xpath - xpath

I need to click on the textbox next to username . Am unable to find the Xpath for this using webdriver...can I get some help?
here is the html snippet:
<div id="form-1013-body" class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="padding: 0px; height: 108px; left: 0px; top: 0px; width: 376px;">
<span id="form-1013-outerCt" style="display: table; height: 100%;">
<div id="form-1013-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;padding:5px 5px 5px 5px">
<table id="textfield-1014" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item x-form-invalid" cellpadding="0" style="table-layout: auto;">
<tbody>
<tr id="textfield-1014-inputRow">
<td id="textfield-1014-labelCell" class="x-field-label-cell" width="205" valign="top" halign="right" style="">
<label id="textfield-1014-labelEl" class="x-form-item-label x-unselectable x-form-item-label-right" unselectable="on" style="width:200px;margin-right:5px;" for="textfield-1014-inputEl">Username:</label>
</td>
<td id="textfield-1014-bodyEl" class="x-form-item-body " role="presentation" colspan="1">
<input id="textfield-1014-inputEl" class="x-form-field x-form-required-field x-form-text x-form-invalid-field" type="text" autocomplete="off" name="username" aria-invalid="true">
</td>
<td id="textfield-1014-sideErrorCell" width="17" valign="middle" style="">
<div id="textfield-1014-errorEl" class="x-form-error-msg x-form-invalid-icon" style="" data-errorqtip="<ul class="x-list-plain"><li>This field is required</li></ul>">
<ul class="x-list-plain">
<li>This field is required</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<table id="textfield-1015" class="x-field x-table-plain x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: auto;">
</div>
</span>

Try replacing your code
List<WebElement> elements = driver.findElements(By.tagName("input"));
with this one:
List<WebElement> elements = driver.findElements(By.xpath("//input"));
Check this cool cheat sheet for further selections
http://www.simple-talk.com/content/file.ashx?file=4937

Related

How to Parse thyemeleaf Context variables in HTML Page

Facing problems with Thymeleaf Template Engine.
I need to add some dynamic content to the html page.
I've a map like this
Map<String, String> info = new HashedMap<String, String>();
info.put("user_name", "username");
info.put("host_user_name", "host_user_name");
info.put("title", "Element_title");
info.put("url", "https://www.google.com");
info.put("conv_url","/#/home/" + "23243242" + "/services?fid=543545"&fview=conversation")
and I am adding the info in the map to the context
MimeMessage message = sender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
Context context = new Context();
System.out.println("---------0------------");
info.forEach((key, value) -> {
context.setVariable(key, value);
});
String template = templateEngine.process("my-html", context);
my-html is like this
<table width="115" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="right" valign="top" class="mob_center" style="padding:15px">
<a target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 13px;">
<font face="Arial, Helvetica, sans-seri; font-size: 13px;" size="3" color="#596167">
<img src="${url}/static/images/logo.png" width="150" height="auto" alt="Logo" border="0" style="display: block;" /></font></a>
</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="font-size: 12px; padding-top:5px; color: #000; line-height: 16px; text-align: left;" th:inline="text">
<span style="font-weight:600; display:block; " th:title="
${host_user_name}">[[${host_user_name}]] </span>[[${title}]]
</td>
</tr>
<tr>
<td width="40" valign="top"> </td>
<td>
<table style="width:100%">
<tr>
<td style="font-size: 13px; color: #fff; line-height: 16px; text-align: left;" th:inline="text">
<a title="" style="color:#000; text-decoration:none; font-weight:500; font-size:12px;">[[${followers}]] followers</a> | <a title="" style="color:#000; text-decoration:none; font-weight:500; font-size:12px;" th:inline="text">[[${replies}]] replies</a>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<img src="${url}/static/images/Join.png" title="" alt="Join the Conversation" />
</td>
</tr>
</table>
inline text is modifying for me, but how to change href and src attribute values.
<td colspan="2" style="text-align:center">
<img src="${url}/static/images/Join.png" title="" alt="Join the Conversation" />
</td>
This should be replaced by
<td colspan="2" style="text-align:center">
<img src="https://www.googl.com/static/images/Join.png" title="" alt="Join the Conversation" />
</td>
Can anyone help me on this?
Please, read this documentation.
Particularly, look at this example in this documentation :
<a th:href="#{/order/details(id=${order.id},action=(${user.admin} ? 'show_all' : 'show_public'))}">
You have to use th:href
This is Working for me
<tr>
<td colspan="2" style="text-align:center">
<a th:href="#{${url}+${conv_url}}"><img th:src="#{${diva_url+'/static/images/Join.png'}}" title="" alt="Join the Converstaion" /></a> &
</tr>

Printing pdf formated receipts using RP327 80mm Thermal Receipt Printer

I'm using dompdf to generate pdf formatted receipts which than be printed using RP327 80mm Thermal Receipt Printer. But printed receipts are not fitting the paper properly. Here is an attached image of printed receipts pos receipt.
Here is my html table which is converted to a pdf file
<?php
ob_clean();
$dompdf = new DOMPDF();
$dompdf->set_option('default_font', 'Courier');
$customPaper = array(0,0,340,650);
//$dompdf->set_paper($customPaper);
$dompdf->set_option('enable_css_float',true);
//$dompdf->set_paper("A3", "portrait");
$html =' <html>
<head><style>
.table { display: table; width: 100%; border-collapse: collapse; }
.table-row { display: table-row; }
.table-cell { display: table-cell; border: 1px solid black; padding: 1em; }
}
span { display: block; }
#page table {
size: 340px 650px;
margin: 0px;;
}
.table {
page: table;
page-break-after: always;
font-size: 20px;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row"><div class="table-cell" colspan="3" style="text-align: center"><img src="../../img/top-logo.png"></div></div>
<div class="table-row">
<div class="table-cell" ><span><b> Merchant: </b> '.$parceldetails['company'].' </span><span><b> Pick Addr: </b> '.$parceldetails['addr'].' </span><span><b> Mobile: </b> '.$parceldetails['mobile'].' </span></div>
<div class="table-cell" style="padding: 0px">
<div class="" >Delivery Date:</div><br>
<div class="" style="border-bottom: 1px solid #000000"> '.$parceldetails['r_delivery_time'].' at '.$parceldetails['bytime'].'</div>
<div class="">Agent:</div><br>
<div class=""> '.$parceldetails['name'].' </div>
</div>
</div>
<div class="table-row">
<div class="table-cell" colspan="3" style="text-align: center"> <b style="font-size: larger">'.$ecr.'</b></div>
</div>
<div class="table-row">
<div class="table-cell" colspan="1"><span><b>Customer Name:</b> '.$parceldetails['r_name'].'</span><span><b> Addr:</b> '.$parceldetails['r_address'].' </span><span><b> Mobile: </b> '.$parceldetails['r_mobile'].' </span></div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center"><b> '.$parceldetails['paymentmethod'].' </b></div>
<div class="" style="text-align: center"><b> '.$parceldetails['product_price'].' BDT </b></div>
</div>
</div>
<div class="table-row">
<div class="table-cell" style="text-align: center"> '.genarateQRCode($data).' </div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center; height:63px"> Delivered </div>
<div class="" style="text-align: center; min-height:63px"> Cancel </div>
</div>
<div class="table-cell" style="padding: 0px">
<div class="" style="border-bottom: 2px solid #000000; text-align: center; height:63px"> </div>
<div class="" style="text-align: center; min-height:63px""></div>
</div>
</div>
<div class="table-row">
<div class="table-cell" colspan="3">
<b style="margin-top:50px; margin-bottom:-10px; border-bottom: 1px solid #000000; font-size:10px; margin-left:10px">Agent signature</b>
<b style="margin-top:50px; margin-bottom:-10px; border-bottom: 1px solid #000000; font-size:10px; margin-left:50px">Receiver signature</b></div>
</div>
</div>';
$html .='<table class="table">
<tr>
<td colspan="3"><img src="../../img/top-logo.png"></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><span><b> Merchant: </b> '.$parceldetails['company'].' </span><span><b> Pick Addr: </b> '.$parceldetails['addr'].' </span><span><b> Mobile: </b> '.$parceldetails['mobile'].' </span></td>
<td>D. Date<span>'.$parceldetails['r_delivery_time'].'</span></td>
</tr>
<tr>
<td>Agent<span>'.$parceldetails['name'].'</span></td>
</tr>
<tr>
<td colspan="3">'.$ecr.'</td>
</tr>
<tr>
<td rowspan="2" colspan="2"><span><b>Customer Name:</b> '.$parceldetails['r_name'].'</span><span><b> Addr:</b> '.$parceldetails['r_address'].' </span><span><b> Mobile: </b> '.$parceldetails['r_mobile'].' </span></td>
<td><b>'.$parceldetails['paymentmethod'].'</b></td>
</tr>
<tr>
<td><b>'.$parceldetails['product_price'].' BDT</b></td>
</tr>
<tr>
<td rowspan="2" colspan="1">'.genarateQRCode($data).'</td>
<td>Delivered</td>
<td></td>
</tr>
<tr>
<td>Cancel</td>
<td></td>
</tr>
<tr>
<td colspan="3">&nbsp</td>
</tr>
<tr>
<td colspan="3">Agent Signature Receiver Signature</td>
</tr>
</table>
</body>
</html>';
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("dompdf_out.pdf", array('Attachment' => 0));
<?>
According to the linked printer specs the printer is capable of printing to a width of either 72mm or 64mm. That translates to roughly 204pt and 181pt (respectively). Rather than relying on a larger paper size and limiting your content width I'd try to work within the constraints you have.
You should also keep in mind that dompdf translates pixel-based measurements into the appropriate point size based on the DPI specified for your document. If you want a one-to-one correspondence between your HTML document and the rendered PDF you should set the Dompdf DPI to 72 since the PDF PPI is fixed at 72.
With that in mind here's my advice. I'm assuming you're using Dompdf 0.6.x based on the method calls.
Set your paper size appropriately. Let's assume you have the 72mm width paper.
$dompdf->set_paper(array(0,0,204,650));
Set your DPI
$dompdf->set_option('dpi', 72);
If you're going to use a table for layout then you should just go ahead and use table elements. Styling DIVs with table display types will just cause them to be treated like table elements. What you have will work fine, but it will be clearer to you what's going on if you just use table elements.
Know that Dompdf be a bit quirky in relation to tables. One thing to keep in mind is that Dompdf won't allow table cells to be smaller than the contained content (for normally flowed content).
It's hard to give any input on why the printer is cutting off the content. I'd suggest cleaning up your code. I just noticed that you have the same content twice, once as DIVs styled to be table elements and a second time as an actual table.
It seems that this is a problem about drivers, you can solve this problem on official webiste: https://posguy.pro/en/support

Xpath of checkbox inside iframe inside div

for the life of me, I cannot get the xpath of this....
i think the problem is that there are two divs one, called 'div_settings_A' and 'div_settings_C', in the example below you cant see the 'div_settings_C' because its hidden, just cant put my finger on why it wont work!
I have tried
//div[contains(#id, 'div_settings_A')]/input
//tr[#id='inputSavePaymentAccounts'] and td[#name='payAck']
<iframe id="ccPayWiz" class="ui-dialog-content ui-widget-content" src="ccxPaymentDetails.php?c=1805&a=733344&d=null&m=Automation#billtrust.com&b=768866910" style="width: 99%; min-height: 105.833px; height: 717px; position: relative;" scrolltop="0" scrollleft="0">
<!DOCTYPE html>
<html>
<head>
<body style="border: 0px; margin: 0px; padding: 0px;" onload="setuppanes('IG');">
<input id="wpsURL" type="hidden" value="WPS_URL">
<form id="frmPay" onsubmit="return paywizAccountHelper.validateForm(this, '17', 'US');" action="ccProcessPayment.php" method="post" name="frmPay">
<input type="hidden" name="csrf" value="e5297f08b85318aa2ec176a5d8fac2a2">
<div id="divPayWizard2">
<div style="float:left; margin-top:5px">
<ul class="steps ui-widget ui-helper-clearfix">
<li>
<li>
<li>
</ul>
</div>
<br clear="all">
<hr>
<p>
<span class="cc-font"> Enter the customer's billing information to process the payment.</span>
</p>
<div id="divpane1">
<table id="tablepane1" class="cc-pane1-table cc-font">
<br>
</div>
<div id="divpane2">
<table class="cc-pane2-table-top cc-font">
</div>
<div id="div_settings_A" style="display: block;">
<input type="hidden" value="733344" name="SrchAcctNum">
<table class="cc-font" width="700" cellspacing="3" border="0">
<input id="BankCountry" type="hidden" value="US" name="BankCountry">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px">Save this Payment Method</td>
<td style="padding-top: 15px">
<input class="payAck" type="checkbox" name="payAck" style="margin: 0; padding 0" tabindex="9">
</td>
</tr>
You can directly get that ccheck box element by using name attribute as :
.//input[#type = 'checkbox' and #name = 'payAck']
Or if there are multiple check boxes with the same name then try using descendant of tr as :
.//tr[#id = 'inputSavePaymentAccounts']/descendant::input[#type = 'checkbox' and #name = 'payAck']
Or
.//tr[#id = 'inputSavePaymentAccounts']/descendant::input
Hope it helps...:)

ruby selenium click on button with class name

I'm using ruby and selenium to test a web page, with the two buttons below
<div class="AVdis">
<span class="gwt-InlineHTML"/>
<a class="AVcur" name="attendEdit"; font-size: 12px;">[edit]</a>
</div>
<div class="lineHeight">
<button type="button" class="pcbtn" style="display: inline-block;">yes</button>
</div>
I've tried to use
driver.find_elements(:class, 'AVcur').click
driver.find_elements(:class, 'pcbtn').click
but it doesn't work, please advise.
Thanks
updated the full HTML code(the part code of class 'pcbtn' ONLY, it doesn't include the part with class 'AVcur'.):
<body>
<iframe src="javascript:'';" id="__gwt_historyFrame" style="width: 0px; height: 0px; border: 0px; display: block;"/>
<iframe src="javascript:''" id="Attend" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none;"/>
<div style="display: none;"/>
<div class="GFKFO5SBPF hBody nClientFalse">
<div class="left" style="width: 198px;">
<div class="contents nClientFalse2">
<div class="AVright">
<div class="GFKFO5SBIQ">
<div class="AVfirstTd">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<div>
<table cellpadding="0" cellspacing="0" class="pcattd_record" width="630px">
<tbody>
<tr class="GFKFO5SBCS">
<tr class="GFKFO5SBCS">
<th>
<td>
<table class="noborder">
<tbody>
<tr>
<td>
<td>
<div class="lineHeight">
<button type="button" class="pcbtn" style="display: inline-block;">press button</button>
Try to click it, using xpath:
driver.find_element(:xpath, "//div[#class='AVdis']//a[#name='attendEdit']").click
Second element xpath:
driver.find_element(:xpath, "//div[#class='lineHeight']//button[#class='pcbtn'][text()='yes']").click
Click an element:
driver.find_element(css: 'a').click

Mobile Image Revealed When Fowarded Using Outlook

I have an HTML email that has a creates a mobile version by using {display:none!important;} and has a media query that reveals it using {display:block!important;}.
When forwarded in Outlook, the email breaks and displays both images leaving a huge gap on the right side next to the mobile image.
Has anyone found a coding solution that would maintain the appearance when forwarded?
HTML
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="vanish">
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<a href="#" style="color: #999; text-decoration: none;">
<img src="Desktop.jpg" width="205" height="171" alt="" class="deviceWidth" style="display: block; background-color: #343434;" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End One Column -->
<!-- Houdini Start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="display: none; visibility: none; width: 0px; height: 0px;" class="houdini">
<a href="#" style="color: #999; text-decoration: none;">
<img style="display: none; visibility: hidden; width: 0px; height: 0px; border: 0px;" src="Mobile.jpg" alt="" class="houdini" /></a>
</td>
</tr>
</table>
<!-- Houdini End -->

Resources