Java Jsoup search - java

I have some questions regarding Jsoup.
I have the following parent page. I want to look for some tag names on a HTML page and if they found, I want go inside the linked tag names and search for more tag names. But first I want to give me the tag names in the console.
This is my HTML page.
<div id="main">
<div class="box">
<!-- box / title -->
<div class="title">
<h5>
<input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="quick filter..." value=""/>
<span class="groups_breadcrumbs">
Home
» "samia" with
</span>
<span id="repo_count">0</span> repositories
</h5>
<ul class="links">
<li>
</li>
</ul>
</div>
<!-- end box / title -->
<div class="table">
<div id='groups_list_wrap' class="yui-skin-sam">
<table id="groups_list">
<thead>
<tr>
<th class="left">Section Name</th>
<th class="left">ID_Description</th>
</tr>
</thead>
<tr>
<td>
<div style="white-space: nowrap">
<i class="icon-folder-close"></i> Export
</div>
</td>
<td>samia/Export group</td>
</tr>
<tr>
<td>
<div style="white-space: nowrap">
<i class="icon-folder-close"></i> Links
</div>
</td>
<td>samia/Links group</td>
</tr>
<tr>
<td>
<div style="white-space: nowrap">
<i class="icon-folder-close"></i> Platforms
</div>
</td>
<td>samia/Platforms group</td>
</tr>
<tr>
<td>
<div style="white-space: nowrap">
<i class="icon-folder-close"></i> LargeSml
</div>
</td>
<td>samia/LargeSml group</td>
</tr>
<tr>
<td>
<div style="white-space: nowrap">
<i class="icon-folder-close"></i> Processes
</div>
</td>
<td>samia/Processes group</td>
</tr>
<tr>
<td>
<div style="white-space: nowrap">
<i class="icon-folder-close"></i> Tills
</div>
</td>
<td>Tills für samia</td>
</tr>
</table>
First I want to look/display:
Export
Links
Platforms
LargeSml
Second I want to go inside of Export and search for more tags, etc....
I have following code so far, but it doesnt seem to work.
Document doc = Jsoup.connect("http://************").cookies(loginCookies).get();
for (Element table : doc.select("groups_list")) {
for (Element row : table.select("tr")) {
Elements tds = row.select("td");
System.out.println(tds.get(0).text());
}
}
Here is my second approach.
On the page I want navigate through the table groups_list for tag Export, Links, Platforms etc. So if I under those sub-pages (like Export), I search for all links the name ending with Doc. These are however in javascript. Following the is the script.
<script>
var data = {"totalRecords": 2, "sort": "name", "startIndex": 0, "dir": "asc", "records": [{"raw_name": "samia/export/Citydata", "last_changeset": "\n <div>\n <pre><a title=\"xn00761:\n\nAdded tag V2.11.d50.mkt.001 for changeset 56e10a4864ff\" class=\"tooltip\" href=\"/samia/export/Citydata/changeset/f602409eba261d749d23dc75551b2959425dfa8d\">r17:f602409eba26</a></pre>\n </div>\n", "atom": "\n <a title=\"Subscribe to samia/export/Citydata atom feed\" href=\"/samia/export/Citydata/feed/atom?api_key=e214ebea2335318bee1460a1fd33725ab3e1002e\"><i class=\"icon-rss-sign\" style=\"color: #fa9b39\"></i></a>\n", "owner": "owner", "rss": "\n <a title=\"Subscribe to samia/export/Citydata rss feed\" href=\"/samia/export/Citydata/feed/rss?api_key=e214ebea2335318bee1460a1fd33725ab3e1002e\"><i class=\"icon-rss-sign\" style=\"color: #fa9b39\"></i></a>\n", "name": "\n \n <div style=\"white-space: nowrap; }\">\n \n\n <span title=\"Mercurial repository\"><i class=\"icon-hg\" style=\"color: #316293; font-size: 14px;\"></i></span>\n\n <span style=\"margin: 0px 8px 0px 8px\"></span>\n Citydata\n \n </div>\n", "last_rev_raw": 17, "state": "\n <div>\n <div class=\"btn btn-mini btn-success disabled\">Created</div>\n </div>\n", "menu": "\n <ul class=\"menu_items hidden\">\n\n <li style=\"border-top:1px solid #003367;margin-left:18px;padding-left:-99px\"></li>\n <li>\n <a title=\"Summary\" href=\"/samia/export/Citydata\">\n <span class=\"icon\">\n <i class=\"icon-file-text\"></i>\n </span>\n <span>Summary</span>\n </a>\n </li>\n <li>\n <a title=\"Changelog\" href=\"/samia/export/Citydata/changelog\">\n <span class=\"icon\">\n <i class=\"icon-list-alt\"></i>\n </span>\n <span>Changelog</span>\n </a>\n </li>\n <li>\n <a title=\"Files\" href=\"/samia/export/Citydata/files/tip/\">\n <span class=\"icon\">\n <i class=\"icon-file-alt\"></i>\n </span>\n <span>Files</span>\n </a>\n </li>\n <li>\n <a title=\"Fork\" href=\"/samia/export/Citydata/fork\">\n <span class=\"icon\">\n <i class=\"icon-code-fork\"></i>\n </span>\n <span>Fork</span>\n </a>\n </li>\n </ul>\n", "desc": "HDB Marktdatenimport", "last_change": "\n <span class=\"tooltip\" date=\"2014-08-21 18:49:50\" title=\"Thu, 21 Aug 2014 18:49:50\">6 days and 19 hours ago</span>\n"}, {"raw_name": "samia/export/CitydataDoc", "last_changeset": "\n <div>\n <pre><a title=\"xn01606 &lt;owner;gt;:\n\nChangedokumentation\" class=\"tooltip\" href=\"/samia/export/CitydataDoc/changeset/9ed1679c7a35b76e1402b540cee38000461fdfdd\">r0:9ed1679c7a35</a></pre>\n </div>\n", "atom": "\n <a title=\"Subscribe to samia/export/CitydataDoc atom feed\" href=\"/samia/export/CitydataDoc/feed/atom?api_key=e214ebea2335318bee1460a1fd33725ab3e1002e\"><i class=\"icon-rss-sign\" style=\"color: #fa9b39\"></i></a>\n", "owner": "xn00761 (Stefan Kortmann)", "rss": "\n <a title=\"Subscribe to samia/export/CitydataDoc rss feed\" href=\"/samia/export/CitydataDoc/feed/rss?api_key=e214ebea2335318bee1460a1fd33725ab3e1002e\"><i class=\"icon-rss-sign\" style=\"color: #fa9b39\"></i></a>\n", "name": "\n \n <div style=\"white-space: nowrap; }\">\n \n\n <span title=\"Mercurial repository\"><i class=\"icon-hg\" style=\"color: #316293; font-size: 14px;\"></i></span>\n\n <span style=\"margin: 0px 8px 0px 8px\"></span>\n CitydataDoc\n \n </div>\n", "last_rev_raw": 0, "state": "\n <div>\n <div class=\"btn btn-mini btn-success disabled\">Created</div>\n </div>\n", "menu": "\n <ul class=\"menu_items hidden\">\n\n <li style=\"border-top:1px solid #003367;margin-left:18px;padding-left:-99px\"></li>\n <li>\n <a title=\"Summary\" href=\"/samia/export/CitydataDoc\">\n <span class=\"icon\">\n <i class=\"icon-file-text\"></i>\n </span>\n <span>Summary</span>\n </a>\n </li>\n <li>\n <a title=\"Changelog\" href=\"/samia/export/CitydataDoc/changelog\">\n <span class=\"icon\">\n <i class=\"icon-list-alt\"></i>\n </span>\n <span>Changelog</span>\n </a>\n </li>\n <li>\n <a title=\"Files\" href=\"/samia/export/CitydataDoc/files/tip/\">\n <span class=\"icon\">\n <i class=\"icon-file-alt\"></i>\n </span>\n <span>Files</span>\n </a>\n </li>\n <li>\n <a title=\"Fork\" href=\"/samia/export/CitydataDoc/fork\">\n <span class=\"icon\">\n <i class=\"icon-code-fork\"></i>\n </span>\n <span>Fork</span>\n </a>\n </li>\n </ul>\n", "desc": "HDB Marktdatenimport (Dokumentation)", "last_change": "\n <span class=\"tooltip\" date=\"2014-04-25 11:03:45\" title=\"Fri, 25 Apr 2014 11:03:45\">4 months and 3 days ago</span>\n"}]};
var myDataSource = new YAHOO.util.DataSource(data);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
When I then go under all these ...Doc links, I want look if there are more links with specific tag. Here below you see, I want navigate through all links within tag name "r0:9ed1679c7a35"
<div class="box" style="margin-top: -20px">
<div class="title">
<div class="breadcrumbs">
Latest changes
</div>
</div>
<div class="table">
<div id="shortlog_data">
<table class="table_disp">
<tr>
<th class="left">Revision</th>
<th class="left">Commit message</th>
<th class="left">Age</th>
<th class="left">Author</th>
<th class="left">Refs</th>
</tr>
<tr class="parity0">
<td>
<div>
<div class="changeset-status-container">
</div>
<pre>r0:9ed1679c7a35</pre>
</div>
</td>
<td>
<a class="message-link" href="/samia/Export/CitydataDoc/changeset/9ed1679c7a35b76e1402b540cee38000461fdfdd">Changedokumentation</a>
</td>
<td><span class="tooltip" title="Fri, 25 Apr 2014 11:03:45">
4 months and 3 days ago</span>
</td>
<td title="owner;">owner</td>
<td>
<div class="tagtag" title="Tag tip">
tip
</div>
<div class="branchtag" title="Branch default">
default
</div>
</td>
</tr>
When I am under the links of the one called "r0:9ed1679c7a35", I have the following HTML code. Here I want to navigate through Changedokumentation.docx.
<div class="browser-body">
<table class="code-browser">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Mimetype</th>
<th>Last Revision</th>
<th>Last modified</th>
<th>Last committer</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="parity0">
<td>
<a class="browser-file ypjax-link" href="/samia/Export/CitydataDoc/files/9ed1679c7a35b76e1402b540cee38000461fdfdd/Changedokumentation_P0702_HDB_20140318.docx">Changedokumentation.docx</a>
</td>
<td>
133.5 KiB
</td>
<td>
application/vnd.openxmlformats-officedocument.wordprocessingml.document
</td>
<td>
<div class="tooltip" title="Changedokumentation">
<pre>r0:9ed1679c7a35</pre>
</div>
</td>
<td>
<span class="tooltip" title="Fri, 25 Apr 2014 11:03:45">
4 months and 3 days ago</span>
</td>
<td>
<span title="owner">
owner
</span>
</td>
</tr>
</tbody>
<tbody id="tbody_filtered" style="display:none">
</tbody>
</table>
</div>
And finally when I am at the End-page I want the Names first listed (so I know that this file is existing) and also have the option to download the file. I can download it when the "Download as Raw" is pressed. This is here in the code.
<div id="body" class="codeblock">
<div class="code-header">
<div class="stats">
<div class="left img"><i class="icon-file"></i></div>
<div class="left item"><pre class="tooltip" title="Fri, 25 Apr 2014 11:03:45">r0:9ed1679c7a35</pre></div>
<div class="left item"><pre>133.5 KiB</pre></div>
<div class="left item last"><pre>application/vnd.openxmlformats-officedocument.wordprocessingml.document</pre></div>
<div class="buttons">
<a class="btn btn-mini" href="/samia/Export/CityDataDoc/annotate/9ed1679c7a35b76e1402b540cee38000461fdfdd/Changedokumentation.docx">Show Annotation</a>
<a class="btn btn-mini" href="/samia/Export/CityDataDoc/raw/9ed1679c7a35b76e1402b540cee38000461fdfdd/Changedokumentation.docx">Show as Raw</a>
<a class="btn btn-mini" href="/samia/Export/CityDataDoc/rawfile/9ed1679c7a35b76e1402b540cee38000461fdfdd/Changedokumentation.docx">Download as Raw</a>
<a class="btn btn-mini disabled tooltip" href="#" title="Editing binary files not allowed">Edit</a>
<a class="btn btn-mini btn-danger" href="/samia/Export/CityDataDoc/delete/default/Changedokumentation.docx#edit">Delete</a>
</div>
</div>
<div class="author">
<div class="gravatar">
<img alt="gravatar" src="/images/user16.png"/>
</div>
<div title="owner" class="user">owner</div>
</div>
<div class="commit">Changedokumentation</div>
</div>
<div class="code-body">
<div style="padding:5px">
Binary file (application/vnd.openxmlformats-officedocument.wordprocessingml.document)
</div>
</div>
I know that is too much code. But it is pretty easy to understand, I hope :-)

