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
Related
I am new to wix. I have added custom HTML to a section like so
<div id="emptyLegBoard-container-outer">
<div id="emptyLegBoard-container-inner">
<div style="display: inline-block;width: 100%;">
<h1 style="width: fit-content;display: inline-block; color: white"><i style="color: orange"
class="fas fa-plane-departure"
aria-hidden="true"></i>Empty Legs</h1>
<h1 id="titleMonth" style="display: inline-block;float: right; color: white"></h1>
</div>
<div id="emptyLegBoard">
<table style="width: 100%; overflow: auto">
<tr id="boardHeadingRow">
<td style="width: 15%" class="boardHeadings">DATE</td>
<td style="width: 20%" class="boardHeadings">FROM</td>
<td style="width: 20%" class="boardHeadings">TO</td>
<td style="width: 20%" class="boardHeadings">TIME</td>
<td style="width: 25%" class="boardHeadings">PRICE</td>
</tr>
</table>
<div id="emptyLegBoardInner">
</div>
</div>
</div>
</div>
<script>
window.onload = function(e){
renderBoard();
}
</script>
then I have added some custom JS and CSS:
Header:
<script src="https://kit.fontawesome.com/dd348bbd0a.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<style>
i {
margin-right: 0.5em;
}
</style>
etc
Bottom of body:
<script>
function renderBoard() {
//my js code
}
</script>
etc...
Custom code
when the webpage load the css doesn't seem to be read and in the console I get "Uncaught ReferenceError: renderBoard is not defined"
so my custom code is not been read or my custom html code cannot reach it. Wondering how to fix this issue.
Custom html code
Thanks
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"> </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
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...:)
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 -->
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