I am using HTML table followed by paragraph but I found space between the table and paragraph is more than needed. How can I control (reduce) the space between table and paragraph.
<table border=1><tr><td>col1</td><td>col2</td></tr></table>
<p style="width: 100%; text-align: right;"><button type="button" id="submit-button" style='visibility:hidden;width:1px;height:1px' >Submit</button></p>
Margin-top:0%
<table border=1><tr><td>col1</td><td>col2</td></tr></table>
<p style=" margin-top:0%;width: 100%; text-align: right;"><button type="button" id="submit-button" style='visibility:hidden;width:1px;height:1px' >Submit</button></p>
Related
There's a way to have column's header on all the printed page of PDF?
I can see the column's header on the first page but they are missing for the other pages.
here is command i'm using:
webdatarocks.exportTo(
"pdf",
{filename: "test_file+.pdf", pageOrientation: "landscape",
header:"<div style='width: 100%; font-size:100%'><span style='float: left;'>ditta</span>\
<span style='float: right;'>Pag. ##PAGE-NUMBER##</span></div>\
<div style='text-align: center; font-size:150%;'>titolo</div>\
<div style='text-align: left; font-size:100%;'>note</div>"}
);
I faced a similar issue before. Maybe, exporting to HTML would work for your case:
webdatarocks.exportTo("html",
{
filename: "test_file+",
header: "<div style='width: 100%; font-size:100%'><span style='float:left;'>ditta</span>\
<span style='float: right;'>Pag. 1</span></div>\
<div style='text-align: center; font-size:150%;'>titolo</div>\
<div style='text-align: left; font-size:100%;'>note</div>"}
);
I am trying to Input Text into a React created element. So far I have tried the following methods:
Input Text css:input#textfield-1198-inputEl TEXT
Input Text css:input.x-form-field x-form-required-field x-form-#textfield-1198-inputEl TEXT
Input Text xpath=//input[contains(#name,'textfield-1198-inputEl')] TEXT
Input Text xpath=//*[#id="textfield-1198-inputEl"] TEXT
As well as trying the absolute & relative paths, though it always responds with - did not match any elements.
Wait Until Element Is Visible times out.
Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="x-window x-layer x-window-default x-closable x-window-closable x-window-default-closable x-border-box x-resizable x-window-resizable x-window-default-resizable" id="window-1196" style="width: 316px; height: 195px; right: auto; left: 630px; top: 315px; z-index: 19001;" tabindex="-1">
<div class="x-window-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-window-header-default x-horizontal x-window-header-horizontal x-window-header-default-horizontal x-top x-window-header-top x-window-header-default-top x-docked-top x-window-header-docked-top x-window-header-default-docked-top" id="window-1196_header" style="right: auto; left: 0px; top: 0px; width: 316px;">
<div class="x-header-body x-window-header-body x-window-header-body-default x-window-header-body-horizontal x-window-header-body-default-horizontal x-window-header-body-top x-window-header-body-default-top x-window-header-body-docked-top x-window-header-body-default-docked-top x-box-layout-ct x-window-header-body-default-horizontal x-window-header-body-default-top x-window-header-body-default-docked-top" id="window-1196_header-body" style="width: 309px;">
<div class="x-box-inner" id="window-1196_header-innerCt" role="presentation" style="width: 309px; height: 15px;">
<div class="x-box-target" id="window-1196_header-targetEl" style="width: 309px;">
<div class="x-component x-header-text-container x-window-header-text-container x-window-header-text-container-default x-box-item x-component-default" id="window-1196_header_hd" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 288px;">
<span class="x-header-text x-window-header-text x-window-header-text-default" id="window-1196_header_hd-textEl"> </span>
</div>
<div class="x-tool x-box-item x-tool-default x-tool-after-title" id="tool-1203" style="width: 15px; height: 15px; right: auto; left: 294px; top: 0px; margin: 0px;"><img class="x-tool-img x-tool-close" id="tool-1203-toolEl" role="presentation" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>
</div>
</div>
</div>
</div>
<div class="x-window-body x-window-body-default x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable x-resizable x-window-body-resizable x-window-body-default-resizable" id="window-1196-body" style="overflow: auto; left: 0px; width: 316px; height: 165px; top: 30px;">
<span id="window-1196-outerCt" style="display:table;"></span>
<div class="" id="window-1196-innerCt" style="height: 100%; vertical-align: top; display: table-cell;">
<span id="window-1196-outerCt" style="display:table;"></span>
<div class="x-panel x-window-item x-panel-default" id="createCMDBPanel-1197" style="width: 316px; height: 165px;">
<span id="window-1196-outerCt" style="display:table;"></span>
<div 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" id="createCMDBPanel-1197-body" style="padding: 0px; left: 0px; top: 0px; width: 316px; height: 125px;">
<span id="window-1196-outerCt" style="display:table;"><span id="createCMDBPanel-1197-outerCt" style="display:table;"></span></span>
<div class="" id="createCMDBPanel-1197-innerCt" style="height: 100%; vertical-align: top; padding: 10px; display: table-cell;">
<span id="window-1196-outerCt" style="display:table;"></span>
<table cellpadding="0" class="x-field x-table-plain x-form-item x-form-type-text x-field-default x-anchor-form-item" id="textfield-1198" style="table-layout: auto;">
<tbody>
<tr class="x-form-item-input-row" id="textfield-1198-inputRow" role="presentation">
<td class="x-field-label-cell" id="textfield-1198-labelCell" role="presentation" style="" valign="top" width="105"><label class="x-form-item-label x-unselectable x-form-item-label-left" for="textfield-1198-inputEl" id="textfield-1198-labelEl" style="width:100px;margin-right:5px;">CMDB Name:</label></td>
<td class="x-form-item-body" colspan="2" id="textfield-1198-bodyEl" role="presentation"><input aria-invalid="false" autocomplete="off" class="x-form-field x-form-required-field x-form-text" data-errorqtip="" id="textfield-1198-inputEl" name="textfield-1198-inputEl" type="text" value="new CMDB"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In general the attribute values React puts are "semi-dynamic" (my term, and don't quote me on it :) - they are generated by the framework as it sees fit, and can change on slight source code change. This applies for the class and in your case for the id attribute - as you can see the number 1198 in it has no semantic meaning, it's just a counter.
Thus you'd better not use them in locators, as they won't be rigid - the value can easily change between builds without warning.
I would approach it with a different strategy; here is an xpath locator that works, breakdown of its structure follows:
//td[label[text()="CMDB Name:"]]/following-sibling::td/input[#type="text"]
It first selects a table cell that has as its child span with that text - the label the user sees in the UI for the input. Then it selects the very next cell (the following-sibling axis), and finally - the input element that is its child - your target.
In effect, this locator reads - "return the input that is next to the text 'CMDB Name:'"
I need to select a date say like Year as 1947, Month as Aug and Date like 15.
What are the methods and classes that I need to use? I tried using WebElement by xpath. I cant locate the year and month only date is located. Please suggest me the rigt way
This is HTML Page source for that particular element
<td>
<div>
<div class="dais_gwt_input_div" style="margin-left: 140px; margin-bottom: 0px; width: 175px; height: 24px;">
<input id="EMPLOYEE_New_DOB" class="dais_gwt_input_Field" type="text" style="border-style: none; padding: 2px 20px 2px 6px;" maxlength="10"/>
<div id="dais_gwt_fieldcontainer_left_right_top_bottom_label" class="default-label" style="margin-top: 3px; float: left; width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: -275px;">DOB</div>
<div id="undefined" class="dais_gwt_image_div" align="center" style="float: right; margin-top: -23px;">
<img id="undefined" class="applyclicks" align="middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABkUlEQVR42p2Ty07CUBCG+waSGHAnPIbII4hAYSFySaSWxMJClqxISIQIigKPIwkhUsJlSSAQsFx8BC5bfk9HhaJpQjrJpPlm2j//mTPloIlut4t0Or3HqVRKt68Gt9ls0Gg0UKvVUCy+wufzolqtol5/Z/wCl+uSet+861cqb5jPP8ElEvfwenlEIjfgeQ8cjnMIQoSS592w2880vOuHwyEEgwFwJycWtFotsiPLMmIxaWtPlusQRUHD+31RvAVntZ5uBZbLJbM1376wWq0Yz/7wri9Jd+BsNiuazSaMxD+Bfr9P88hmM8T5fJ7OrSgKJpMJG6iTaroCg8EAoVAQhcITcalUokHNZlNKv/+KaroCi8UCnU4Ho9GIeDweE6/Xa8p2u001XQH1abGYmYsAsXpdZvMxLZCaJtMRqwlGHKw0Dj70BYbDATuzOoNn4nL5dwYzTKcHzKDX68HjcSOTeSDO5XKMXT+3oMDpvGC1x30B7SIZ2gN1ldWzGYloVASXTCYRCFwjHo+R4mEp0cfqv/AFv/QghO2HDIwAAAAASUVORK5CYII=" style="cursor: pointer;"/>
</div>
</div>
</div>
</td>
All I need to know is how to locate and access the year and month I tried using arrow keys in it by using xpath and Action class but I cannot click every time and move forward and backward, same with the month. I dont have any idea about how to handle this. I have never faced this before.
The concept of frames is being used on a website I am tasked with testing. However, the frames do not use frame tags, one is for example a div that is filled by GET/POST. Selenium cannot access the element inside of the frame (ElementNotVisibleException) because it must first switch to the frame. But, I can't switch to the frame because it is not technically a frame in Selenium's eyes. How can I access the content of the frame without manipulating the DOM? (The point of testing is that we test what is there as an end user and don't change it). So, I cannot use JavaScript executor. I have tried using action building to click elements/move to the element, but it returns errors.
EDIT:
Here is the basic form of the html I'm trying to access. I cannot use selenium to access any elements inside el1. I need to select an option for el6.
<div id="el1" style="width: 960px; height: 230px; margin-bottom: 6px;">
<div style="width: 955px;padding: 5px 0px 0px 5px;">
<span>Text Here</span>
<form id="el2" action="pageName.jsp?action=blah" method="POST" style="height: 300px;" name="el2">
<div id="el3" style="width: 600px; margin: 20px 0px 0px 60px;">
<div id="el4" style="height: 20px;">
<div id="el5" style="height: 20px; padding-left: 40px;">
<div style="width: 400px;">
<span style="font-weight: bold;">More Text Here</span>
</div>
<div style="width: 400px;">
<select id="el6" onchange="javascriptfunction(this)" name="el6" style="width: 400px;">
<option selected="selected" value="">A Select Box Option</option>
<option value="NumberHere">More Options Populated By JSP</option>
</select>
</div>
</div>
</div>
</div>
<!--Some Unnecessary content here-->
</form>
</div>
</div>
Here is style calculation for el6. I have tried manually adjusting height with WebDriver in attempt to get rid of ElementNotVisibleException. This did not work.
font-family MS Shell Dlg
body Helvetica,Arial,Sans-Serif
div Arial,Helvetica,Geneva,sans-serif
body Arial,Helvetica,Geneva,sans-serif
font-size 13.3333px
div 14px
body 13px
color rgb(0, 0, 0)
#container #333
text-align start
#wrapper left
.bodyStyle center
width 400px
margin-top 0px
margin-right 0px
margin-bottom 0px
margin-left 0px
padding-top 0px
padding-right 0px
padding-bottom 0px
padding-left 0px
why can't you switch to any available iframe without specifying the ID or name.
you can do this just switch to iframe..
try this
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe")));
If you are getting ElementNotVisibleException,it means element is invisible at that time.You can use explicit wait to achieve this :
WebDriverWait wait = new WebDriverWait(driver,<Time>);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("el6")));
First,you calculate time which is taken by element to visible and replace with <Time>.
For more detail,you can [see][1].
[1]: http://docs.seleniumhq.org/docs/04_webdriver_advanced.jsp
I've spent two weeks to find any solution for this, but can't came across. If you float tables after each, there will be a one pixel gap in Microsoft Outlook 2007/2010, which uses the Microsoft Word 2007 HTML render engine:
I'd thank you any working solution – which is not to put the tables in separated <td>'s.
Here is the HTML code for reproduce it:
<html>
<head>
<title>Outlook 2007/2010 horizontal gap</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
</style>
</head>
<body bgcolor="#000000">
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
</body>
</html>
What I've tried so far:
display: inline-table; instead of align="left"
searched for other relevant mso- CSS attributes with no luck
removed whitespaces between <table> elements
border-collapse: collapse and border-spacing: 0
adding border: 1px solid red; will remove gap but increase the width of the tables
other display's, padding and margin
non related or deprecated html attributes (rules, frame, border, etc.) on <td> and/or <table>
Fun factor:
If you put these two tables into a table, the extra gap's width will increase to 2 pixels.
Here is an example of how to float tables. You need a combination of border="1" and mso-table css in there to get rid of the 1px gap. See example:
<table bgcolor="#454545" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="5%"></td><td align="center" width="95%">
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace: -1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 1
</td>
</tr>
</table>
</div>
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace:-1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 2
</td>
</tr>
</table>
</div>
</td></tr></table>
Try with table border="0" cellspacing="0" cellpadding="0" on each of the two table's. If i understand your issue correct this should solve it :)
We might be SOL here. I am also working on email formats compatible with Outlook 2007/10. If my readings are correct, Outlook 2007/10/13 do not support border-spacing for tables, which is probably what's giving you that spacing issue.
Refs:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Guide to CSS support in email | Campaign Monitor