Lately me and my QA buddies are trying to find a way to make Selenium IDE (v2.2 with FireFox v22) type a text into NicEdit's textarea, but without success.
We took a look on the internet for the past few days, and so far we discovered, among other things, that NiceEdit is not an iFrame (I think many here already know that).
We're not using code nor any other webdrive, just Selenium IDE, which makes things a bit harder, I guess.
We've tried xpath, class, id etc... no success.
But in these cases, the Find button in Selenium highlights the area.
So, is there a way to make Selenium IDE type in the NiceEdit's textarea without code?
Here's the html code of NicEdit's textarea provided by FireBug.
<div contenteditable="true" class="span12 " data-bind="html: Conteudo" id="conteudo" style="background-color: rgb(255, 255, 255);">
</div>
And the rest before it:
<div id="editorPanel" style="width: 100%;" unselectable="on">
<div class=" nicEdit-panelContain" style="overflow: hidden; width: 100%; border: 1px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239);" unselectable="on">
<div class=" nicEdit-panel" style="margin: 0px 2px 2px; overflow: hidden;" unselectable="on">
</div>
</div>
<div id="conteudo" class="span12" contenteditable="true" data-bind="html: Conteudo">
</div>
EDIT: I've found out that NicEdit turns the textarea into a div, so Selenium is not able to focus on the area.
Anyone has any sugestions about how can I make Selenium put some text on NicEdit?
Thanks!
<tr>
<td>storeEval</td>
<td>this.browserbot.findElement("id=someID").innerHTML='fillerText'</td>
<td></td>
</tr>
Does the above work for you?
Related
I have a HTML email designed in tables to support older email clients. I am using sendgrid so the image value is displayed using an {{#each}}
This works fine on most newer clients and browsers but on Mac Mail and Outlook up to 2016 the main image does not show the first time you view the email. If you view another email in your inbox and go back to that one it magically appears. Also once its cached it will appear every time.
This is how I am displaying the image.
<td class="img-container">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
Im adding this here because I couldnt find any way to solve this by searching. I hope this helps you. To solve this weird bug you need to reserve the space in your HTML for the img. You can do that with a width and height style on the td
<td class="img-container" style="width: 100%; height: 380px;">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
I'm creating an email signature template for our team. The email signature has a profile image of a team member above a table row with a dark background; however, Gmail is creating a space between bottom of the image and the section underneath. I've tried virtually everything that I could find on stackoverflow, email monks, etc.
The table's cellspacing, cellpadding, and border have been set to 0. display:block hasn't worked, setting the font-size to less than 2px hasn't either.
Any help would be appreciated.
<tr>
<td width="202" rowspan="3" valign="bottom" style="vertical-align: bottom;">
<div valign="bottom">
<img
src="IMAGEURL.png"
align="absbottom"
width="202"
height="242"
border="0"
style="display: block; line-height: 0px; font-size: 0px; border: 0px; padding: 0px; vertical-align: bottom !important;"
/>
</div>
</td>
</tr>
Can't replicate unfortunately but what happens when you remove the div?
There really isn't any need for the div in there to be honest, you may as well remove it anyway and the align="bottom" should only be set on the table cell as the image will inherit that property by default.
To be honest, it would be good if you could post your entire code you're using as it'll give us context of what you're working with. Even if it's with placeholder content like you already have done with the image path.
I'm using ZKOSS 6.5.3 framework with Eclipse and Maven.
In my app, I've written a simple zul file as follows:
index.zul
<?page title="Test Exam" contentType="text/html;charset=UTF-8"?>
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<window id="test_exam" title="Test Exam"
apply="zkoss.controller.LoginComposer"
style="padding: 0px; margin: 0px; border:1px solid red; height:500px; width:900px; display:block">
<borderlayout id="main">
<north>
<vlayout style="padding:5px">
<label id="testExamTitle" style="display:block">Exam Title</label>
<label id="testExamDesc" style="display:block">Exam Description</label>
<textbox style="border: 1px solid blue; display: inline-block;" tabindex="1" type="text" width="100px" height="100px"></textbox>
</vlayout>
</north>
</borderlayout>
</window>
</zk>
I've deployed this app on Tomcat 7(Eclipse). When I run the app & try to access this zul file in Chrome, instead of being rendered as a page with 2 Labels and 1 Textbox, it is being loaded as the HTML file itself as if I'm just opening the zul file in browser without deploying on server. It works perfectly on Firefox.
I've visited this link whereas the similar problem is raised, but that also does not contain any solution.
Can anyone help me solve this issue?
In the following URl, the bottom right corner text is not aligned to the right property in iphone safari browser.
link
But it is aligned properly in safari browsers in pc, even in other browsers (e.g. ie, firefox) are also ok.
The code is listed below:
<div id="footer">
<br />
<div style="float: left; letter-spacing: 3px; font-family: PMingLiU; font-size:18px;">
請親臨本店選購 香港德輔道西94號
</div>
<div style="float: right; letter-spacing: 3px; font-family: PMingLiU; font-size:18px;">現購物滿港幣3800元可享專人送貨服務 查詢電話:25483136</div>
<br /><br />
<div style="float: right; letter-spacing: 2px; font-family: PMingLiU; font-size:16px;">只限於香港九龍港鑯沿線</div>
<br /><br /><br /><br /><br /><br />
Do you have any idea on it?
Thanks.
I think this might be a font issue with Mobile Safari. The numbers on Mobile Safari come out looking Times-ish whereas on normal Safari they look Helvetica-ish and the spacing is a little different in the numbers. A bit of experimentation yields a somewhat odd workaround, wrapping the numbers in a <span> moves them to the right side (but moves the extra space to the right of the colon):
<div style="float: right; letter-spacing: 3px; font-family: PMingLiU; font-size:18px;">現購物滿港幣3800元可享專人送貨服務 查詢電話:<span>25483136</span></div>
And an example: http://jsfiddle.net/ambiguous/AydWp/4/embedded/result/
Not really a solution but possibly an improvement.
I have created GWT web application with standard Tree component from GWT. By default:
Tree
Implemented as a DIV containing nested TreeItems. The style name gwt-Tree applies to the DIV and the style overflow defaults to auto.
<div class="gwt-Tree" style="overflow: auto;">
<div style="position: relative; margin-left: 16;" (handle)>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Where is the place in GWT source code where I can change Tree rendering on my own design?
You should use CSS to style GWT components.
Here's a simple example using a UIBinder template:
<ui:style>
.myTree {
background-color: red;
}
</ui:style>
<g:HTMLPanel>
<g:Tree styleName="{style.myTree}" />
</g:HTMLPanel>
See this developer's guide also.