The minimal code is given below. Note that -
I need 1px border(I think that means need border-collapse).
Also transition and background-color change cannot be compromised.
CSS only solution.
Am doing wrong or would you have a fix/alternate, or its a bug. Please help me out. Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#wrap-div{display:flex;}
#com_table{width:800px; border-collapse:collapse; border-spacing:0px; margin:50px auto;text-align:center}
th, td{border:1px solid #3AC;}
#com_table > tbody > tr:hover{color:#fff; background-color:#aaa; transition:all .25s linear;}
</style>
</head>
<body>
<div id="wrap-div">
<table id="com_table">
<thead>
<tr>
<th>Order Date</th>
<th>Status</th>
<th>Total Amt</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/05/2021</td>
<td>NEW</td>
<td>900.00</td>
</tr>
<tr>
<td>24/05/2021</td>
<td>CONFIRMED</td>
<td>900.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>850.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>1845.00</td>
</tr>
<tr>
<td>15/05/2021</td>
<td>SETTLED</td>
<td>4221.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>1549.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>250.00</td>
</tr>
<tr>
<td>18/05/2021</td>
<td>SETTLED</td>
<td>1249.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Related
I have a table structure in HTML where I have to use rowspan and RTL(Right To Left) direction for Arabic characters. But while converting this HTML to PDF, rowspan is not working as expected. Assuming this is a bug in ColdFusion where an HTML with rowsapn and RTL direction is not working correctly.
Note that this is working fine for LTR (Left To Right) direction (ex: English Characters). But I need to use RTL direction since Arabic characters need to be displayed in PDF.
Any idea why this is not working?
Sample Code :
<cfdocument format="PDF" filename="C:\test.pdf" overwrite="true">
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table#mainTable {direction:rtl;}
</style>
</head>
<body>
<cfoutput>
<table id="mainTable">
<tr>
<td>Tariff</td>
<td>Description</td>
<td>Quantity</td>
<td>Unit Price</td>
<td>Amount</td>
</tr>
<tr>
<td rowspan="7" >Customer Level Charges</td>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>Adjustments</td>
<td colspan="4">-20</td>
</tr>
<tr>
<td>This Month Amount</td>
<td colspan="4">1091.92</td>
</tr>
<tr>
<td>Last Month outstanding Amount</td>
<td colspan="4">0</td>
</tr>
<tr>
<td>Total</td>
<td colspan="4">1146.51</td>
</tr>
</table>
</cfoutput>
</body>
</html>
</cfdocument>
Expected Result
It should work as how it is working in Browser, screen shot attached.
Apparently Selenium IDE is fairly unreliable. For example, the last command in the following script does not have any effect inside the script but if I double click on it separately it opens the file selection dialog. Why?
Another question, how do I provide file selection with a next command?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://www.gumtree.com/" />
<title>gumtree</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">gumtree</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>https://my.gumtree.com/postad</td>
<td></td>
</tr>
<tr>
<td>waitForPageToLoad</td>
<td>5000</td>
<td></td>
</tr>
<tr>
<td>clickAt</td>
<td>//form[#id='frmSyi']/div/div/div/div/nav/ul/li[2]/div/span[2]</td>
<td></td>
</tr>
<tr>
<td>waitForPageToLoad</td>
<td>500</td>
<td></td>
</tr>
<tr>
<td>clickAt</td>
<td>//form[#id='frmSyi']/div/div/div/div/div/div/div/div/ul/li[10]/span</td>
<td></td>
</tr>
<tr>
<td>waitForPageToLoad</td>
<td>500</td>
<td></td>
</tr>
<tr>
<td>clickAt</td>
<td>//form[#id='frmSyi']/div/div/div/div/div/div[2]/div/div/ul/li[2]/span</td>
<td></td>
</tr>
<tr>
<td>waitForPageToLoad</td>
<td>500</td>
<td></td>
</tr>
<tr>
<td>clickAt</td>
<td>//form[#id='frmSyi']/div/div/div/div/div/div[3]/div/div/ul/li[4]/span</td>
<td></td>
</tr>
<tr>
<td>pause</td>
<td>500</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=continueButton</td>
<td></td>
</tr>
<tr>
<td>pause</td>
<td>500</td>
<td></td>
</tr>
<tr>
<td>clickAt</td>
<td>link=Add image</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
ClickAt is a specialised command for clicking coordinates. So you are using it in a wrong way. You should use regular click, or doubleClick or (in a very special case) clickAt with providing coordinates string.
File uploading is not so straight-forward. You should find an input that contains file name for uploading. Send a file-name to it with type command or javascript. And finally initiate uploading. Like:
type | id=hiddenInputForFileName | /path_to_your_file/your_file.lol
click | id=startUploadingButton
That's an example. Your code will depend on the file uploading form design. I hope it will help. If it won't please provide the html of your page and I will post the code for your situation.
I am using Selenium to record my actions on a webpage, however, when I play the test case, there is an click action throwing error: Element is not currently visible and so may not be interacted with. However, I am sure that button is visible, and here is html for it:
<button class="btn btn-success btnSubmit" style="font-size: 1.9em; width: 100%; height: 2em; margin-top: 20px;" type="submit"> Get Your Report </button>
Also, here is my test script for Selenium IDE:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://hra.case.edu/" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>link=Get Started</td>
<td></td>
</tr>
<tr>
<td>keyPress</td>
<td>name=searchFirstName</td>
<td>Tiancheng</td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[#id='content']//tbody[#id='select_user']/tr[1]//a</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>//div[#id='content']//tbody[#id='select_user']/tr[1]//a</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>id=answer_heightFoot</td>
<td>5</td>
</tr>
<tr>
<td>type</td>
<td>id=answer_heightInch</td>
<td>11</td>
</tr>
<tr>
<td>type</td>
<td>id=answer_weight</td>
<td>222</td>
</tr>
<tr>
<td>select</td>
<td>id=answer_bodySize</td>
<td>label=Medium</td>
</tr>
<tr>
<td>click</td>
<td>id=answer_diabetes_no</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>link=Other</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>id=next</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//button[#type='submit']</td>
<td></td>
</tr>
<tr>
<td>verifyElementPresent</td>
<td>//button[#type='submit']</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//button[#type='submit']</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
Anyone has an idea of why?
Thanks in advance!
Some webelement may be present at DOM but be invisible at the same time. So, after you perform some action use waitForVisible method to wait for element to become visible and interactible
UPDATE: #Kees de Kooter, here's the working example
<tr>
<td>open</td>
<td>http://stackoverflow.com/</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=.js-help-button</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>css=.js-help-button</td>
<td></td>
</tr>
<tr>
<td>waitForVisible</td>
<td>css=.js-help-dialog</td>
<td></td>
</tr>
I'm fighting with bad support of html clients for CSS and I need to do a email template with table layout.
I just can't place and align tables within tables correctly. I tried it with valign etc. but this doesn't work...
How can I place one table within another table on top and in the center?
To illustrate I've posted this fiddle:
http://jsfiddle.net/eabJh/1/
The <td >Another nested table</td> is in center position but not on top but in the middle.
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body style="background-color: black">
<table background="http://i3.mirror.co.uk/incoming/article276604.ece/ALTERNATES/s615/tweet-that-ricky-gervais-jibe-at-mongs-pic-twitter-com-rickygervais-132840776.jpg" width="810" border="20" bordercolor="white" style="border-style:solid; border-spacing:0px; border-collapse:collapse">
<tr style="height:400px">
<td>test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td >Another nested table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
</html>
Updated Fiddle
Use valign = "top":
<td valign = "top">test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td>Another nested table</td>
</tr>
</table>
</td>
Need a help in loading up flexigrid for a HTML Table. I have the below piece of code and could not get flexigrid loaded when open up this html file in browsers(Tried IE, firefox, chrome). Please help in getting this work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Phone Directory</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript">
$('.flexme').flexigrid();
</script>
</head>
<body>
<table id="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
The document ready function is missing.
Replace the line $('.flexme').flexigrid(); with
$(document).ready(function(){
$('#flexme').flexigrid();
});