this is frustrating the hell out of me.
I'm still new to ruby/watir webdriver and so learning as i go, so be gentle.
I'm using ruby v2 with watir webdriver in order to automate text entry into a ckeditor embedded in page. I've been rummaging around the web and read almost everything i can find on automating it but still getting no success on entering text.
The html around the ckeditor is;
<div class="cke_inner cke_reset" role="presentation">
<span id="cke_1_top" class="cke_top cke_reset_all" style="height: auto; -moz-user-select: none;" role="presentation">
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;">
<span id="cke_45" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" style="width: 100%; height: 100%;" aria-describedby="cke_45" title="Rich Text Editor,contentItemHTML" src="" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr" webdriver="true">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_blocks" contenteditable="true" spellcheck="false">
<p>
entering text here
<br type="_moz">
</p>
and the code I'm using is;
$browser.iframe(:class, "cke_wysiwyg_frame cke_reset").body(:class, "cke_editable cke_editable_themed cke_contents_ltr cke_show_blocks").send_keys("TEST")
I've tried with the send_keys 'Test'
This places the cursor in the correct area, but enters no text.
any help would be greatly appreciated.
I find that send_keys is finicky for rich text editors. For example, I have seen the code work correctly in Chrome, but not in Firefox. As well it is hard to control where send_keys inserts the text.
Assuming you are not trying to actually test the functionality of the CKEditor, you are better off using the suggestion from watir-webdriver.com, which is to directly set the html via javascript.
This is done by:
browser.execute_script("CKEDITOR.instances.editor1.setData('TEST');")
Where editor1 is the id of the CKEditor and TEST is the html that you want the editor to equal.
Here is a working example (using the CKEditor demo page):
browser = Watir::Browser.new
browser.goto "http://ckeditor.com/demo"
browser.execute_script("CKEDITOR.instances.editor1.setData('TEST');")
sleep(2) # So you can see the change
Related
I've seen this problem touched on in many questions but none have been specific enough to help me. So I hope it offends no one if I simplify it and ask again. Hope springs eternal!
Is it really IMPOSSIBLE to control the width of an image embeded in an email when Outlook renders it? I.e. control the width of an image for which the html code is
<img src="cid:seal">
I.e. when the html code expects an embedded image instead of one stored elsewhere.
[Note: "seal" is the content ID I assigned when creating the MimeBodyPart with the embedded image].
Details:
I use a Javamail application to send a multi-part email message. The body part is an html document. Another MimeBodyPart carries the image used in the html doc. I've simplified the html test to nothing more than a two column table with the left column for the image and the right column for text.
And absolutely NOTHING I have tried has been able to control the size of the image when opened in OUTLOOK.
The image is always what I assume must be some native size for the image ... which is too big ... so it forces the first cell to be more than 15% wide. Or if I give the cell a fixed width the image overflows the box, i.e. get's clipped.
I put the basic code stripped of all font styling colors etc. below.
I have tried every combination of using width attributes and css style properties on the img tag. I've wrapped the image in another table ... or wrapped it in a div block inside the main table cell ... and even wrapped it in a div block inside a table cell inside the parent table cell. And I've tried specifying widths in fixed pixels and %'s.
It would really be nice if we all knew for sure if this is simply IMPOSSIBLE with Outlook.
Or if it is possible possible, to publish sample code that works. [It's hugely attractive to have the email open its images immediately, and not rely on the reader downloading them.]
NOTE: I seem able to control width when I load the image from an outside source afterwards, i.e.
Thanks for any help.
<html>
<head>
<meta name="viewport" content="width=980, initial-scale=1">
<title>Test Email</title>
</head>
<body style="width:100%; border:0;margin:0;padding:0;">
<table align="center"
style="width:980px; border-collapse:collapse;
margin-left:auto; margin-right:auto;">
<tr style="border:0; margin:0; padding:0;">
<td style="width:15%; border:0; margin:0; padding:0;">
<img src="cid:seal"
style="width:6em; height:auto;">
</td>
<td style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
Some Titles and stuff
</td>
</tr>
<tr>
<td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
<p> 1st paragraph
....
<p> last paragraph
</td>
</tr>
</table>
With help from Eugene above, I discovered at least one good solution.
<img src="cid:seal" width="300" or "300px" of "15%"> DOES NOT WORK.
But when I ditched the quotes this worked
<img src="cid:seal" width=300 height=300>
It does of course mean setting width in % is still a problem since it requires quotes.
But I'll take what I can get. Email now pops open with logo without the user needing to download pictures. AND ... this css body selector also works rendering the background with an embedded image. [I stored the background image with a Content ID of"bkg".]
AGAIN ... unlike the img attribute src="cid:id" that uses quotes, url() requires the id w/o quotes.
<body style="background-image:url(cid:bkg);
background-repeat:repeat;
width:100%;
generic-family:Sans-serif;
font-family:Verdana;
border:0;margin:1em 0 1em 0;padding:0;">
Outlook uses Word as an email editor. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You can design the page in Word and then save the resulted document as a web page. Thus, you will find the required HTML markup to use.
I have multiple forms with tinyMCE textareas that saves content to the database in order to generate a PDF with the content from the database. The user can input text or images to the textarea.
Whenever the user center-align the image with TinyMCE, it doesn't show in the PDF. It doesn't give me any errors, it simply doesn't show. If I go back to the form and right-align the image, it shows again, but the users of the system required full control of the interface.
does anyone knows what could be causing this?
Notes:
I'm aware of this bug however none of the suggestions I found there fixes my issue.
I'm using Laravel-dompdf
This is a sample of the view that is being used by DOMPDF, the image is contained within product description.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{Lang::choice('page_elements/general.proposal', 2)}}</title>
<style type="text/css">
</style>
</head>
<body>
<div class="product_section">
<div class="text-block">{{($proposalProduct->description)}}</div>
</div>
</body>
</html>
This is a sample of what the product description (formatted by TinyMCE) is returning.
<p>This is a sample product, using images and tinyMCE.</p>
<p><img style="-webkit-user-select: none; margin-left: auto; margin-right: auto;" src="http://mywebsite.com/products/images/product1.png" alt="" /></p>
Thanks for the help.
I am currently using selenium webdriver 2.35 for firefox being programmed in ruby. I am having an issue where I can not get the webdriver to focus correctly on an input field element. By default, there is some gray text already populated in the field. When a user clicks on this field, that gray text is supposed to disappear and allow the user type into field.
Using the webdriver, I would send the click command to that element and it would click, but nothing would visually happen. I also checked to see the active element and in fact it is that field(after clicking on the element). (I used this to check: driver.switch_to.active_element)
Also, I would send keys to that field and it will show up gray either appended to the default text or by clearing that field and sending those keys
Methods that I used but did not work
1) driver.find_element(element).click
2) driver.action.move_to.element.click.perform
Does anyone have any suggestions? (I know that this may sound ambiguous but feel free to question me need any more information)
I am not sure if this helps or not but here is the html from before the click(also the same result after using the click function in selenium
This is the html before the click (and the result after using the selenium click function
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-empty-field" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
This html appears after is after the user manually clicks on the field.
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-focus" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
I also noticed that after the user manually clicks on the field, the selenium commands work correctly
I'm new to Watir. I have installed Watir 3.0.0. amd Ruby 1.9.3. I am writing scripts to automate a Web aplication. It has a forum in which a Rich Text Box is present to post comments. I cant find any properties like name and id for the Rich Text Box in the Script. How to automate it? I want to enter text in it and automate the Rich TextBox.
Please help me write my Watir Script.
<td>
<select>
<option value="Trebuchet MS,Verdana,Arial,Helvetica,sans-serif">
Trebuchet
<option value="arial,helvetica,sans-serif">
Text - Arial
<td>
<div class="space"/>
<td>
<select>
<option value="1">
Text - 1 (8 pt)
<option value="2">
Text - 2 (10 pt)
<td>
<div class="space"/>
<table border="0" cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td>
<div title="Justify Left" class="button">
<img style="width: 18px; height: 18px;" src="http://xxxxx.com/images/ed_align_left.gif" complete="complete"/>
<td>
<div title="Justify Center" class="button">
<img style="width: 18px; height: 18px;" src="http://xxxxxxxx.com/images/ed_align_center.gif" complete="complete"/>
<iframe class="iframe" src="http://xxxxxx.com/blank.html" style="width: 591px; height: 334px;">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<base href="http://xxxxxx.com/forum/"/>
<style type="text/css">CSS Stylesheet</style>
<body contentEditable="true">
<font size="2"/>
This is how it looks. Here's a part of code that Im trying to test. ContentEditable=true represents the textbox. How to script a test to edit the textbox using Ruby... ??? Help!!!
Thanks for the info Chuck...Please Help!!!
Is the rich text editor your own code or some third party library such as a Jquery control?
The reason I ask is that if it is not your own code, there is not a lot of value to testing someone elses code, especially if it's something you are paying for. You might be better off to just 'set' the contents of the editor to the text you need in order to test your application, and not spend a lot of energy testing someone elses code beyond making sure it has been properly configured (to enable/disable the desired functions)
It looks like your edit control is entirely within a frame which is likely what is giving you fits. You need to read about how to work with frames Start here
I came across this lightbox plugin and thought of implementing it in my project. I have an option of Exporting data in my application. When I click the export link, I want the light box to appear with some text and buttons like Export to excel,export to text file etc.
But will the light box plugin overlay only images? If not, how can I over text and div elements?
This is the export link:
<a class="button" id="export_entries">Export</a>
This is the div element that I want to appear in the lightbox.
<div id="lightboxContent">
<div class="info">
<h2>Export Options</h2>
<div>How would you like that?</div>
</div>
<div class="stuff">
<p class="center">
<a class="button" title="Excel Document" href="#">Excel(.xls)</a>
<a class="button" title="Tab Delimited" href="#">Text(.txt)</a>
</p>
</div>
EDIT 1
I tried another lightbox plugin called facebox, which had an option of loading a html file in the lightbox. But for me,the html file is loaded as a new page. Can anyone help me?
I've given the code below:
<script type="text/javascript" src="/FormBuilder/app/webroot/js/jquery.js"></script>
<script type="text/javascript" src="/FormBuilder/app/webroot/js/facebox/facebox.js"></script>
<link type="text/css" rel="Stylesheet" href="/FormBuilder/app/webroot/css/facebox/facebox.css" media="screen,projection" />
<a class="button" rel="facebox" id="export_entries" href="/lightbox.html" >Export</a>
You can adapt the lightbox to contain any HTML. All it does is blank out the background and put some HTML into a division in the foreground.
You might save some time by checking out Expose, which is part of the jQuery tools:
http://flowplayer.org/tools/demos/index.html
The LightBox plugin is used to overlay only images. So I went for Thickbox plugin which can be used to overlay images,text,html and Ajax content.