Selenium RC (Python) only sends text to one tinymce control on page - javascript

I'm writing some automated test scripts using Python (2.7) with Selenium RC (2.42.1) for a page that contains multiple tinymce controls (2 to be precise). The code that I've been using up to date looks like the following:
sel.focus( field_values[ id_value ] + "_ifr" )
sel.get_eval( "window.parent.tinyMCE.activeEditor.setContent('<p>" +
field_values[ test_data ] + "</p>');" )
To date, this code has worked fine for me, but after a recent build, I have been having issues when there are multiple copies of the tinymce control on the page. The setContent() function seems to always want to send the text to the second tinymce control, regardless of which ID I set the focus() to. And as a wonderful caveat, if I shrink my window frame so only the first tinymce control is visible on the screen, then only the first tinymce control gets sent any text.
My going theory right now is that the .activeEditor is not pointing to the right tinymce control when I set my content. It seems to always point to the last visible tinymce that it sees on the screen so I'm trying to find a way to force the focus to the appropriate tinymce control.
My question is, is there a better way to force the focus to the correct tinymce control using Python Selenium? I've tried using sel.click("tinymce") and sel.type_keys("tinymce","") after setting the focus(), but they don't seem to work.
I confirmed with the development team that no changes were made to the tinymce control, and I'm using the same Selenium RC version as always.
And I don't know if this will help, but there has been a push to move our automated testing over to a C# framework. We had the same issue as with the Python code, but we came up with a solution for that:
driver.SwitchTo().Frame(iWeb);
// This was added to ensure the tinymce control edit area has focus. This is necessary for pages that have multiple tinymce controls.
IWebElement body = driver.FindElement( By.TagName( "body" ) );
body.SendKeys( "" );
driver.Execute("window.parent.tinyMCE.activeEditor.setContent('" + Test_Data + "');");
driver.SwitchTo().DefaultContent();
I want to be able to do the same thing, but with the Python code.

I finally found the reason why I could no longer handle multiple instances of TinyMCE controls on the same page. I recently had to rebuild my machine due to hardware problems, and in the process, I updated my Firefox browser to the latest ESR release (24.7.0). I rolled back to v24.2.0 with no issues. It seems there must have been a security update that was causing the unusual behaviour with my automated code. I'm still researching what updates were made and if it's actually possible to write to multiple TinyMCE's with the latest ESR version of Firefox.

Related

"Stop running this script" Confirmation Box - How can I get more details about the script?

I'm looking into turning my AngularJS application to be compatible with IE8 and I'm getting this popup confirmation error:
Now, I want to get more details about this - like what file & line caused this to invoke.
I've google it and I understand that it appears in a different occasion based on which browser is running.
I'd like to get more details about the script that caused this popup to invoke (specifically in IE8).
IE8 makes this warning based on the number of statements and not based on the time the scripts are taking to run. This warning in my opinion is inaccurate.
By default threshold limit for the time-out dialog box is 5,000,000 statements.
Microsoft released a patch to correct this: http://support.microsoft.com/kb/175500
Please note that microsoft also indicates that which is the registry entry to increase this to any level if necessary:
Using a Registry Editor such as Regedt32.exe, open this key:
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Styles
Note If the Styles key is not present, create a new key that is called Styles.
Create a new DWORD value called "MaxScriptStatements" under this key, and set the value to the desired number of script statements.
If you are not sure about which value you need to set this to, you can set it to a DWORD value of 0xFFFFFFFF to avoid the dialog box.
When I faced this same problem with Angular/IE8 what I ended up doing was to reducing the size of the objects and "re-architecting" the app along with applying the patch above. I think this is part of the limitation of supporting IE8.
Our application was using Kendo, JQuery and Angular and we find out that the error could occur at any 'given' time in any 'given' library part of our re-architecting was using lighter UI-Frameworks as well and more custom specific controls only when it was strictly necessary.
Hope it helps and sorry to hear that you are also supporting IE8 :D

How do I modify a browser tab's text styling with Javascript?

I am trying to write a bit of code in a script that changes the color and/or text formatting of a browser's tab--any tab, not just the currently selected one--when a given process completes, so that I can tell, without tabbing back to said tab, if the process is finished or not.
What I'm looking for is the specific bit of code or call to make that accesses the tab's style (or whatever); something where I could go
tabWhereScriptFinishedExecution.style.color("#77ffa5");
tabWhereScriptFinishedExecution.style.fontWeight("bold");
or something. Tab Mix Plus and its different effects on the tabs reflecting various states and whatnot were what got me thinking about this.
I'm using Firefox, and working this into a Greasemonkey script, so I'd like to avoid using JQuery if possible.
As far as I know it is not possible to do the way you are trying to achieve it. You cannot style the tab text. It is part of the browser. Tab Mix Plus you are referring to is a plug in for Firefox.

Update the CSS of a Website without refreshing the Page

