How to fake non-support of new web features for testing in modern browsers - testing

We are told to use progressive enhancement when building websites that will use modern features if available but still work if not.
However, I find it hard to test the fallback cases. Of course there should be some tests with some older browsers, but it is hard to target non-support of specific features. It is also nicer to use recent developer tools that are not available in legacy browsers.
Example: I use a flexbox layout with a float-based fallback. I would like to debug the fallback in chrome, but flexbox is already available there. I could also use IE 8 which does not support flexbox, but it also does not support many other features and the developer tools are not as nice to work with.
Is there something like "reverse polyfills" that remove support instead of adding it? What other solutions are available?

Related

Webkit Wrapper for Desktop Apps

I have a desktop app based on HTML/JS that needs WebKit to function at a reasonable speed. Normally, I would live with IE behaving badly, but its JS engine is just too slow.
I would normally go to Appcelerator for this, but it seems they have discontinued their desktop SDK and left it for the "community"...
This needs to function on Windows PCs, or I would just use Fluid (http://fluidapp.com)...
Is there a simple Webkit wrapper that I can use, or should I build one really quick in something like Qt. I haven't used Qt in a while, so I'd have to look at it again and make sure WebKit is implemented in it...
While it is somewhat node.js-oriented, AppJS may offer what you're looking for. If it doesn't already support other scripting languages, it might at least provide a good example to start from.
Update: in the time that's passed since my original answer, it seems node-webkit fills a similar role but has gathered and maintained more momentum than AppJS. It's a little more focused, in that it doesn't attempt to provide much additional "framework" on top of simply exposing the node.js API to the window's JS context.
There's also https://github.com/atom/atom-shell, which I just learned of and may be similar.
One other thing to note is that (presumably with either, but at least with node-webkit), you MUST be cautious of any XSS-like vulnerability in your app that an attacker could exploit to gain complete access to the user's native machine. So if you are simply needing to package an offline web app in a downloadable desktop distribution, you may wish to research more PhoneGap-like solutions (e.g. Mac OS X as PhoneGap platform) or a plain web view wrapper (like mentioned in the OP) that do not expose an entire OS-level native API — as node.js does — into the JavaScript environment.

Cross-Platform GUI development between wxPython and Mono

I've been thinking to give GUI development a try lately and am torn with the choice of between wxPython and Mono.
Judging from what I've seen out there, wxPython people seem to use the WebKit trick to produce nice (doesn't have to be beautiful) UI.
How hard is it to do the following in each of the platform:
1) Custom Control
2) Use HTML rendering
I don't quite understand how far the HTML rendering works via WebKit in wxPython (i.e.: does it support separate CSS/JS files? how's the JS support? do we need to write extra wxPython code to run the JS? how hard it is to integrate between JS events and wxPython widgets? what are the usual strategy of integrating WebKit with wxPython?)
Mind to share your thought on this subject? I specifically pick either wxPython or Mono, not Java Swing for no reason.
PS: I'm aware of certain limitation of cross-platform UI (as in: it won't be 100% native) and I could care less of such things.
wxPython has wxWebkit available via the new WebView widget, but WebKit is only available on Mac and Linux right now. WebView uses a different rendering engine on Windows called Trident from IE (see http://wxpython.org/CHANGES.html). So you'll want to keep that in mind.
Either way, we're talking about browser engines that display HTML, CSS, etc. They should, theoretically, display whatever those engines support. You'll have to look up their specifications to be sure and also make sure to check if the port supports everything. As I understand it, they should definitely support the usual HTML and CSS and I would assume normal javascript. If I were you, I'd just create a simple window in wxPython and then load the web page you've created and see how it works.
I don't know how the javascript communicates with wxPython or if it even does. You'll want to ask on their mailing list for that kind of information.

Testing a "Dojo" web application with Selenium

Has anyone done some extensive automation with Selenium and a Dojo-heavy web app? I'm looking for any issues or problem that you might have run into or issues related directly to the combination of Selenium and Dojo.
I've used Selenium extensively with a bunch of different web apps, including a few on Dojo. You should be fine. One practice I would recommend is to make sure all the components you'll be testing (both UI controls you'll be driving, as well as text components you'll be reading for testing) have ID tags set. Selenium has a bunch of elegant selectors to get at the elements you need, but selection by ID is still the best. The other methods can be more brittle.
I've had some challenging experiences with Selenium RC not being as compatible with my code as Selenium IDE, to the point that I stopped using Selenium RC. And in case you are not super familiar with Selenium, you should be aware that it doesn't natively support some (IMO) pretty fundamental features like flow control and includes; but there are user extensions to the framework that allow this. I'd also recommend taking a look at Watir which I now generally prefer over Selenium because it exposes the full power/flexibility of a first class language (Ruby).
I'm working on a Dojo-heavy app right now, and am making a number of tests with Selenium IDE. I've ran into a few issues with certain Dojo elements, such as drop down menus and tabbed components. I've learned to appreciate XPath, and have been experimenting with how clickAt and waitForElementPosition commands, which seem to help accommodate for some of Dojo's features.
Dojo specifics - very brief
The Dojo itself differs in some approaches from other heavy-DOM and extensively impressive frameworks (like ExtJS, jQuery, YUI).
The general Dojo specific it workaround the limitations by using Flash (YUI does as well) or Silverlight.
Here is a couple scenarious when Dojo can use Fash:
the browser is not HTML5 and javascript need local storage. Then Dojo will use "Flash Cookie" Flash Local Shared Objects (package dojox.storage)
need support of cross domain https calls.
The general tricks that can turn your testing into something difficult:
browser messages, like "do you wish to allow this site..."
nested frames can make the selection of the node difficult
javascript timeout/intervals they might work with different speed in Selenium then in real browser. Yes they can.
The biggest issue I encountered was the fact that dojo menus, and pop-up UI elements in general, are absolutely positioned as children of the body element and are not children of the element that creates them.
This can impact how you write Selenium CSS Selector and, in my case, made it a bit more challenging to automatically crop a screenshot that includes a menu and its dropdown.
Selenium should be fine with dojo because it's rendered in Firefox and not on it's own. Just make sure dojo is available when testing ( i.e. don't connect to google's cdn if your test environment doesn't have an internet connection ). But that's a problem you'd have with any external resource
I have no experience, but did see http://www.ibm.com/developerworks/opensource/library/os-webautoselenium/index.html discussing how to use Selenium with dojo
If you need to test in an SSL environment and you use Selenium RC's trustAllSslCertificates + proxy, you must make sure all of your JS files are hosted on the same domain. I've seen problems recently with using CDNs to load JS and image files when testing under recent Firefox versions and selenium rc

What language is used when developing apps for multiple platforms?

I just caught one of Google's commercials for Chrome where at the end they mention that it runs on Linux, Mac, and PC. So I started wondering how they are able to develop a program that can run on multiple platforms like that? I have experience with Java, and .Net but only on a windows machine. Java is by design portable, but I wouldn't think Google is using Java for something like Chrome where performance is such a concern.
I understand that each version is going to have some platform specific code, such as for the UI. But there must also be some central code that is reused across each platform. What language is this written in?
Here is an entire article about the development of Chrome. It's mostly written in C++.
Chrome is written in C++, so they will have a significant amount of platform-specific code for each OS. They most likely maintain a separate branch for each OS.
Any reasonably standardized and popular language will do, because the goal is to compile it on all platforms, not create one binary that will work on Windows, MacOSX, Linux, and z/OS. C and C++ are popular choices, because they'll work readily with pretty much anything. Java is a good choice, because it runs on pretty much everything. For applications with low performance requirements, Perl and Python are good.
The important point is to separate out what is platform-dependent from what isn't, since (except in the case of Java or scripting languages) it will probably be necessary to rewrite platform-specific stuff for each platform, and not necessarily in the same language. MacOSX is best programmed in Objective-C, and that's true for no other popular platform.
The programs are supposed to be portable in source level, not binary level. So you only need to compile it for different platforms, not necessary to make one universal binary. In fact, most languages are supported in all modern platforms including UNIX/Windows/Mac, so you can choose from almost all modern lanagues, which C/C++ is prefered by many people. BTW, C++ is the language of Chrome.
Scripting languages like Python/Perl are also good choices. One more thing, Java can be faster than you think - see Eclipse. Even without JNI Technology, Java is still good enough for most applications like JDownloader.
Google had to build different distributions for each OS (ie compiled for each platform as Francis's answer explains) - in fact the Mac OS version only recently became available - the Windows version has been around much longer.
Google Apps are 'thin applications' - the grunt-work is done on their servers.
The Apps are portable in the sense that the front-end is put together using HTML, CSS and Javascript - which are standard (in theory at least) across all browsers.
Google put a lot of effort into building Chrome's Javascript engine to be performant - to ensure any client-side logic is run quickly.

What is the most reliable way to determine the OS of a visitor to a web site?

What is the most reliable way to determine the OS of a visitor to a web site? All other things being equal I prefer an easier to integrate solution. I'm not attempting to gather analytics and I understand there is no completely reliable method. The purpose of this is to subtlely tailor the user experience in ways that do not affect the functionality of the site -- for instance, making a guess at which os version of a cross platform app the user would like to download (I won't hide the other selections, the one matching the user's OS will just become more prominent).
On the client side, you can use Javascript to try to detect it:
// This script sets OSName variable as follows:
// "Windows" for all versions of Windows
// "MacOS" for all versions of Macintosh OS
// "Linux" for all versions of Linux
// "UNIX" for all other UNIX flavors
// "Unknown OS" indicates failure to detect the OS
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
document.write('Your OS: '+OSName);
Sourced from here. Javascript methods are inherently unreliable however. Server side, you can examine some of the HTTP headers in the language of your choice, however, these can also be crafted and are unreliable as well.
In short, there's no 100% reliable method.
There is no reliable way to do it, and it's not only none of your business, it's also something your web site should pay no attention to.
If this was something your site was meant to know, then there would be a navigator.os property. Note there is not.
Here are examples of Perl code that does OS detection server-side from useragent strings:
HTTP::BrowserDetect or HTML::ParseBrowser for desktop operating systems
Mobile::UserAgent for legacy mobile platforms
What is the most reliable way to determine the OS of a visitor to a web site? Ask them on a survey... all else is a crap shoot. Using the UserAgent string you may be able to divine the OS, but as numerous articles will attest - there is no really reliable way to tell.