Ruby Script to Edit a RichText Editor - ruby

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

Related

Outlook responsive Image in table not working / outside table is working

I'm working in a responsive newsletter and I'm nearly finished. In the last two weeks I read about the issues and things to mess when coding a responsive newsletter.
My newsletter is ready to use and responsive but now I face some problem that I cant solve since two days.
I got an image that is responsive in Outlook:
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
and a table that is also responsive in Outlook:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
MASS-TEXT
</td>
</tr>
</table>
so far so good - it works great. BUT if I put the image in the table it isn't responsive anymore:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
</td>
</tr>
Anybody know a solution for this or know why it isn't working because it works as single elements?
I tried a few things like give the rows and columns a percentage width and so on... nothing working. I just want a responsive table with a responsive image inside working for outlook... someone experience with this?
Dont you think that the max-width should be static and width should be relative i.e. max-width:800px and width:96%;
The below code works well in the standard outlook version. Outlook responsive Image in table working.
<table width="600" >
<tr><td>
<img src="add image link"/>
</tr></td>
</table>

entering text into CKEditor with watir webdriver

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

Embedding Images in Blackberry Emails

Is it possible to have an image automatically embedded in an email, which when opened on a Blackberry will show by default without the user having to open it seperately?
I'm constructing a HTML email eshot that will be opened on Blackberry devices with the below HTML:
<html>
<style>
body {background-color: Black; color: #fff;}
</style>
<body>
<table align="center" cellpadding="4" cellspacing="4">
<tr>
<td><img src="cid:Eshot.jpg" /></td>
</tr>
</table>
</body>
</html>
This works when viewed Outlook but I'm not sure whether I can get it to render on Blackberry devices without it effectlvely being an attachment. I'm aware that Blackberry devices handle HTML emails in there own unique way, but the client it is being produced for has apparently had emails in the past where it has been embedded but I'm not sure what I can do if anything to force this.
I had a similar problem. You can find here how I solved it and try if it fits your needs. Shortly, you need to convert the image in a bytestream and include it in your html body as:
... <img src="data:image/bmp;base64,gzfddr56utggtlytlgg....jigkgfjytdjyr"></img> ...
where:
gzfddr56utggtlytlgg....jigkgfjytdjyr
is the encoded image bytestream.

Using Razor "RenderPartial" and "RenderBody", the body is rendered on top

I am developing a site with Header, Main Menu, Body and Footer sections.
I am using a web page base layout _Layout.cshtml where I use the RenderPartial() method to render the Header, Main Menu and Footer. For the body, I am using the RenderBody() method.
In _Layout.cshtml I have the following code:
<body style="margin: 0">
<form name="FormStart" method="post" action="Start.aspx" id="FormStart">
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<td valign="top" width="1px"></td>
<td valign="top" align="center" width="972" bgcolor="#FFFFFF">
<table id="Table1" cellspacing="0" cellpadding="0" width="972" border="0" bordercolor="yellow">
<!-- HEADER -->
#{Html.RenderPartial("_Header");}
<!-- MAIN MENU -->
#{Html.RenderPartial("_Menu");}
<!-- CONTENT -->
#RenderBody()
</table>
<br />
<!-- FOOTER -->
#{Html.RenderPartial("_Footer");}
</td>
</tr>
</table>
</form>
</body>
On the other hand, I created a very simple view with the following code
#{
ViewBag.Title = "Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>You just clicked </h3><h1>NATURAL ALOE SECTION</h1>
The thing is, that the content of this simple view is displayed at the very top of the page, whereas the rest is on the bottom. Instead of displaying HEADER-MAINMENU-my site-FOOTER it displays it in the order of my site-HEADER-MAINMENU-FOOTER.
I am quite new with MVC all around; I have been reading here about the possibility of using RenderSection instead of RenderPartial in my main Layout site, but could this be the reason while it is displaying this way? Probably I am way off base, any advice is much appreciated.
Thanks in advance.
This might be happening because you render the header, menu and body inside a <table>. At least the body seems to be missing the row and cell tags (<tr><td>...</td></tr>). Therefore there are no rows and cells in your table which can lead to all sorts of rendering problems.
It would probably help if you didn't render into a table and use CSS for layout purposes instead.
This looks to be nothing to do with the MVC side of what you are doing - that looks perfectly fine.
The issue will be with your HTML. I would suggest having a look at the site using one of the browser developer tools (e.g. in Chrome or IE open your site and press F12) - you can use the features of these to examine how the visual elements on your page relate to the HTML. These tools are invaluable as an MVC programmer.
Using tables to control the layout of a web-page is discouraged in favour of using css for layout. You can find some basic css layout templates via Google to get started.

TCPDF + pChart wont show images

I'm triying to insert a image on the pdf generated by the script.
I have put a image that is on the folder and it shows correctly, but the generated one no.
In other section of the site, I use the same function to generate and show the image and it shows correctly, only when I put on the pdf gets a blank gap.
$html1 = '
<p align="left" style="color:#434343;">
<span align="justify" style="color:#fe5a1d; font-size:35px;">3.3.- Comparativa Evaluación Tu Total – Evaluación media Total</span>
</p>
<p align="justify" style="color:#434343; font-size:34px;">
<img src="'.DOMINIO.'intranet/graph.php?ide='.$evaluacion->getId().'&tipo=3" border="0" width="700" height="230"/>
</p>
<p align="left" style="color:#434343;">
<span style="color:#fe5a1d; font-weight:bold;">4.- Detalle por competencias</span>
</p>
<p align="justify" style="color:#434343; font-size:34px;">
<img src="'.DOMINIO.'intranet/graph.php?ide='.$evaluacion->getId().'&tipo=4" border="0" width="700" height="230"/><br />
</p>
This is the code that makes a little paragraph that is shown on the PDF, the text works nice, it's only the image not shown.
Thanks for all.
Its most likely a problem with your PHP setup, specifically make sure you have support for GD image installed and enabled.
Now its solved, what i've done is render the images on the HardDisk and load it on the pdf

Resources