How can I find out xpath in below 2 html blocks? Both html code are same, but only ID differs. Id is dynamic, so difficult to find xpath:
<div id="discoverytree-body" class="x-panel-body x-grid-body x-panel-body-default-framed x-panel-body-default-framed x-layout-fit" style="padding: 0px; border-top-width: 1px; width: 264px; left: 0px; height: 425px; top: 48px;">
<div id="treeview-1015" class="x-grid-view x-fit-item x-grid-view-default" tabindex="-1" style="margin: 0px; width: 262px; height: 423px;">
<table class="x-grid-table x-grid-table-resizer" style="width:10000px;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="x-grid-header-row">
<th class="x-grid-col-resizer-treecolumn-1014" style="width: 10000px; height: 0px;"/>
</tr>
<tr class="x-grid-row x-grid-tree-node-expanded">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner" style="text-align: left; ;">
<img class="x-tree-elbow-end-plus x-tree-expander" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-parent iconDiscovery" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Discovery
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div id="ext-gen1349" class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Common Settings
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div id="ext-gen1345" class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Manage Components
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-expanded x-grid-row-over">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-plus x-tree-expander" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-parent iconManagerDiscovery" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Manager Discovery
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-expanded">
<td id="ext-gen1342" class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-plus x-tree-expander" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-parent iconSettings" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Settings
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf x-grid-row-selected x-grid-row-focused">
<td id="ext-gen1384" class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div id="ext-gen1340" class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
General
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td id="ext-gen1380" class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1336" class="x-tree-elbow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Virtual Platforms
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1376" class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1332" class="x-tree-elbow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Public Clouds
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div id="ext-gen1243" class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1372" class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1239" class="x-tree-elbow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Citrix NetScalers
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div id="ext-gen1247" class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1368" class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1325" class="x-tree-elbow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
vCloud Directors
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div id="ext-gen1251" class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img id="ext-gen1321" class="x-tree-elbow-end" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Storage Discovery
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-expanded">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-end-plus x-tree-expander" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-parent iconActions" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Actions
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<tr class="x-grid-row x-grid-tree-node-leaf">
<tr class="x-grid-row x-grid-tree-node-leaf">
<tr class="x-grid-row x-grid-tree-node-expanded">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-end-plus x-tree-expander" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-parent iconAgentDiscovery" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Agent Discovery
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-expanded">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-plus x-tree-expander" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-parent iconSettings" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Settings
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-line" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-end" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
General
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-expanded">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-end-plus x-tree-expander" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-parent iconActions" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Actions
</div>
</td>
</tr>
<tr class="x-grid-row x-grid-tree-node-leaf">
<td class="x-grid-cell-treecolumn x-grid-cell x-grid-cell-treecolumn-1014 x-grid-cell-first">
<div class="x-grid-cell-inner " style="text-align: left; ;">
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-empty" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-elbow-end" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<img class="x-tree-icon x-tree-icon-leaf iconOU" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
Enable/Disable
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Above HTML is full page code, Here where I have to select the Discovery -> Manager Discovery, Actions->Enable/Disable
Xpath -
.//*[contains(text(), 'Manager Discovery')] //following::td[9]
Where td[9] denotes Actions->Enable/Disable and there is 1 matching node in UI.. but in code, no such element exception found. Tried with try catch block, JavaScript, Implicit and explicit wait, webdriver waits
What do you want to select? Both div and td contains ext-gen id, so it's unclear which exact element you need. Better to indicate whether div or td you are searching for easier future support (or use classes instead of ids, as they are different on these elements)
Also you have a lot of similar ids here, so better to use starts-with() instead of contains().
(//div[starts-with(#id,'ext-gen')][contains(.,'Enable/Disable')])[1]
(//div[starts-with(#id,'ext-gen')][contains(.,'Enable/Disable')])[2]
div could be replaced with td
Some Explanation:
(locator)[n] - searches nth element among all found elements by this locator
locator[n] - searches for nth element by it's position in node.
where:
n = shortcut for position()=n and means position number. Could be
replaced with any integer 1,2,..,n , or any function that returns
integer
locator = any element locator, like //*[#id='someID']
For example:
(//*[#class='super'])[1] - finds 1st element with class super among all elements on page
//*[#class='super'][1] - finds all elements with class super, which inside their nodes has position 1
so for html:
<tr>
<td class="cell">1</td>
<td class="cell">2</td>
</tr>
<tr>
<td class="cell">3</td>
<td class="cell">4</td>
</tr>
Among all example: (locator)[n]
(//td[#class='cell'])[2] - returns 2nd element among all, so it's cell with value '2'
(//td[#class='cell'])[3] - returns 3rd element among all, so it's cell with value '3'
By position in node: locator[n]
//td[#class='cell'][2] - returns each 2nd cell in it's node, so it will return cells '2' and '4'
//td[#class='cell'][3] - returns nothing, as there is no 3rd cell in any node
Here are XPATHes made after clarification in comments:
//tr[contains(.,'Manager Discovery')]/following-sibling::tr[contains(.,'Enable/Disable')]
OR:
//tr[contains(.,'Manager Discovery')]/following-sibling::tr[16]
You can use following xpaths:
For first element
//*[contains(#id,'ext-gen')][contains(., 'Enable/Disable')][1]
//*[contains(#class,'x-grid-cell-inner')][contains(., 'Enable/Disable')][1]
//div[contains(#class,'x-grid-cell-inner')][contains(., 'Enable/Disable')][1]
For second element
//*[contains(#id,'ext-gen')][contains(., 'Enable/Disable')][2]
//*[contains(#class,'x-grid-cell-inner')][contains(., 'Enable/Disable')][2]
//div[contains(#class,'x-grid-cell-inner')][contains(., 'Enable/Disable')][2]
I have also experienced the same case once. In order to click on both the buttons, you have to use 'Following-sibling' keyword. Means, you have to make relation between Parent and child so that there is unique relation. The provided html code is not enough to make relationship.
You can index like below
(.//*[contains(#id,'ext-gen')][contains(text(), 'Enable/Disable')])[1]
OR
(.//*[contains(#id,'ext-gen')][contains(text(), 'Enable/Disable')])[2]
Related
Sorry for this noob question.
I have:
• different tabs in one webpage and
• each tab has a pagination
The problem is that when clicking a page in different pagination it would:
• lead to the same tab
Like i clicked page 2 in tab_2 pagination and I get redirected to tab_1 page 1
In my InventoryController:
public function index() {
return view('employee.inventory', [
'ingredients' => Ingredient::with('supplier')->paginate(10),
'products' => $products = Product::paginate(10, ['*'], 'products_page'),
'orders' => Order::paginate(10, ['*'], 'orders_page'),
'users' => User::paginate(10, ['*'], 'users_page'),
'suppliers' => Supplier::paginate(10, ['*'], 'suppliers_page')
]);
}
What should I do? I thought making each page in paginations behave like anchor tag that will jump to an id but I'm using {!! $object->links() !!} but I don't know how to implement it.
<div class="col-md-6">
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
<ul class="nav nav-tabs table-tabs" style="display: flex; flex-directed: row-reverse;">
<li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Ingredients
</button>
</a></li>
<li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Products
</button>
</a>
</li>
<li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Orders
</button>
</a></li>
<li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Users
</button>
</a></li>
<li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Suppliers
</button>
</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="card" style="width: 87.5em; height: 45em;">
<div class="card-header">
<h3 class="card-title">Ingredients</h3>
<div class="table-add-delete" style="float: right;">
<i class="fas fa-plus-square" data-toggle="modal" data-target="#modal-default-1" style="cursor:pointer ;color: #2AC0CC; font-size: 24px;"></i>
<i class="fas fa-trash-alt" data-toggle="modal" data-target="#modal-default-1" style="cursor: pointer; color: #2AC0CC; font-size: 24px;"></i>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4"><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div></div><div class="row"><div class="col-sm-12">
<table id="table1" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th><input type="checkbox" name="checkAll" id=""></th>
<th>ID</th>
<th>NAME</th>
<th>QUANTITY IN STOCK</th>
<th>SUPPLIER</th>
<th>COST</th>
</tr>
</thead>
<tbody>
#foreach ($ingredients as $ingredient)
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>{{$ingredient->ingredient_id}}</td>
<td>{{$ingredient->name}}</td>
<td>{{$ingredient->stock_Quantity}}</td>
<td>{{$ingredient->supplier->name ?? '--unset--'}}</td>
<td>{{$ingredient->cost}}</td>
</tr>
#endforeach
</tbody>
</table></div></div>
<div class="row"><div class="col-sm-12 col-md-5">
</div>
<div class="col-sm-12 col-md-7">
{!! $ingredients->links() !!}
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="tab-pane" id="tab_2">
<div class="card" style="width: 87.5em; height: 45em;">
<div class="card-header">
<h3 class="card-title">Products</h3>
<div class="table-add-delete" style="float: right;">
<i class="fas fa-plus-square" data-toggle="modal" data-target="#modal-default-2" style="cursor:pointer ;color: #2AC0CC; font-size: 24px;"></i>
<i class="fas fa-trash-alt" data-toggle="modal" data-target="#modal-default-2" style="cursor: pointer; color: #2AC0CC; font-size: 24px;"></i>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
<div class="row">
<div class="col-sm-12 col-md-6"></div>
<div class="col-sm-12 col-md-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="table2" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" ><input type="checkbox" name="AllProducts" id=""></th>
<th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">ID</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >NAME</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >DESCRIPTION</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >QUANTITY</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >IMAGE</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >PRICE</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >CATEGORY(s)</th>
</tr>
</thead>
<tbody>
#foreach ($products as $product)
<tr role="row" class="odd">
<td><input type="checkbox" name="" id=""></td>
<td tabindex="0" class="sorting_1">{{$product->product_id}}</td>
<td>{{$product->name}}</td>
<td>{{$product->description}}</td>
<td>{{$product->stock_Quantity}}</td>
<td><img style="height: 100px; width: 150px;" src="{{ asset('storage/' . $product->image) }}" alt="{{ 'storage/' . $product->image }}"></td>
<td>{{$product->price}}</td>
<td>#</td>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5">
</div>
<div class="col-sm-12 col-md-7" >
{!! $products->links() !!}
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
Laravel pagination works on the basis of page number parameter in the url. For example, if I have a customers crud and I am on page two of crud the URL will be like:
http://localhost:8080/customers?page=2
So, if you are having two cruds on one page they will not work simultaneously. You should use any client side jquery pagination plugin in order to tackle this problem. Try this plugin:
jquery pagination plugin
My question is very simple
I am trying to call this source in my public folder in img folder:
src="img/vcc3logo.png"
But I can't display it on my pdf print form
When the customer print for a certification form it needed to display the image. The file of the print.blade.php is located in resources/views/customer-relations/dashboard/print.blade.php
Here is the code in my print.blade.php
{{-- <div class="content">
<div class="clearfix"></div>
<div class="box-body"> --}}
<img src="" height="50" width="50" style="float: right">
<img src="img/vcc3logo.png" height="50" width="50" style="float: left">
<div class="container">
<div class="row">
<div class="text-center">
<p class="text-center maliit">
Republic of the Philippines<br>
National Capital Region<br>
<font>City Government of Valenzuela</font><br>
Office of the City Mayor<br>
Valenzuela City Command and Communications Center<br>
2nd Floor, City ALERT Center, Mc-Arthur Hi-way, Malinta, Valenzuela City<br>
</p>
<h3>Application Number:{{ $application_number }}</h3>
</div>
<h5><b>Business Name:</b> {{ $business_name }}</h5>
<h5><b>Owner:</b> {{ $owner }}</h5>
<h5><b>Location:</b> {{ $location }}</h5>
</span>
<table class="table table-hover">
<thead>
<tr>
<th>Fees</th>
<th></th>
<th class="text-center"></th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9"><em>Inspection Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $inspection_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Certificate Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $cert_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Local Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $local_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Others Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $others_fee }}</td>
</tr>
</tbody>
</table>
<p><i>Note: Please print and present to Customer Relations Officer</i></p>
</td>
</div>
{{-- </div>
</div>
</div>
--}}
I tried to change it to
src="url('/img/cctv_camera.jpg')"
but ended up with this error:
(1/1) RuntimeException
The exit status code '1' says something went wrong:
stderr: "Loading pages (1/6)
If image file is located inside public folder then you need to add asset() which give full path of image like
<img src="{{asset('/img/vcc3logo.png')}}" height="50" width="50" style="float: left">
I think you can try this hope its help for you :
<img src="{{url('')}}/img/vcc3logo.png" height="50" width="50" style="float: left">
OR
<img src="{{asset('/img/vcc3logo.png')}}" height="50" width="50" style="float: left">
Hope this work for you !!!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to scrape some information from a site using Nokogiri.
The site looks like this:
<div class="content">
<article class="mainarticle">
<div class="breadcrump">
<ul></ul>
</div>
<div class="boxstyle">
<h2 style="margin-top:0.1em;">Fahrschulen mit Namen "Hugis Fahrschule AG"</h2>
</div>
<section class="leftrightleft ">
<header>
<div class="borderright borderbottom pads">
<figure class="logoschule">
<a href="fahrlehrerbilder.php?irat_id=14581" onclick="showGallery('irat_gallery',14581);return false;">
<img alt="Bilder Hugis Fahrschule AG" width="110" height="110" src="http://www.fahrlehrervergleich.ch/images/lehrer/small/fe1774780ba2d3aaa3e985ee960bf8.jpg">
<figcaption class="gallerylabel minhide">1 Bild</figcaption>
</a>
</figure>
<div>
<h3>Hugis Fahrschule AG</h3>
<h4 style="padding:0;line-height:1.3em;">Thomas Hugelshofer</h4>
<span class="biger">Thomas Hugelshofer</span>
<p><span>Oerlikon</span><br><span>Schaffhauserstrasse 443</span><br><span>8050</span> <span>Zürich</span></p>
<p>Karte Streetview </p>
<p></p>
</div>
<table class="eintraegemain clearfix">
<tbody>
<tr>
<td>Homepage:</td>
<td><span>www.hugis-fahrschule.ch</span></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><a class="" href="kontakt_user.php?kontakt_id=14581" target="_blank" onclick="showEmailSender(14581);return false;">sekretariat#hugis-fahrschule.ch</a></td>
</tr>
<tr>
<td>Natel:</td>
<td><span>076 684 11 11</span></td>
</tr>
</tbody>
</table>
</div>
</header>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title accordeonfarbe-00" href="#accordion-1-14581"><span class="arrow"></span>Preise für Auto: ab 74.-, Auto Automat: ab 74.-, Motorrad: 90...</a>
<section id="accordion-1-14581" class="secondright accordion-section-content">
<div class="borderleft pads">
<table>
<tbody>
<tr>
<td>Kategorien</td>
<td>Preise CHF</td>
</tr>
<tr>
<td>Auto:</td>
<td>ab 74.-</td>
</tr>
<tr>
<td>Auto Automat:</td>
<td>ab 74.-</td>
</tr>
<tr>
<td>Motorrad:</td>
<td>90.-</td>
</tr>
<tr>
<td>Taxi:</td>
<td>74.-</td>
</tr>
<tr>
<td>Lastwagen:</td>
<td>165 .-</td>
</tr>
<tr>
<td>Lastwagen C1:</td>
<td>165.-</td>
</tr>
<tr>
<td>Auto Anhänger:</td>
<td>112.-</td>
</tr>
<tr>
<td>LKW Anhänger:</td>
<td>195.-</td>
</tr>
<tr>
<td>Car:</td>
<td>195.-</td>
</tr>
<tr>
<td style="font-weight:normal;">Lektionsdauer:</td>
<td style="font-weight:normal;">45 Minuten</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Kurse</td>
<td>Preise CHF</td>
</tr>
<tr>
<td>Verkehrskunde:</td>
<td>150.-</td>
</tr>
<tr>
<td>Nothelferkurs:</td>
<td>120.-</td>
</tr>
<tr>
<td>Motorrad Grundkurs:</td>
<td>160 pro Teil</td>
</tr>
<tr>
<td>Theorie:</td>
<td>Nach Anmeldung</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<div class="accordion-section">
<a class="accordion-section-title accordeonfarbe-00" href="#accordion-2-14581"><span class="arrow"></span>Weitere Informationen: Sprachen: Deutsch, Englisch...</a>
<section id="accordion-2-14581" class="thirdleft accordion-section-content">
<div class="borderright pads">
<table id="sb_14581">
<tbody>
<tr>
<td>Sprachen: </td>
<td>Deutsch, Englisch, Serbisch, Albanisch, Türkisch, Polnisch, Italienisch</td>
</tr>
<tr>
<td>Autotyp:</td>
<td>Renauld Megan</td>
</tr>
<tr>
<td>Administration:</td>
<td>CHF 110.- (pauschal)</td>
</tr>
<tr>
<td>Jahrgang:</td>
<td>2015</td>
</tr>
<tr>
<td>Ausbildungsjahr:</td>
<td>2015</td>
</tr>
</tbody>
<tbody></tbody>
</table>
</div>
</section>
</div>
<footer class="clearfix">
<section>
<div class="bordertop pads" id="sbwl_14581">
<div class="ratingoutside">
<ul class="rating">
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li>(12)</li>
</ul>
</div>
<div class="rightbuts"><a class="buttonsmall" href="bewertungen.php?irat=14581" onclick="showBewe(14581);return false;" title="Bewertungen anschauen">Bewertungen anschauen</a>
<a class="buttonsmall" href="lernen/index.php?bewe_irat=14581">Fahrlehrer bewerten</a>
</div>
<p class="clicks minhide clearfix"> 30-Tage-Statistik : Inserat <span class="num_imp">14069</span> Mal angezeigt, Homepage <span class="num_click">228</span> Mal angeklickt. (sponsored)</p>
</div>
</section>
</footer>
</div>
</section>
<section class="leftrightleft ">
<header>
<div class="borderright borderbottom pads">
<div>
<h3>Hugis Fahrschule AG</h3>
<h4 style="padding:0;line-height:1.3em;">Thomas Hugelshofer</h4>
<span class="biger">Thomas Hugelshofer</span>
<p><span>8106</span> <span>Adlikon b. Regensdorf</span></p>
</div>
<table class="eintraegemain clearfix">
<tbody></tbody>
</table>
</div>
</header>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title accordeonfarbe-00" href="#accordion-1-13695"><span class="arrow"></span>Preise für Auto: 84.-, Motorrad: 90.-, Taxi: 95.-, Lastwagen:...</a>
<section id="accordion-1-13695" class="secondright accordion-section-content">
<div class="borderleft pads">
<table>
<tbody>
<tr>
<td>Kategorien</td>
<td>Preise CHF</td>
</tr>
<tr>
<td>Auto:</td>
<td>84.-</td>
</tr>
<tr>
<td>Motorrad:</td>
<td>90.-</td>
</tr>
<tr>
<td>Taxi:</td>
<td>95.-</td>
</tr>
<tr>
<td>Lastwagen:</td>
<td>165.-</td>
</tr>
<tr>
<td>Lastwagen C1:</td>
<td>165.-</td>
</tr>
<tr>
<td>Auto Anhänger:</td>
<td>112.-</td>
</tr>
<tr>
<td>LKW Anhänger:</td>
<td>195.-</td>
</tr>
<tr>
<td>Car:</td>
<td>195.-</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Kurse</td>
<td>Preise CHF</td>
</tr>
<tr>
<td>Verkehrskunde:</td>
<td>150.-</td>
</tr>
<tr>
<td>Motorrad Grundkurs:</td>
<td>160.-</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<div class="accordion-section">
<a class="accordion-section-title accordeonfarbe-00" href="#accordion-2-13695"><span class="arrow"></span>Weitere Informationen: Sprachen: Deutsch, Englisch...</a>
<section id="accordion-2-13695" class="thirdleft accordion-section-content">
<div class="borderright pads">
<table id="sb_13695">
<tbody>
<tr>
<td>Sprachen: </td>
<td>Deutsch, Englisch, Französisch, Italienisch, Polnisch, Türkisch</td>
</tr>
<tr>
<td>Autotyp:</td>
<td>VW, BMW, MAN, SETRA, </td>
</tr>
</tbody>
<tbody></tbody>
</table>
</div>
</section>
</div>
<footer class="clearfix">
<section>
<div class="bordertop pads" id="sbwl_13695">
<div class="ratingoutside">
<ul class="rating">
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li class="icon icon-star-two"></li>
<li>(12)</li>
</ul>
</div>
<div class="rightbuts"><a class="buttonsmall" href="bewertungen.php?irat=13695" onclick="showBewe(13695);return false;" title="Bewertungen anschauen">Bewertungen anschauen</a>
<a class="buttonsmall" href="lernen/index.php?bewe_irat=13695">Fahrlehrer bewerten</a>
</div>
<p class="clicks minhide clearfix"> 30-Tage-Statistik : Inserat 307 Mal angezeigt. </p>
</div>
</section>
</footer>
</div>
</section>
<ul class="paginator"></ul>
<section class="texttabs clearfix">
<p>
Fahrschulen in der Schweiz: Fahrschulen und Fahrlehrer für Auto, Motorrad, Lastwagen, Taxi und Boot. Verkehrskunde (VKU), Nothelferkurs, Motorradgrundkurs. Informationen zu Strassenverkehrsamt, Lernfahrausweis, Fahrprüfung, WAB hier im Schweizer Fahrlehrervergleich.
</p>
<p>
Der Schweizer Fahrlehrervergleich gibt Auskunft über Fahrschulen und Fahrlehrer, die in folgenden Kategorien unterrichten: Auto, Motorrad, Lastwagen, Taxi und Boot. Ebenfalls werden Angaben über Verkehrtheorie, Motorradgrundkurs, Nothelferkurs und Theorietraining gemacht. Finden Sie eine Auto-, Motorrad- oder Lastwagen-Fahrschule, Informationen zu Ausbildung, Grundkurs, Theoriekurs, Schleuderkurs und Autoprüfung. Fahrschule Fahrschulen Fahrlehrer Zürich Bern Basel Luzern Aargau Schweiz. Der Schweizer Fahrlehrervergleich beinhaltet über 5000 Fahrschulen und Fahrlehrer aus der ganzen Schweiz.
</p>
</section>
</article>
<aside>
<h2>Fahrlehrer und Fahrschulen finden</h2>
<section class="filterbox regone boxstyle">
<h3>Fahrschulen </h3>
<ul>
<li><a title="Fahrschule Hugis Fahrschule AG" href="http://www.fahrlehrervergleich.ch/fahrschule-Hugis-Fahrschule-AG-Z%C3%BCrich-fahrschule-14581.htm">Hugis Fahrschule AG</a></li>
<li><a title="Fahrschule Hugis Fahrschule AG" href="http://www.fahrlehrervergleich.ch/fahrschule-Hugis-Fahrschule-AG-Adlikon+b.+Regensdorf-fahrschule-13695.htm">Hugis Fahrschule AG</a></li>
</ul>
</section>
<section class="filterbox regone boxstyle">
<h3>Sprachauswahl</h3>
<ul>
<li><a hreflang="de" href="http://www.fahrlehrervergleich.ch" title="Schweizer Fahrlehrervergleich">Schweizer Fahrlehrervergleich</a></li>
<li><a hreflang="fr" href="http://auto-ecole.comparatif.ch" title="Comparatif d'auto-écoles suisses">Comparatif d'auto-écoles suisses</a></li>
<li><a hreflang="it" href="http://autoscuola.comparazione.ch" title="Confronto delle autoscuole svizzere">Confronto delle autoscuole svizzere</a></li>
<li><a hreflang="en" href="http://driving-instructor.fahrlehrervergleich.ch" title="Swiss Driving Instructors">Swiss Driving Instructors</a></li>
</ul>
</section>
<section class="filterbox regone boxstyle">
<h3>Siehe auch...</h3>
<ul>
<li>
<a href="http://www.zahnarztvergleich.ch" title="Schweizer Zahnarztvergleich">
Schweizer Zahnarztvergleich </a>
</li>
<li>
<a href="http://www.treuhandvergleich.ch" title="Schweizer Treuhandvergleich">
Schweizer Treuhandvergleich </a>
</li>
<li>
<a href="http://www.anwaltvergleich.ch" title="Schweizer Anwaltvergleich">
Schweizer Anwaltvergleich </a>
</li>
<li>
<a href="http://www.coiffeurvergleich.ch" title="Schweizer Coiffeurvergleich">
Schweizer Coiffeurvergleich </a>
</li>
</ul>
</section>
</aside>
</div>
My code looks like this:
doc = Nokogiri::HTML(page)
doc.css(".leftrightleft").each do |item|
title = item.at_css("h3 a").text
address = item.at_css(".biger+ p , h3+ p")
address.search('br').each do |n|
n.replace(" ")
end
address = address.text
puts "-----"
puts title
puts "Address:"
puts address
puts "Course Types:"
item.css("table+ table tr+ tr").each do |type_price|
if type_price.css("td")[0] && type_price.css("td")[1] != nil
course_type = type_price.css("td")[0].text
course_type.gsub!(":", "")
price = type_price.css("td")[1].text
puts "\t #{course_type}: #{price}"
end
end
end
The problem is that when I do item.css("table+ table tr+ tr").each do |type_price| it's doing it for all items below that one and not only for that item in specific.
Can someone explain me what I'm doing wrong?
I've figured out a way to solve this.
Instead of making the loop like this item.css("table+ table tr+ tr").each do |type_price|, that makes it loop to the all page from item until the end of the page, I'm doing it like this item.at_css("table+ table tbody").css("tr+ tr").each.
With this solution I'm getting just the first table element and then I loop through the rest of the rows and it works.
I took a look and it seems that Nokogiri is jumbling the elements due to weird markup.
Switching to HTML5 is probably the best bet:
require 'nokogumbo'
doc = Nokogiri::HTML5.get(uri)
I should really say that libxml is doing the jumbling rather than Nokogiri.
I'm using all the usual tricks: border="0" on img, style:display: block on img ... nothing seems to work. I'll not that I'm slicing up the images in photoshop and exporting with "save for web", save as "HTML and Images." This happens all the time, everytime I use this slicing method. The PS feature writes table-based markup which is ideal for emails (as you can't use divs and expect them to work in email templates).
Sometime I will reslice everything using different areas and it works but that is a lot of work. I'd like to get it right the first time I slice up everything! And yes, I've read all the topics on here about horizontal spaces in outlook and nothing seems to work.
Here's the markup (image locations removed):
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="98" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="119" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img border="0" style="display: block;" src="" width="182" height="442" alt=""></td>
<td colspan="6">
<img border="0" style="display: block;" src="" width="418" height="442" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img border="0" style="display: block;" src="" width="182" height="51" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="140" height="51" alt=""></td>
<td colspan="5">
<img border="0" style="display: block;" src="" width="278" height="51" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="128" alt=""></td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="91" alt=""></td>
<td colspan="3">
<img border="0" style="display: block;" src="" width="315" height="91" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="38" height="91" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="42" height="91" alt=""></td>
<td colspan="2">
<img border="0" style="display: block;" src="" width="55" height="91" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="79" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img border="0" style="display: block;" src="" width="599" height="84" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="1" height="84" alt=""></td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="32" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="140" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="143" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="38" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="42" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="54" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="1" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
It is really bad practice to build an entire email of of images. It doesn't render by default in most email clients, takes a long time to download and also triggers some spam filters because your image to text ratio is so low.
That being said, you are getting the vertical gaps because Outlook doesn't know how wide to make each of your cols when you use a colspan in the first row. See this answer for more information on how to enforce the col widths.
Update - Because you want to vary the widths of your cells, you need to use nested tables instead. You can not change the widths of tables from row to row. Here is an example of how you can construct this entire email with nested tables and without a single colspan:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="98" alt="">
</td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="119" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="315" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="38" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="42" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="55" height="91" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="182" height="442" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="418" height="442" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="128" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="315" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="38" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="42" height="91" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="55" height="91" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="600" height="79" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="599" height="84" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="1" height="84" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="1" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="32" height="1" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="140" height="1" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="143" height="1" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="38" height="1" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="42" height="1" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="54" height="1" alt="">
</td>
<td>
<img border="0" style="display: block;" src="" width="1" height="1" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
As I mentioned before, you should avoid images and use text where text is, not an image of text. Here is an example of how your middle section should look like (the part with the images stacked on the left and text on the right):
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="182" style="padding-bottom:20px;">
<img border="0" style="display: block;" src="" width="182" height="120" alt="">
</td>
<td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Text 1
</td>
</tr>
<tr>
<td width="182" style="padding-bottom:20px;">
<img border="0" style="display: block;" src="" width="182" height="120" alt="">
</td>
<td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Text 2
</td>
</tr>
<tr>
<td width="182" style="padding-bottom:20px;">
<img border="0" style="display: block;" src="" width="182" height="120" alt="">
</td>
<td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Text 3
</td>
</tr>
</table>
I was able to fix the issue by adding widths on each of the TDs.
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