We Keep Coding

Tools and techniques for UX-centric Regression testing of a web application?

The application that I'm currently working on is a simple 3-tier web application (whatever simple means :) However, the application is very UX/UI intensive i.e. the user-interface forms the crux of application. Every structural change to the page or refactoring javascript/jquery/backbone code, we need to ensure that the UI is behaving as expected.
For example, if div's are disappearing on deleting the object, or if items are being successful 'posted' and displayed in a different div etc.
I'm relatively new to the domain of UX/UI-based testing and not sure how to attack this problem. As of now it's quite a manual overhead to ensure it looks and works right. We do have 'one layer below' tests where we send HTTP messages and all seems to work fine with the return codes etc. But UI focused testing is what we lack.
I've heard about Selenium, Jasmine and a few Javascript frameworks but am not sure if they serve my needs. As of now the solution I see is to custom code javascript tests that would 'autorun' these tests from a browser and check if things are happening the way they should (probably with a human just 'staring' at the screen :) This itself will be quite a task and I thought of asking the community on suggestions before we reinvent the wheel.
Question: What tools/techniques are best suited for this type of a
job?
PS: It's a Java/Restlet based web-application

Selenium can definitely do what you need if you're looking to build 'real' automation tests, meaning code-based testing in something like Java, .NET or any of the other supported 'server-side' languages.
This would be far more likely to help detect regression than javascript-based tests where you have sometimes have limited ability to properly replicate user-interactions if it wasn't designed to allow it. Some things you would find are nearly impossible to test with just javascript.
Its worth the effort and Selenium is supported very well across many languages. Its essentially the industry standard and you'll find lots of documentation and helpful frameworks to get you started.

Does ActionScript support using JavaScript libraries?

I realize a JavaScript library like jQuery that is specific to the HTML / DOM wouldn't work nor make sense in a Flash ActionScript application. But what about other JavaScript libraries? I was reading that ActionScript is a superset of JavaScript / ECMAScript which is what got me wondering.
If it wouldn't use JavaScript libraries "out of the box" could a JavaScript library be adapted relatively easily? Also, does ActionScript support XMLHttpRequest or have a rough equivalent?

The syntax is similar, so you may be able to compile some code snippets. JavaScript looks more like the old Actionscript 2 though.
It's not only jQuery, but most JavaScript libraries are used to interact with the user interface or doing some communication things in the background. If they weren't, you could probably replace them with a server side library for the same job.
Many APIs, like the ones used for input and output are very different. If you are thinking of a copy&paste approach to convert a library, you would need to recreate a lot of those APIs for it to work. For example, a library to draw something on a canvas: You would either need to recreate the canvas API to draw the canvas instructions in flash - or create a wrapper to make flash call the original API to draw it on a real canvas. Alternatively rewrite all those parts, which are likely to found almost everywhere in the library.
That leaves us with libraries that strictly use non-js specific stuff. Maybe encoding/decoding libraries or algorithm and math heavy libraries. Those libraries may can be converted more easily. It would be quite a lot of work to refactor them into maintainable code though (in the OOP based Actionscript 3 sense). Apart from some less changes in the syntax, it probably requires almost the same amount of work to port the library to any other language. Also, chances are, that those generic libraries already exist for Actionscript.

This is a very old question but I thought to give an up to date answer.
Adobe ceased updates to its flash browser plugin as of January 12, 2021.
There are now some libraries and/or browser plugins being developed to continue flash support.
One that has the option of loading a JavaScript library from a HTML script src tag is Ruffle. As of this date it support 70% ActionScript-1/2 and 5% ActionScript-3.
The developers claim they plan for full support of AS1, AS2 & AS3.
I have tested it myself and found it to work quite well for many SWF files containing AS-1/2. The only thing required is to adjust your server software (ie. Apache, IIS, etc.) to allow wasm file support.
Use the link titled "Self Hosted" to download the necessary files that you must host.
ref. https://ruffle.rs/#releases

How to add jQuery to a framework without break it

We have a framework based in C# + XSLT + javascript, that is used as a base for the projects of the company.
The company has announced that in a few days I will be the responsable of this framework. The objectives are:
Repair bugs
Add new features
The problem is this framework has a lot of bugs, there's not documentation (none, zero), contains bad practices of code, and some antipatterns. (Also doesn't use any naming conventions).
One of the first things I thought was starting for the javascript part, and add jQuery library for use the functions of jQuery for DOM access, XML manipulation and AJAX calls and other stuff, because some of the actuals are buggy.
I'm afraid to be the "so-clever-guy-that-refactors-and-breaks-the-project" and i have to be so careful, because this framework is used in a lot of projects, and breaking the framework would be "so much visible".
How can start to adapt the code to works with jQuery?