You are using css like selectors in JSOUP. the way you use it, it searches for an element tag called groups_list, which is of course not found. Instead you need to look for a table with id groups_list. This would do it I think:
doc.select("table#groups_list")
Put this in the outer loop and you should at least get the td elements printed out.
Since in html documents, the id should be unique, you can do also:
doc.select("#groups_list")
or
doc.select("table[id=groups_list]")
finally, if you don't want to use the css select engine of JSOUP, you may use the JSOUP methods for directly accessing elements by id:
doc.getElementById("groups_list");

Related

How to select a row using a text in dynamic web table using selenium in Java?

In my application my projects list grows dynamically in a table. I need to select a project using its name. Select button is in 2nd column and the project name is in 3rd column. How to open the project using its name?
<table class="ui celled definition sortable striped compact table" xpath="1">
<thead class="full-width">
<tr>
<th colspan="9">
<div role="combobox" aria-expanded="false" class="ui search selection dropdown per-page">
<input aria-autocomplete="list" autocomplete="off" class="search" tabindex="0" type="text" value=""/>
</div>
<a href="/project-setup">
<button class="ui orange big circular icon right floated button">
<i aria-hidden="true" class="plus icon"/>
</button>
</a>
</th>
</tr>
<tr>
<th class="select-delete-check-box">
<div class="ui fitted checkbox">
<input class="hidden" id="selectAll" readonly="" tabindex="0" type="checkbox" value=""/>
<label for="selectAll"/>
</div>
</th>
<th> Open </th>
<th>ID</th>
<th>Owner</th>
<th>Members</th>
<th>Created At</th>
<th>Last Updated</th>
</tr>
</thead>
<tbody>
<tr>
<td class="select-delete-check-box">
<div class="ui fitted checkbox">
<input class="hidden" id="5e992e2b14d2d67c91eb51c9" readonly="" tabindex="0" type="checkbox" value=""/>
<label for="5e992e2b14d2d67c91eb51c9"/>
</div>
</td>
<td class="collapsing">
<a href="/project-setup?id=5e992e2b14d2d67c91eb51c9">
<button class="ui green big circular icon right floated button">
<i aria-hidden="true" class="pencil icon"/>
</button>
</a>
</td>
<td>
<div class="step">
<div class="content">
<div class="title" style="font-size: 1.2em; font-weight: bold;">A</div>
<div class="description">
<span>
<i aria-hidden="true" class="blue globe icon"/>3,4</span>
<br>
<span>
<i aria-hidden="true" class="red map marker alternate icon"/> Poland</span>
</div>
</div>
</div>
</td>
<td>abc#abc.com</td>
<td/>
<td>17/04/2010, 09:48:51</td>
<td>17/04/2010, 09:48:51</td>
</tr>
<tr>
<td class="select-delete-check-box">
<div class="ui fitted checkbox">
<input class="hidden" id="5e97f0a0adba5850643c7202" readonly="" tabindex="0" type="checkbox" value=""/>
<label for="5e97f0a0adba5850643c7202"/>
</div>
</td>
<td class="collapsing">
<a href="/project-setup?id=52">
<button class="ui green big circular icon right floated button">
<i aria-hidden="true" class="pencil icon"/>
</button>
</a>
</td>
<td>
<div class="step">
<div class="content">
<div class="title" style="font-size: 1.2em; font-weight: bold;">B</div>
<div class="description">
<span>
<i aria-hidden="true" class="blue globe icon"/> 1,2</span>
<br>
<span>
<i aria-hidden="true" class="red map marker alternate icon"/> Tamil Nadu, India</span>
</div>
</div>
</div>
</td>
<td>abc#abc.com</td>
<td/>
<td>16/04/2010, 11:14:00</td>
<td>16/04/2010, 17:08:01</td>
</tr>
</tbody>
</table>
Try this:
WebElement table=driver.findElement(By.tagName("tbody"));
table.findElement(By.xpath("//div[#class='title' and contains(text(),'A')]/ancestor::td[1]/parent::tr/td[2]/a/button")).click();