I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.
So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?
Here you are: http://cssrefresh.frebsite.nl/
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
Just insert the javascript file and it works!
But note: It only works when you have the files on a server!
Edit: LiveStyle
If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.
If you want more information about this awesome plugin, please read the Post by Smashing Magazine
With jQuery you can create a function that reloads external stylesheets.
/**
* Forces a reload of all stylesheets by appending a unique query string
* to each stylesheet URL.
*/
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
Have a look at http://livereload.com/.
It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.
I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.
Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.
Some examples (feel free to suggest some others):
Chrome:
tin.cr (includes automatic reload, and can persist in-browser changes to source files)
CSS Refresh
Firefox:
CSS Reloaded
CSS Refresh
Here is my little Project. Please give it a try
CSS Auto reload on Github
Yes you can manipulate the CSS via jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
You could also use the toggleClass method.
http://api.jquery.com/toggleClass/
http://jqueryui.com/demos/switchClass/
Firebug for FireFox.
It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.
Advantage over JS hacks is that you can't copy this accidentally to your production instance.
You are looking for Live Reload:
It's available as a browser extension and easy to implement
http://livereload.com/
The new open-source code editor, brackets, has a Live Development feature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!
Firebug for Firefox is my prefered method:
https://addons.mozilla.org/de/firefox/addon/firebug/
You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.
If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.
Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.
This might help -> chaicode
Its a live CSS, Javascript and HTML editor that is opensource and a wip.
github

Mark a position in eclipse text editor?

I have two questions:
While editing a source file, it's very convenient to be able to label the current position of cursor and then jump to it later by somehow calling that label. I VIM, there is the marking notion, but I'm not aware of such possibility in Eclipse text editor.
Is there any way in Eclipse to add a portion of the code to the outline window, such that you can easily jump to that part when you click on it? I know that for java source-code, almost all variables and functions are shown there, but what if I have a html/javascript code, in which I'm using jquery functions, and the outline doesn't show these functions.
Any help is appreciated!
I dont have any direct answers for your question.
May be you are looking for the following eclipse features.
Eclipse supports bookmarks, you may use that feature. Also CTRL + Q will go back to the last edited location.
You may be able to get this using the Mylyn, which is packaged along with eclipse by default. Implements the notion of a Task focussed IDE ( RECOMMENDED)

How to programmatically set the value of a WebKit password text field?

Update: this question is bunk. Move along, nothing to see here. You can set the value of the password text field from either JS or ObjC. I was wrong.
I have a WebKit-based Cocoa app which loads an HTML document containing an HTML form in a WebView. The HTML form contains a password text field like:
<form name="foo">
<input type="password" name="bar">
</form>
I'd like to set the value of this text field programmatically (from Objective-C if possible, but I'll do whatever works).
I believe WebKit (and every other modern browser) implements a JavaScript security feature which prevents JS scripts from setting this value programmatically.
Unfortunately, it seems that the same security restriction applies to Objective-C, as I can't seem to set the value using ObjC either. While the JS restriction is reasonable, the ObjC seems a bit unreasonable.
Is there any way to programmatically set the value of this field (short of bundling a custom WebKit in my app that has been altered to allow this)? I'm open to any suggestion.
Here's what I've tried in ObjC:
DOMHTMLDocument *doc = (DOMHTMLDocument *)[webView mainFrameDocument];
DOMHTMLFormElement *formEl = (DOMHTMLFormElement *)[[doc forms] namedItem:#"foo"];
DOMHTMLInputElement *inputEl = (DOMHTMLInputElement *)[[formEl elements] namedItem:#"bar"];
[inputEl setValue:#"baz"];
this has no effect.
This should definitely work without having to jump through any hoops to do so. I just wrote a quick test app that loaded http://mail.google.com/ and signed into it fine with the following code on SnowLeopard and Leopard:
- (void)webView:(WebView *)sender didFinishLoadForFrame:(WebFrame *)frame
{
if (![[sender mainFrame] isEqual:frame])
return;
DOMHTMLFormElement *form = (DOMHTMLFormElement *)[[frame DOMDocument] getElementById:#"gaia_loginform"];
DOMHTMLInputElement *username = (DOMHTMLInputElement *)[[form elements] namedItem:#"Email"];
[username setValue:#"myemailacct"];
DOMHTMLInputElement *password = (DOMHTMLInputElement *)[[form elements] namedItem:#"Passwd"];
[password setValue:#"omghi"];
[form submit];
}
I also have very similar code at work whose only job is to sign into website and its been working fine on Tiger for a year. In that case I do everything, including creating the WebView via code. I would also be very surprised if Safari's autofill didn't use very similar code to this.
That said, I would make sure your app isn't doing anything crazy to the WebView. Do you do any other modification the DOM anywhere else? Try doing this in a sample app like I did and see if it works there.
Is the HTML you're loading your own or on a remote server? Some websites include Javascript that clears out form fields on load or a second or two after to prevent autofill. Perhaps you're running into that?
If all else fails, make sure nothing is being logged to the WebView's console. You can see that by opening up the web inspector or temporarily implementing the private WebUIDelegate method:
- (void)webView:(WebView *)webView addMessageToConsole:(NSDictionary *)message;
The restriction is probably because the DOM bridge hooks directly into the same code as the javascript runtime, so you need to bypass any javascript/DOM bridge.
Maybe you could set the focus on the field (if the bridge allows just that) and send keyboard events to the WebView or the Document view.
Alternatively, since those fields are native OS X components you could potentially directly talk to these (and the WebKit source code should help you figure how to get to them).
Sorry, both solutions are a little involved and I have no idea if that works! Maybe the webkitdev mailing list would have an answer, or you could try to ask the 1Password developer ;-)
how about trying to set the field as a normal text field then programmatically changing it to a password field all while the display of the field is :none then change it back to visible.
I would use -stringByEvaluatingJavaScriptFromString:.
Here's what I used (I added an 'id' attribute to the field to make it easier to grab):
[_webView stringByEvaluatingJavaScriptFromString: #"document.getElementById(\"bar\").value = \"hello\""];

Categories