The problem you have is not really specific to jQuery. When making changes to a working system, some application of good coding practices is required:
Create Development and Test environments separate to your live environment
Create test scripts for parts of your system that you know to work correctly at present (consider Selenium for automated browser-side testing)
Work steadily, making individual changes and testing continuously (look into TDD)
Use version control software (e.g. Subversion) so you can roll back if necessary.

What JavaScript UI testing framework should I use for a simple HTML5 + jQuery app?

I'm about to write a simple HTML5 + JavaScript (jQuery) app in my spare time in order to keep up with the latest web technologies (at work it's more advanced C# backend stuff).
I'd like to develop in the same fashion that I've done for the last ten years or so, namely TDD style.
Being new to the TDD/BDD/AcceptanceTDD world in HTML/JavaScript, my question is: is there a great framework or the like for writing test against a web page in a browser (out-of-the-box support for many browsers being a definitive plus)?
The reason I'd like to use JavaScript is two-fold. 1. I'd like to learn more JavaScript, and 2. I'd like to use the same language(s) for the tests as I do for development.
Otherwise, I could simply use my C# skills and use Selenium, WatiN, or a similar framework.
I've found Jasmine, QUnit, and a homegrown solution using jQuery at MSDN, but don't get a feel for the flow nor complexity, so recommendations and first hand experiences are more than welcome.

JS Test Driver is the framework recommended by the Javascript TDD book from O'Reilly that I'm reading right now. I haven't actually had a chance to play with it much yet, but:
A dude who wrote a book on JS testing recommends it
It has a very nice feature set (automated test running across multiple browsers being key)
It comes from Google (love 'em or hate 'em, they have a lot of smart JS people working there)
So at the very least it's worth checking out I think.

At this point, I'd recommend Jasmine. I've used it successfully on a few projects. I haven't really run up against too many frustrating situations where I just couldn't get something done (unlike other tools). It can be set up in different configurations, depending on your preference-- it can be as simple as opening a page in a browser, or it can be "served" dynamically.
There are dozens of tools out there in general usage-- and so far-- no clear winner. I've tried a quite a few of them, and-- as John Resig points out-- creating a simple testing framework isn't that complicated. But adding some tools to make it convenient is important. Jasmine is the most complete one I've used, but it's not bloated.
Important considerations:
set up: don't adopt a tool that doesn't work easily out of the box
style: use a tool that makes sense to you in the context of the rest of your testing tools. For example, if you use BDD tools, find a BDD Javascript framework. This is probably the biggest variance in the frameworks-- might as well pick one that has a syntax you like.
cross-browser: the tests should work across browsers
automation: you should be able to script the running of the tests in one or multiple browsers
testing time-based code-- if you Javascript has behavior tied to the clock (as in animations), having a testing framework the facilitates this is nice
mocking: jasmine has a nice mocking support that really helps
You really do not need to use Selenium for simple unit tests-- it complicates the configuration and is a more difficult programming model than a simple unit testing framework.

I've struggled with this a lot. I think Selenium is your best bet especially since it sounds like you've used it before. The other stuff for JS is mostly unit testing.
Not to diminish machineghost's answer, JS Test Driver rocks for unit testing.

I ended up using QUnit since I found it very simple to just insert the PUT (Page Under Test) in an <iframe>, and use jQuery to access it from the unit tests.
That way I don't need any other external dependencies other than the browser itself (the logic resides 100% in the client) and any text editor.

Turboframework uses javascript, jasmine, selenium and runs with node. You can literally create a test project and run web automated tests in less than 10 minutes. To avoid repeating the documentation that is already available, here's the link to a quick start guide:
https://turboframework.org/en/blog/2021-03-03/automate-your-web-application-tests-in-less-than-ten-minutes

Should I use ScriptSharp

I am developing my first ASP.NET MVC application and I beleive that Script# can help me a lot. But it cannot find the resource necessary to support my development.
I could not find The codeplex site;
There is only one manual, which is very good, but it is not enough;
I could find very few tutorials;
I know that Script# was used to develop ASP.NET MVC scripts and that the source of MVC distributes the library.
But it seems that it is used only internally in Microsoft.
Where can I find other resources???
Do you really think that Script# will be continued and new versions will be deployed and it should be used by third-party projetcs ???
Thanks in advance

Don't be afraid of Javascript, it's a beautiful and powerful language. And with frameworks like jQuery, Prototype and Dojo, DOM manipulation and AJAX are greatly simplified and cross-browser issues are mostly history.
About Script#, I agree with this answer by mcintyre321. Last release over a year ago + closed source = no go for me.
UPDATE Jan/2010: there have been new Script# releases since the original writing of this answer. It's still closed-source but the author mentions open sourcing it after 1.0
UPDATE May 2011: Script# is now open source.