Change html page to .png

I want to change an html label I'm receiving from a site to a .png image.
This is the html I'm receiving:
<html>
<body>
<div style='position: relative; margin-top: 25px; height: 800px;page-break-after: always;margin:0;padding:0;'>
<table style="font-family:arial;">
<tr>
<td width="0px"> </td>
<td valign="top" width="626px">
<div style="position:absolute;">
<span style='left:356px;top:34px;position:absolute;'><img
src='data:image/gif;base64,R0lGODlhFABgAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAUAGAAAAKKjI+py+0Po5y02ouz3rz7nwAiMJHXaEZphYJMK60UrGK0i9yPXI6l7cNxeAeUbsFLBXMKkzLUNDyhxaJRdpxdQ1dnFfmdRqVWIvkcE+XUP7S0i8aO4e46mLpj2rnszbK29/IVE2Dm8gchljio0iekYSiUJWgR2WD0WDZ5p2WJ55kZKjpKWmp66lIAADs%3D' /></span>
<span style='left:100px;top:0;position:absolute;font-size:12px;'><b>Responsible Delivery -
CO<sub>2</sub> Neutral</b></span>
<span style='left:196px;top:88px;position:absolute;font-size:8px;'>Sender</span>
<span style='left:196px;top:96px;position:absolute;font-size:8px;'>MY CONTACT</span>
<span style='left:196px;top:105px;position:absolute;font-size:8px;'>ROEBUCK LANE</span>
<span style='left:196px;top:114px;position:absolute;font-size:8px;'>SMETHWICK</span>
<span style='left:196px;top:123px;position:absolute;font-size:8px;'>BIRMINGHAM</span>
<span style='left:196px;top:132px;position:absolute;font-size:8px;'></span>
<span style='left:196px;top:141px;position:absolute;font-size:8px;'>B66 1BY</span>
<span style='left:242px;top:145px;position:absolute;font-size:8px;'>Phone:0121 500 2500</span>
<span style='left:250px;top:88px;position:absolute;font-size:8px;'>Account:103092</span>
<span style='left:4px;top:19px;position:absolute;font-size:12px;'>USER NAME</span>
<span style='left:4px;top:30px;position:absolute;font-size:12px;'>ADDRESS LINE 1</span>
<span style='left:4px;top:41px;position:absolute;font-size:12px;'></span>
<span style='left:4px;top:52px;position:absolute;font-size:12px;'>CITY LONDON</span>
<span style='left:4px;top:63px;position:absolute;font-size:12px;'></span>
<span style='left:4px;top:74px;position:absolute;font-size:12px;'>ZIP 123</span>
<span style='left:90px;top:74px;position:absolute;font-size:12px;'>United Kingdom</span>
<span style='left:220px;top:68px;position:absolute;font-size:18px;'></span>
<span style='left:4px;top:88px;position:absolute;font-size:8px;'>Contact</span>
<span style='left:4px;top:96px;position:absolute;font-size:8px;'>Phone</span>
<span style='left:4px;top:120px;position:absolute;font-size:8px;'>Consignment</span>
<span style='left:4px;top:128px;position:absolute;font-size:8px;'>Ref</span>
<span style='left:4px;top:104px;position:absolute;font-size:8px;'>Info</span>
<span style='left:60px;top:104px;font-size:8px;position:absolute;'></span>
<span style='left:60px;top:112px;font-size:8px;position:absolute;'></span>
<span style='left:60px;top:88px;position:absolute;font-size:8px;'>USER NAME</span>
<span style='left:60px;top:96px;position:absolute;font-size:8px;'>7420000000</span>
<span style='left:60px;top:120px;position:absolute;font-size:8px;'>3907367566</span>
<span style='left:60px;top:128px;position:absolute;font-size:8px;'>TESTORDERASM</span>
<span style='left:60px;top:136px;position:absolute;font-size:8px;'></span>
<span style='left:60px;top:144px;position:absolute;font-size:8px;'></span>
<span style='left:284px;top:18px;position:absolute;font-size:8px;'>Packages</span>
<span style='left:276px;top:48px;position:absolute;font-size:8px;'>Total Weight</span>
<span style='left:274px;top:26px;position:absolute;font-size:16px;'>1 of 1</span>
<span style='left:274px;top:56px;position:absolute;font-size:16px;'>2 kg</span>
<span style='left:6px;top:180px;position:absolute;font-size:8px;'>Track</span>
<span style='left:350px;top:180px;position:absolute;font-size:8px;'>Service</span>
<span style='left:5px;top:158px;position:absolute;font-size:22px;'>1550</span>
<span style='left:62px;top:160px;position:absolute;font-size:16px;'>3907 3675 66F</span>
<span
style='left:5px;width:370px;top:250px;position:absolute;font-size:10px;text-align:center;'>
25/10/19 08:23 Web 4.3.3-api </span>
<span style='left:19px;top:265px;position:absolute;'><img width='348px' height='95px'
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAegAAAAOCAMAAADT5H8VAAADAFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALI7fhAAABAHRSTlP//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKmfXxgAAGslJREFUeNoBvhpB5QABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAQABAQEBAAABAQAAAAABAQAAAAAAAAAAAQEAAAAAAAABAQAAAAABAQEBAAAAAAEBAAAAAAAAAQEAAAEBAQEAAAAAAAABAQEBAAABAQEBAQEAAAAAAAABAQAAAQEBAQAAAAABAQAAAAABAQEBAQEAAAEBAQEBAQAAAQEAAAAAAQEBAQAAAAABAQEBAQEAAAEBAQEAAAEBAQEBAQAAAQEAAAAAAAABAQEBAAABAQAAAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQAAAQEBAQEBAAABAQEBAQEBAQAAAQEAAAEBAQEBAQAAAAABAQEBAAAAAAEBAQEAAAAAAAABAQAAAQEBAQEBAAABAQEBAAABAQAAAAAAAAEBAAAAAAAAAQEAAAAAAQEBAQAAAAAAAAEBAAAAAAEBAAABAQEBAAAAAAAAAQEAAAAAAAABAQEBAAAAAAAAAAABAQAAAAABAQAAAQEAAAAAAQEAAAAAAAAAAAEBAQEAAAEBAAAAAAEBAAABAQEBAQEBAQAAAAABAQEBAQEAAAAAAQEBAQAAAQEAAAAAAQEBAQEBAAAAAAEBAAAAAAEBAQEAAAEBAAAAAAAAAQEAAAEBAQEBAQEBAAABAQEBAAAAAAAAAQEBAQEBAAABAQAAAQEBAXI3DSFwaxO9AAAAAElFTkSuQmCC' /></span>
<span style='left:85px;top:363px;position:absolute;font-size:12px;'>BT48 7ER1 5503 9073 6756
6812 826U</span>
<span
style='left:132px;top:158px;width:250px;text-align:right;position:absolute;font-size:20px;'>
NEXT DAY</span>
<span style='left:130px;top:230px;position:absolute;font-size:14px;'> 812-GB - BT48 7ER </span>
<span style='left:10px;top:190px;position:absolute;font-size:18px;'></span>
<span style='left:10px;top:225px;position:absolute;font-size:30px;'></span>
<span style='left:300px;top:225px;position:absolute;font-size:30px;'>0087</span>
<span style='left:45px;top:180px;position:absolute;font-size:46px;'>GB-BT48 7ER</span>
<table
style='display:inline-block;border:3px solid black;padding:0;border-spacing:0;border-collapse:collapse;'
height='385' width='385px'>
<tr>
<td>
<table style='padding:0;border-spacing:0;border-collapse:collapse;' width='100%'>
<tr>
<td style='font-size:1px;border-bottom:1px solid black;' colspan='4'>
<div style='height:10px'> </div>
</td>
</tr>
<tr>
<td colspan='2'
style='text-align:left;border-bottom:1px solid black;vertical-align:top;'>
<div style='height:69px'> </div>
</td>
<td style='border-bottom:1px solid black;border-left:1px solid black;'>
</td>
<td style='border-bottom:3px solid black;border-left:1px solid black;'
rowspan='2'> </td>
</tr>
<tr>
<td style='border-bottom:3px solid black;'>
<div style='height:66px'> </div>
</td>
<td style='border-bottom:3px solid black;border-left:1px solid black;'
colspan='2'> </td>
</tr>
<tr>
<td style='text-align:left;vertical-align:top;' colspan='4'>
<div style='height:226px'> </div>
</td>
</tr>
<tr>
<td style='font-size:1px;' width='195px'> </td>
<td style='font-size:1px;' width='70px'>
<div style='height:1px'> </div>
</td>
<td style='font-size:1px;' width='80px'> </td>
<td style='font-size:1px;' width='40px'> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
I tried the below code:
HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
String uri = new File("D:/3907367566.html").toURI().toString();
try {
imageGenerator.loadHtml(new String(Files.readAllBytes(Paths.get("D:/3907367566.html"))));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
imageGenerator.setOrientation(ComponentOrientation.LEFT_TO_RIGHT);
imageGenerator.saveAsImage("D:/3907367566_2.png");
imageGenerator.saveAsHtmlWithMap("3907367566.html", "3907367566.png");
Please check the screenshot original .html page and the .png file I'm getting here: https://drive.google.com/file/d/1VGgKwGkmSijKZWjhZADNLxCcBWOcY7f0/view?usp=sharing
Can anyone help me create an image that is exactly the same as the HTML we are receiving? Thanks!
Your code is working properly. The issue is that your are not downloading the CSS style sheet and other resources like images (the barcode).
Despite having lots of styling embedded to your HTML file, it is clearly losing some styling rules.
One solution would be to embed all the CSS properties into your HTML.
Another one would be to use an external API like: https://htmlcsstoimage.com/ which accepts CSS and HTML.

I want to select values in date range from the drop down.how can I select the values as date in the year range date picker

Currently working on Selenium WebDriver and using Java.I want to select values in date range from the drop down.. I want to know how can I select the values as Date, Month and year in the year range date picker
HTML Code:
<html>
<head>
<body>
<div class="display_wait_overlay">
<div class="section wrapper">
<div id="test-not" class="fade modal text-left">
<div id="monthlyinvoiceremainder" class="fade modal text-left">
<div id="monthlyinvoiceremainderBox" class="btm_bx">
<div id="depositDetailsResponse" class="fade modal text-left">
<div id="depositDetails" class="fade modal text-left">
<footer class="footer navbar_custom" style="">
<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-bottom" style="display: block; top: 155.933px; left: 758.133px;">
<div class="datepicker-days" style="display: none;">
<div class="datepicker-months" style="display: none;">
<div class="datepicker-years" style="display: block;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th class="datepicker-switch" colspan="5">2010-2019</th>
<th class="next" style="visibility: hidden;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="year old">2009</span>
<span class="year">2010</span>
<span class="year">2011</span>
<span class="year">2012</span>
<span class="year">2013</span>
<span class="year">2014</span>
<span class="year">2015</span>
<span class="year disabled">2016</span>
<span class="year disabled">2017</span>
<span class="year disabled">2018</span>
<span class="year disabled">2019</span>
<span class="year new disabled">2020</span>
</td>
</tr>
</tbody>
<tfoot>
</table>
</div>
</div>
</body>
</html>

CSS expression is not working for Select link

table class="s-table table table-bordered table-striped table-hover">
<thead class="p-table-head">
<tbody class="p-table-body">
<tr>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<div id="div_2_1_2_1_7_r6" class="Action_Group CoachView CoachView_show" data-eventid="" data-viewid="Action_Group5" data-config="config_div_2_1_2_1_7_r6" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action_Group">
<div id="div_2_1_2_1_7_1_r6" class="ContentBox" data-view-managed="true" style="display: none;"> </div>
<div class="s-action-group clearfix">
<div class="l-nodeId" style=" display: none; "></div>
<div class="p-action-group">
<div id="div_2_1_2_1_7_1_1_r6" class="Action CoachView CoachView_show" data-eventid="boundaryEvent_4" data-viewid="Action3" data-config="config_div_2_1_2_1_7_1_1_r6" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action">
<button id="div_2_1_2_1_7_1_1_r6-lnk" type="button" style="display: none;">
<a class="p-action-link" href="#action" title="">
<i class="fa fa-user"></i>
<span>Select</span>
</a>
</div>
<div id="div_2_1_2_1_7_1_2_r6" class="Action CoachView CoachView_show" data-eventid="boundaryEvent_8" data-viewid="Action4" data-config="config_div_2_1_2_1_7_1_2_r6" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_9e739df9_ccc7_4dfa_9b75_8233150ad5bc.Action">
</div>
</div>
</div>
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</div>
I have tried x path expression as
//div[#class='row-fluid']/table/tbody/tr[1]/td[7]/div/div[2]/div[2]/div/a/span
//*[#id='div_2_1_2_1_7_1_1_r6']/a/span
Also tried CSS selector as
div[id='div_2_1_2_1_7_1_1_r6'] a[class='p-action-link'] span
any of above identification is not working please let me know if any one has best solutions for the above problem!
Try this XPATH:
//a[span='Select']
If it is not working, please indent the HTML.
Try with below locators.
By.xpath("//div[#id='div_2_1_2_1_7_1_1_r6']//a//span")
or
By.xpath("//div[#id='div_2_1_2_1_7_1_1_r6']//a//span[text()='Select']")
or
By.xpath("//span[text()='Select']")
or
By.cssSelector("div[id='div_2_1_2_1_7_1_1_r6'] a span")
If that div id is not static (I mean dynamically generating unique id everytime) then you should consider some other attribute or some part of it.
By.xpath("//div[contains(#id,'div_2_1')]//a//span")
or
By.xpath("//div[contains(#id,'div_2_1')]//a//span[text()='Select']")
or
By.xpath("//span[text()='Select']")
or
By.cssSelector("div[id*='div_2_1'] a span")

ace:dataTable default filter

My web application uses an <ace:dataTable> and I want to add a default filter to a column. The datatable uses lazy loading. I know that I can add the filter in my managed bean to the "load"-method.
But I need to set the filter into the filter "textbox" in the view at the start of rendering the page, not implementing the filter in the managed bean.
How can I achieve this?
If I'd understand your problem. If you got a datatable like this:
<ace:dataTable id="carTable"
value="#{dataTableBean.carsData}"
var="car"
paginator="true"
paginatorPosition="bottom"
rows="10">
<ace:column id="id" headerText="ID" sortBy="#{car.id}"
filterBy="#{car.id}" filterMatchMode="contains">
<h:outputText id="idCell" value="#{car.id}"/>
</ace:column>
</ace:dataTable>
You got an html code like this:
<div class="ui-datatable ui-widget" id="form:carTable">
<div>
<table>
<thead>
<tr>
<th class="ui-widget-header">
<div class="ui-header-column ui-sortable-column clickable" id="form:carTable:id">
<span>
<span class="ui-header-text" id="form:carTable:id_text">ID</span>
</span>
<span class="ui-header-right">
<span class="ui-sortable-control">
<span class="ui-sortable-column-icon">
<a class="ui-icon ui-icon-triangle-1-n" tabindex="0"
style="opacity: 0.33; "></a>
<a class="ui-icon ui-icon-triangle-1-s" tabindex="0"
style="opacity: 0.33; "></a>
</span>
<span class="ui-sortable-column-order"></span>
</span>
</span>
<input class="ui-column-filter" id="form:carTable:id_filter" name="form:carTable:id_filter"
size="1" tabindex="0" value=""/>
</div>
</th>
</tr>
</thead>
<tbody class="ui-datatable-data ui-widget-content">
<tr class=" ui-datatable-even " id="form:carTable_row_0" tabindex="0">
<td>
<span id="form:carTable:0:idCell">1</span>
</td>
</tr>
<tr class=" ui-datatable-odd " id="form:carTable_row_1" tabindex="0">
<td>
<span id="form:carTable:1:idCell">2</span>
</td>
</tr>
</tbody>
</table>
</div>
There you can see the input. Then I'd use jQuery:
$(document).ready(function() {
$('[id$=id_filter]').html("default_text_for_filtering");});

Categories