In short, my answer is: if you like powerful IDEs that run on Windows, OOD and C#, use ScriptSharp. It is more maintainable and structured, and demonstrably stable enough to use on serious projects. It can also be easily extended, as illustrated below and by other projects.
Since this is yet another Google indexed thread where people refer to Script# and jQuery as mutually exclusive I just wanted to point out some people are merging these two worlds, and in my case unleashing a lot of power by doing so. I'm offering a completely free and reusable library to access jQuery 1.4 from Script# projects, and full source code for the solution that generates it (almost exclusively from jQuery's own API documentation file):
http://www.christophercrooker.com/visual-studio-2010-rc-custom-tool-for-code-generation-and-jquery14-with-intellisense-for-scriptsharp

IMHO Script# fits well for large projects only, with really "rich" web client. Participating in such kind of project, I could only say that Script# helped us much. josephhemingway's remark about strongly typed is 100% true for such case. Also it allowed us to introduce new .NET developers without any JS background quickly. Assuming Nikhil Kothari's plans to open-source it in the summer 2008, we even decompiled (don't tell anybody! it's illegal) it and introduced generics, operators overloads, various bug fixes, etc.
BUT. Then Script# support faded away. Project on CodePlex with discussions and issue tracking was closed (interesting that parts of framework were published there shortly before). No updates, no future plans, no explanations. After such thing I'd consider Script# only after it goes open source to give the community ability to support it. E.g. on CodePlex.

I use Script#, I think it is great. You can use it with any framework, jQuery, dojo whatever, you would however have to wrap the framework, this could be a big job...
It's only benefit as I see it is that it allows you to develop javascript in a strongly typed environment. I think this is a HUGE benefit. I refuse to develop in weakly typed languages as maintenance is a nightmare.
If however you like to work in a weakly typed language then you wont need Script#.

Short answer NO. Wait for TypeScript.
Script# is really cool, but MS decided not to support it at all. The reason for that turns out to be that they were working on a better version of that - TypeScript (http://www.typescriptlang.org/)
It adds support for everything you need in a static language (intellisense, type checking, interfaces, classes etc.), but still looks very much like JS, and more importantly - confirms to the upcoming ECMA Script 6 standard. (unlike Script# or google's Dart)

Like the others have I would recommend some JavaScript (namely jQuery). Should you wish to continue with Script#, Nikhil Kothari's blog may be a good resource for you. http://www.nikhilk.net/ScriptSharpIntro.aspx -- That being said, I think you'll find that you are more productive with jQuery. There is a large database of community written plugins so you wouldn't necessarily have to reinvent the wheel on everything you want to do. jQuery plugins instead of ASP.NET Controls

Wow Val you got generics to work in
it, I'm impressed, was it hard?
Generics support would be great, so
would method and operator overloading.
josephhemingway
The whole point is that ScriptSharp's parser supports full C# 2.0 syntax. The only thing needed is to generate the proper JS. Not much work, considering JS dynamic nature. Generics would act as Java-style ones, i.e. no generation for each closed type argument set, just one class.
Are you sure that it is illegal to
decompile it, I will have to have a
look to see if it is the terms of use.
josephhemingway
Yep, it's illegal. EULA showed in setup clearly mentions that.

A release went out today, so it is good to see that it is still active.
Regardless of the previous lack of updates and that it not been open sourced I would still use it over plain js. You can stop using Script# at any time and more forward with the 'compiled' js if you don't like it.
I agree with you Val though that it really only fits large js based projects. I don't think you would get much benefit out of using it to perform basic page functionality like validate form input etc. It probably wouldn't be worth setting it up.
If however you are heavily using javascript and need to replicate OOP then I think it is a must. Things like refactoring becomes so easy, with plain js I would never refactor because it was just too hard to implement, over time my code became a mess.
Wow Val you got generics to work in it, I'm impressed, was it hard? Generics support would be great, so would method and operator overloading. Are you sure that it is illegal to decompile it, I will have to have a look to see if it is the terms of use.

The other advantage of using ScriptSharp that no one has mentioned is that if you need to interact with C# (using AJAX/REST/SOAP) you can use the same class definitions in both places and be sure that you have the interface defined properly, because it's the same source file! I have tried to use logic in shared source files with minimal success due to the way ScriptSharp's corelib is not 100% compatible with the C# corelib. But it works great for data file definitions.

I am using jQuery. It is really good. But I beleive that It is more confortable to me to work with C#. Even if it is a subset.

Also I would like to add that you certainly should use ScripSharp when you are planning to develop multiplatform projects. For example, at present time I write my image processing library code for .NET, JavaScript (ScriptSharp), Android (Mono) platforms on C#. Also I am planning to port my code on iOS (Mono) and Windows Phone in the future. And I think it's great code reusing and developer time minimization!