<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Adam Christian &#187; Firefox</title>
	<atom:link href="http://www.adamchristian.com/archives/category/firefox/feed" rel="self" type="application/rss+xml" />
	<link>http://www.adamchristian.com</link>
	<description></description>
	<lastBuildDate>Fri, 18 May 2012 16:19:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Considering in-house web automation?</title>
		<link>http://www.adamchristian.com/archives/358</link>
		<comments>http://www.adamchristian.com/archives/358#comments</comments>
		<pubDate>Tue, 02 Mar 2010 06:38:06 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Automation]]></category>
		<category><![CDATA[Continuous Integration]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Hudson]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[Review]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Build]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[Testing]]></category>
		<category><![CDATA[WatiN]]></category>
		<category><![CDATA[Watir]]></category>
		<category><![CDATA[Windmill]]></category>
		<category><![CDATA[windows]]></category>

		<guid isPermaLink="false">http://adamchristian.com/?p=358</guid>
		<description><![CDATA[Recently I have had numerous conversations with people at various tiers of companies all over the place who are toying with the idea of building their own test automation and continuous integration infrastructure. Since I have spent a considerable amount of time dealing with such undertakings I decided that it might be worth the time [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I have had numerous conversations with people at various tiers of companies all over the place who are toying with the idea of building their own test automation and continuous integration infrastructure. Since I have spent a considerable amount of time dealing with such undertakings I decided that it might be worth the time to brain dump some of the issues you may want to consider before you dive in.</p>
<h2>Choosing Tools</h2>
<hr /><strong>Boxes, VM&#8217;s or Cloud?</strong></p>
<p>A common first reaction is to take a couple of those old boxes sitting around to run the first &#8220;couple&#8221; tests you have. In some cases, this is the perfect solution. That is if you have a small application that rarely changes and only needs a daily test run (on one operating system and it&#8217;s available browsers). In my experience you can reasonably run one Windows VM without lagging the host machine unusable, which gives you two concurrent browser test jobs without worrying about process conflicts. Do remember that to do this correctly, you really want a machine dedicated to your CI system (which I will talk more about below).</p>
<p>VM&#8217;s are a great solution, however they require significant hardware overhead, continuous attention and licensing costs. Depending on the VM solution you choose you may also wind up dealing with the dreaded <a href="http://software.intel.com/en-us/blogs/2009/06/25/virtualization-and-performance-vm-time-drift/">VM Time Drift</a> causing problems with JavaScript and failing tests that aren&#8217;t actually failing.</p>
<p>&#8220;The Cloud&#8221;, is the 2009-2010 buzz word that makes all technology sound better, and in a lot of ways COULD be the ideal solution for test automation. You get the benefits of paying for only the cycles you use, having someone else manage the infrastructure and avoid those pesky licensing costs. However in <a href="http://adamchristian.com/archives/269">my experience </a> the setup is painful, the solutions (EC2, etc.) are slow and lacking some of the features to really do test automation well. For example, if you want to run your own CI instance and run your tests on demand in the cloud you will run into some pretty painful engineering problems. It&#8217;s not easy to instruct the &#8220;cloud&#8221; service to fire up a Windows VM and then have that VM connect to your CI instance and become an available slave. It&#8217;s doable with Linux, but last I checked &#8211; the features to do something similar with Windows simply weren&#8217;t there. Also do you really want to wait sometimes up to 15 minutes (also my experience with EC2) for the machines to come up before you can even start running your tests?</p>
<p><strong>What CI System?</strong></p>
<p>The point of this article is not to recommend solutions, it is to encourage questions. However, outlining all of the possible CI systems would take forever so I will simply say that I wound up using <a href="http://hudson-ci.org/">Hudson</a>. The reasoning includes a very open and functional Open Source community, with smart contributors willing to take a few minutes to respond and help me out. I also found it possible (not simplistic) to build plugins to customize the things that I needed changed. Many people out there swear by <a href="http://cruisecontrol.sourceforge.net/">Cruise Control</a>, or <a href="http://buildbot.net/trac">Build Bot</a> and I would highly encourage you to do some research and pick the solution that you feel will allow you to be the most productive. For example if you plan to use Windmill and EC2, you may want to do some reading about the <a href="http://weblogs.java.net/blog/2009/05/18/hudson-ec2-plugin">Amazon EC2</a> and <a href="http://github.com/admc/HudsonWindmillPlugin/">Windmill plugins</a> available for Hudson and see what comparable tools are available.</p>
<p><strong>Which test framework?</strong></p>
<p>Some of you may know that I hold a mild bias when it comes to this question, but over the last year and a half I have ventured out into the land of testing frameworks and am able to see the values held by the other projects. For example, if you don&#8217;t ever need to deal with JavaScript in your application (or have browser specific functionality) &#8212; I suggest you use a tool that doesn&#8217;t require a real browser (like <a href="http://twill.idyll.org/">Twill</a>). Tests will run faster, they will be more stable and can be run without access to your OS&#8217;s graphics layer.</p>
<p>When it comes to browser based web testing tools I really think you need to pick the one that fits your needs the best. A great example of this was in my needs to automate functionality contained in iframes being served over HTTPS from a different domain, the only solution (after weeks of trial and error) turned out to be WatiN. Of course, writing and building tests in C#.net wasn&#8217;t going to be an easy sell so <a href="http://github.com/rtyler/IronWatin">IronWatin</a> was <a href="http://unethicalblogger.com/node/231">invented</a> as a means to write <a href="http://watin.sourceforge.net/">WatiN</a> tests in Python.</p>
<p><a href="http://watir.com/">Watir</a> has captured a lot of the <a href="http://www.ruby-lang.org/">Ruby</a> community and has recently been moving towards consolidating the separated browser  projects into one, which will significantly improve the ease of use.</p>
<p><a href="http://getwindmill.com/">Windmill</a> has a dedicated community, focuses on dynamic JavaScript applications, boasts lots of features and goes for an ease out of the box type of experience.. at least that&#8217;s what I would like to think! Please feel free to check out the destination site or <a href="http://wiki.github.com/windmill/windmill/">Github wiki</a> for more information</p>
<p><a href="http://seleniumhq.org/">Selenium</a> has a thriving community, lots of available consulting support, integrates well into a Java environment and offers the <a href="http://selenium-grid.seleniumhq.org/">Grid project</a>. You can also avoid all of the work involved in running your own system by writing your tests in Selenium and then offloading them to a company like <a href="http://saucelabs.com/">Sauce Labs</a> if you are willing to pay for it.</p>
<p><strong>What do we do about Flash/AS3 automation?</strong></p>
<p>After unsuccessfully trying out <a href="http://code.google.com/p/flexmonkey/">FlexMonkey</a> and <a href="http://asunit.org/">AsUnit</a> (don&#8217;t take my word for it), <a href="http://fleegix.org/">Matthew Eernisse</a> sat down and wrote an AS3 test controller that works the way the rest of test automation works in the browser, it&#8217;s part of the Windmill codebase (codenamed <a href="http://github.com/windmill/windmill/tree/master/flash/">FlashMill</a>). There are two ways to run the tests, one is to hand FlashMill your tests already <a href="http://wiki.github.com/windmill/windmill/actionscript-tests">written in AS3</a> and the other is to write them in your favorite tool (or raw JavaScript) and have them call into the FlashMill API. Windmill currently has full IDE/UI integration in master to be released soon, the integration code is simple and can be <a href="http://github.com/windmill/windmill/blob/master/windmill/html/js/controller/flash.js">viewed here</a> (best doco at the moment until I write a better one).</p>
<h2>Workload</h2>
<hr /><strong>How much work goes into maintenance and software upgrades?</strong></p>
<p>Depending on the machine setup you are going with, this will vary. Obviously if you have a box and a VM on it you can manually go through the process of upgrading the browsers on each, installing patches and security fixes for the OS etc. But if you went with the VM solution, you need to come up with a way to deploy updates to all the machines in your pool. An Open Source solution that came up near the top of my search is <a href="http://wpkg.org/">WPKG</a>, but like the rest of the tools on this page &#8211; there are many solutions and you will want to do your research. Some of the maintenance you will be dealing with can be done as a system job, or run by your CI system. A good example of this is to remove data, test files, source repositories etc. that accumulate on your test running machines.After a while, these files in combination with temporary internet files from the browsers and system tmp files start to slow things down.</p>
<p>This piece is very important to take into consideration from the beginning, because once you have 15 VM&#8217;s running tests &#8212; doing anything manually becomes a major chore. You also need to be cognizant of that fact that if you chose the cloud testing solution you will be managing your own test running images used to boot the VM&#8217;s. Every time you want to make updates or changes to that image, you get to go through the whole process of baking it and uploading it to the cloud hosting service. In my experience, this process is NOT enjoyable or quick.. so be prepared to invest some serious time.</p>
<p><strong>What is the strategy for scaling and expanding?</strong></p>
<p>Clearly this will be dictated by the rest of decisions you made, but I think when you get to this point, the idea of buying and manually setting up more and more physical boxes starts to break down. Buying more and more machines to sit there running tests simply seems like a bad use of resources (and desk space). VM&#8217;s allow you to quickly replicate images and expand your arsenal as long as the host machine has the hardware resources to power it without negatively effecting test run times on all the others. There are also solutions out there that allow you to boot and shutdown VM&#8217;s on the fly, which provides some interesting possibilities in juggling system resources.</p>
<p>I have found that since Windows is the common platform that can run all the browsers I care about, having a large pool of identical VM&#8217;s running all the time is an easy way to queue up 100&#8242;s of tests and get results in a reasonable amount of time. I do think that this is the aspect that cloud services start to become more appealing. The idea of spinning up more and more virtual machines in the cloud (with essentially endless capacity) makes the idea of scaling those tests considerably less terrifying. If you can get over the generally slow spin up times, and have come up with a strategy of dynamically harnessing and adding those machines to the pool &#8211; you may have it made!</p>
<p><strong>What format/language is best for our tests?</strong></p>
<p>At this point in web testing you simply need to decide what you care the most about doing. Is it manipulating the page? Or is it interacting with a database?, or a little of both? If you can get away with writing your tests fully in JavaScript, I would recommend it. At least in Windmill the JavaScript tests run exponentially faster than the Python or Ruby tests do. However the libraries for communicating with databases, email, system services etc, may make Python, Java, C#, etc your ideal solution. Each of the tools has their own ways of doing things, and to come up with the ideal language really depends upon your system, what your test developers are comfortable with, and what your application platform looks like.</p>
<p><strong>What operating systems and browsers do we need?</strong></p>
<p>The answer to this question should come from the metrics of your user base, and will also help you narrow down a testing framework and your test machines. Some of the available frameworks simply won&#8217;t run on Linux, or support IE6. Are all your users using Google Chrome? Then you should probably make sure the test framework you use has a Chrome launcher. Historically I have concentrated about 90% of the available VM resources on the most popular platform (usually Windows), with the most popular browsers (Firefox latest release, IE 7 or 8 depending on the users, Safari Windows latest release, and Chrome). This gives me a pool of work horse machines that can crank out tests representing the majority. The other 10% would be divided into the higher percentage minorities which probably includes a MacOSX slave running FF and Safari and a Linux machine running FF and Konqueror.</p>
<h2>Methodology</h2>
<hr /><strong>Can we support both functional and unit tests?</strong></p>
<p>I have found that having your own test infrastructure really makes this one easier. Since your resources will probably be on the same network as your codebase, you can easily access and run unit tests.. however as soon as you start sending your tests off to the cloud you are dealing with some security/privacy issues and engineering challenges. If inorder to unit test your code you need the entirety of your code base available, sending a copy of it off to your image on the cloud for every test (job, run or even change set) over and over could become a major strain on your system and simply sounds like a bad idea. If you are counting on unit tests you will at least want a machine on your network available as a slave from the CI system for those jobs.</p>
<p><strong>How do we report results, and stay tuned into failures?</strong></p>
<p>Most CI solutions have many ways they can be configured to alert you of a failure, from email, irc, jabber to a phone call you can usually find some solution that will get your attention. At this point in time the norm appears to be jUnit compatible results in XML. I&#8217;m not a huge fan, but the available tools for parsing and aggregating jUnit into something useful is very appealing. If you are okay with a true/false, that will always work out of the box, but you will need to be prepared to put in a little extra effort in both your test development and test job setup to generate the jUnit report files.</p>
<p><strong>What role does automation need to play in our process?</strong></p>
<p>For maximal results you need to make the leap where QA and Development both understand that a failing job in the CI system is a show stopper and must be investigated immediately. This way people honor the continual nature of continuous integration. It&#8217;s job is to catch problems shortly after they are broken, point you directly at them, and continue failing until you have solved the issue or fixed the test. If this isn&#8217;t the process you want, having continuous integration may not be the solution you are looking for.</p>
<p>Another effective strategy I have seen is to base release viability on the status of your CI system. Don&#8217;t let the product go out the door until the &#8216;thoroughly defined&#8217; suite of functional and unit tests running in continuous integration are all running and passing. It is easy to push off the process of updating failing tests until &#8220;later&#8221;, but everyone is busy, and later is usually never.</p>
<p><strong>What part of our application should we automate?</strong></p>
<p>This really should be computed by time and resources, as much as I would like to say &#8220;everything&#8221; I am well aware of it&#8217;s low probability. Pick your application flows that make you money, or really mean a lot to your users likely experience. Ensure that your application loads, they can take the happy path, give you some money and then leave. At least this way you can sleep at night knowing that, they may not be able to change their profile information but they can still pay your salary.</p>
<h2>Conclusion</h2>
<hr />I hope that I sufficiently communicated my point and passed on some useful and informative tidbits. Setting up automation infrastructure that has any chance of actually doing it&#8217;s job is a major investment of resources and should be well planned based on individualized needs. I hope this saves someone some time and energy.<br />
<br />Best of luck, and happy testing.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adamchristian.com/archives/358/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>MozMill 1.1 UI Overview</title>
		<link>http://www.adamchristian.com/archives/185</link>
		<comments>http://www.adamchristian.com/archives/185#comments</comments>
		<pubDate>Mon, 09 Mar 2009 18:31:29 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Automation]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Mozmill]]></category>
		<category><![CDATA[Testing]]></category>
		<category><![CDATA[XUL]]></category>

		<guid isPermaLink="false">http://adamchristian.com/?p=185</guid>
		<description><![CDATA[During the Open Design session at Mozilla with Aza we were informed that we could load a HTML file with a Chrome URL, allowing me to rebuild the MozMill UI a bit more like a web page instead of using the XUL constructs that I had been struggling with. Granted it feels a lot more [...]]]></description>
			<content:encoded><![CDATA[<p>During the Open Design session at Mozilla with Aza we were informed that we could load a HTML file with a Chrome URL, allowing me to rebuild the MozMill UI a bit more like a web page instead of using the XUL constructs that I had been struggling with. Granted it feels a lot more like a web page than it does a desktop application, but the speed that I can build new UI features by using libraries like JQuery UI have made it worth it.</p>
<p>The combination of writing content style HTML, and the good advice we received have come together into what I feel is a pretty usable user interface. Granted this is the first revision and will probably continually be refined to become even more user friendly, but from 1.0 to 1.1 it is a vast improvement.</p>
<p><img style="position:relative;float:right" title="MozMill Editor" src="http://www.adamchristian.com/wp-content/uploads/2009/03/picture-2.png" alt="MozMill Editor" width="368" height="510" /></p>
<p><strong>Improved Editor</strong></p>
<p>The first major improvement is the implementation of a full featured code editor named <a href="http://www.cdolivet.net/editarea/">EditArea</a>. </p>
<p>We have been keeping our eye on <a href="https://bespin.mozilla.com/">Bespin</a>, which we will look more into integrating when it is a bit more modular. </p>
<p>For the meantime EditArea does a great job, and was *relatively* painless to integrate.</p>
<p>Some of the features include:</p>
<ul>
<li>Multiple file editing</li>
<li>Syntax hilighting</li>
<li>Full Screen mode</li>
<li>Adjustable font properties</li>
<li>Jump to line numbers</li>
<li>Search and replace</li>
<li>Automatic tabulation</li>
<li>Toggle hi-lighting</li>
<li>Toggle edit modes</li>
</ul>
<p><a href="http://www.cdolivet.net/editarea/editarea/docs/javascript_functions.html">EditArea</a> implements execCommand similar to the implementation in <a href="http://www.mozilla.org/editor/midas-spec.html">Midas</a>.</p>
<div style="clear:both"></div>
<p><strong>Reorganized Menu&#8217;s</strong></p>
<p>Part of the move from XUL involved no longer relying on the toolbox, so we have reorganized the menu&#8217;s into dialog&#8217;s (don&#8217;t worry most functions have a keyboard shortcut if you are one of those people that doesn&#8217;t want to deal with that extra click). </p>
<p>This cleanly displays all the available options, and doesn&#8217;t clutter up the main UI. This also provides space to easily add new features that fall into these logical spaces in the future.</p>
<p><img style="float:right;position:relative" title="Test Dialog" src="http://www.adamchristian.com/wp-content/uploads/2009/03/picture-5-300x140.png" alt="Test Dialog" width="300" height="140" /></p>
<p><img src="http://www.adamchristian.com/wp-content/uploads/2009/03/picture-6-300x140.png" alt="File Dialog" title="File Dialog" width="300" height="140" style="float:right;position:relative" /></p>
<p><img src="http://www.adamchristian.com/wp-content/uploads/2009/03/picture-7-300x197.png" alt="Options Dialog" title="Options Dialog" width="300" height="197" style="float:right;position:relative;" /></p>
<div style="clear:both"></div>
<p><strong>Improved Inspector</strong><br />
<img src="http://www.adamchristian.com/wp-content/uploads/2009/03/picture-8-274x300.png" alt="Inspector" title="Inspector" width="274" height="300" class="alignright size-medium wp-image-197" /></p>
<p>There was a lot of frustration when it came to getting the results from the inspector into the editor, some of this had to do with the non editable default nature of the elements we were using to draw them out in XUL, but the integration of the feature into the IDE became very messy and confusing.</p>
<p>This creates an obvious separation between the rest of the UI and the inspector feature and puts helper features out in front of you to simplify the process by dumping to the clipboard and then moving you to a focused editor window.</p>
<div style="clear:both"></div>
<p><strong>Improved Output</strong><br />
<img src="http://www.adamchristian.com/wp-content/uploads/2009/03/picture-31.png" alt="Output" title="Output" width="368" height="510" class="alignright size-full wp-image-202" /></p>
<p>The output UI has been completely revamped to give you the most important information quickly, but allow you to navigate down an expandable tree to explore the output of the exception.</p>
<p>All of the information in the output divs can be easily selected and copied to stick in bugs etc, but also saves you a trip to the error console as it should encompass all of the information being thrown in the error object, serialized and organized into a more readable format.</p>
<p>Thanks to JQuery UI&#8217;s information and error boxes I was able to tweak the CSS to make some relatively attractive, but more importantly, informative UI that should quickly give you the status of your test run.</p>
<div style="clear:both"></div>
<p><strong>More Information</strong></p>
<ul>
<li><a href="http://code.google.com/p/mozmill/">MozMill Google Code Project</a></li>
<li><a href="http://www.mikealrogers.com/archives/471">Mikeal Rogers Release Blog Post</a></li>
<li><a href="http://mozmill.googlecode.com/files/mozmill-1.1.xpi">Google Code XPI Download</a></li>
<li><a href="http://quality.mozilla.org/mozmill-docs">QMO Documentation</a></li>
<li><a href="http://pypi.python.org/pypi/mozmill">MozMill on PyPi</a></li>
</ul>
<p>
Thanks everyone who logged bugs!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adamchristian.com/archives/185/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Micro-Bookmarking with MyTabs</title>
		<link>http://www.adamchristian.com/archives/147</link>
		<comments>http://www.adamchristian.com/archives/147#comments</comments>
		<pubDate>Mon, 23 Feb 2009 21:18:36 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Addons]]></category>
		<category><![CDATA[Mozmill]]></category>

		<guid isPermaLink="false">http://adamchristian.com/?p=147</guid>
		<description><![CDATA[A few weeks ago I realized that every time I boot my laptop, one of the first things I do is to open Firefox, and immediately load about 7 web sites as tabs. Some of them requiring user interaction to navigate to the desired state. I didn&#8217;t realize that this was actually a phenomenon called [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-156" style="float:right" title="MyTabs" src="http://www.adamchristian.com/wp-content/uploads/2009/02/mytabs.png" alt="MyTabs" width="88" height="51" />A few weeks ago I realized that every time I boot my laptop, one of the first things I do is to open Firefox, and immediately load about 7 web sites as tabs. Some of them requiring user interaction to navigate to the desired state. I didn&#8217;t realize that this was actually a phenomenon called &#8220;micro-bookmarking&#8221;, and that I may not be the only person who has this routine.</p>
<p>I don&#8217;t necessarily want to bookmark these sites, and this process of opening them is somehow part of my routine, however spending this kind of time every time I want to get to this state is just silly. Part of the ritual is to go through each of the open tabs, read the most recent updates and then close the tab, repeating this whole process many times a day.</p>
<p>At this point you should be starting to get the jist, to automate this whole process I created a Firefox Extension called <a href="http://wiki.github.com/admc/mytabs">MyTabs</a>. The UI and use case is simple, but some of the tools I built in make it potentially very powerful.</p>
<p><a href="mytabs">MyTabs</a> has the <a href="http://code.google.com/p/mozmill/wiki/ControllerAPI">MozMill Controller</a> built in, and is automatically setup in the tabs content window scope, allowing you to <a href="http://wiki.github.com/admc/mytabs/tab-scripting">write and attach scripts to each tab to be executed &#8216;onload&#8217;</a>. Thus automating the need to ever manually login to your web applications again.<br />
<br/><br />
<strong><a href="http://wiki.github.com/admc/mytabs/tab-scripting">Example script</a> for logging into <a href="http://www.facebook.com">Facebook</a>:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Lookup the three elements I want to interact with</span>
<span style="color: #003366; font-weight: bold;">var</span> email <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> elementslib.<span style="color: #660066;">ID</span><span style="color: #009900;">&#40;</span>doc<span style="color: #339933;">,</span> <span style="color: #3366CC;">'email'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> pass <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> elementslib.<span style="color: #660066;">ID</span><span style="color: #009900;">&#40;</span>doc<span style="color: #339933;">,</span> <span style="color: #3366CC;">'pass'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> login <span style="color: #339933;">=</span> doc.<span style="color: #660066;">getElementsByClassName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'UILinkButton_A'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//Controller expects elementslib objects</span>
<span style="color: #003366; font-weight: bold;">var</span> elibLogin <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> elementslib.<span style="color: #660066;">Elem</span><span style="color: #009900;">&#40;</span>login<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//Tell the controller to type the credentials</span>
tab.<span style="color: #660066;">type</span><span style="color: #009900;">&#40;</span>email<span style="color: #339933;">,</span> <span style="color: #3366CC;">'my_facebook_account@address.com'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
tab.<span style="color: #660066;">type</span><span style="color: #009900;">&#40;</span>pass<span style="color: #339933;">,</span> <span style="color: #3366CC;">'my_password'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//Click the login button</span>
tab.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span>elibLogin<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>This is all possible by a really slick snipped of code I found on <a href="https://developer.mozilla.org/en/Code_snippets/Tabbed_browser">MDC</a>:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> newTabBrowser <span style="color: #339933;">=</span> gBrowser.<span style="color: #660066;">getBrowserForTab</span><span style="color: #009900;">&#40;</span>gBrowser.<span style="color: #660066;">addTab</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;http://www.google.com/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
newTabBrowser.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;load&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> newTabBrowser.<span style="color: #660066;">contentDocument</span>.<span style="color: #660066;">body</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Stuff&quot;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><br/><strong>Security/Preferences</strong></p>
<p>For the sake of security I made it so that you can only attach scripts, not edit them so that you friends can&#8217;t go and view your script to get those plain text passwords. All the tab data is stored in the prefManager so that it is available across sessions. However if someone knew enough to pick apart the source, install a trusted JS Shell and manually access the prefManager you may be in trouble&#8230; so be careful about super sensitive information especially on a shared machine.</p>
<p>Using <a href="http://ui.jquery.com">jQuery UI</a> I was able to make the UI relatively attractive, intuitive and possibly skinnable in the future (if you want to do this yourself, grab the source swap out the jQuery UI theme CSS directory and boom you have yourself  new look.)</p>
<p><br/><strong>Some Screenshots</strong></p>
<p><img class="alignnone size-full wp-image-148" title="Welcome" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_1.png" alt="Welcome" width="592" height="410" /><br />
<img class="alignnone size-full wp-image-149" title="Tab Overview" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_2.png" alt="Tab Overview" width="581" height="403" /><img class="alignnone size-full wp-image-150" title="Adding new Tabs" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_3.png" alt="Adding new Tabs" width="581" height="403" /><img class="alignnone size-full wp-image-151" title="Tab Scripting" src="http://www.adamchristian.com/wp-content/uploads/2009/02/picture_4.png" alt="Tab Scripting" width="581" height="403" /></p>
<p>The source is fully available on <a href="http://www.github.com">GitHub</a>, and the <a href="http://cloud.github.com/downloads/admc/mytabs/mytabs-03.xpi">XPI</a> is available on <a href="http://addons.mozilla.org">Mozilla Add-ons</a>.</p>
<ul>
<li><a href="http://github.com/admc/mytabs/tree/master">MyTabs on GitHub</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/10720/">MyTabs on Mozilla Add-ons</a></li>
</ul>
<p>Remember that I am currently on bug fix release 0.3, but please let me know if you run into any problems!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adamchristian.com/archives/147/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>XUSH (.01), you know it&#8217;s fun to say.</title>
		<link>http://www.adamchristian.com/archives/121</link>
		<comments>http://www.adamchristian.com/archives/121#comments</comments>
		<pubDate>Wed, 28 Jan 2009 18:57:49 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Extension]]></category>
		<category><![CDATA[Mozmill]]></category>
		<category><![CDATA[Shell]]></category>
		<category><![CDATA[Venkman]]></category>
		<category><![CDATA[XPCOM]]></category>
		<category><![CDATA[XUL]]></category>

		<guid isPermaLink="false">http://adamchristian.com/?p=121</guid>
		<description><![CDATA[Over the past 8 months I have been neck deep in XUL and XPCOM and with Venkman being as unintuitive as it is I have badly needed a shell with access to the trusted space in the browser. I also had a couple more requirements, which were that it was super easy to get at [...]]]></description>
			<content:encoded><![CDATA[<p>Over the past 8 months I have been neck deep in <a href="http://www.mozilla.org/projects/xul/">XUL</a> and <a href="http://www.mozilla.org/projects/xpcom/">XPCOM</a> and with <a href="https://addons.mozilla.org/en-US/firefox/addon/216">Venkman</a> being as unintuitive as it is I have badly needed a shell with access to the trusted space in the browser. I also had a couple more requirements, which were that it was super easy to get at (keyboard shortcut), and that it looks awesome (transparency required).</p>
<p>Since making things looks really nice in <a href="http://www.mozilla.org/projects/xul/">XUL </a>is really hard, I decided that I would build the UI in the current Firefox content window (sorry <a href="http://www.mozillamessaging.com/en-US/">tbird</a> etc, but I built a less shiny version of this into <a href="http://code.google.com/p/mozmill/">Mozmill</a> trunk for all of you).</p>
<p>Some of the functionality that I decided was a top priority was some slightly abstracted access to the window mediator which I am calling &#8216;windows&#8217;, and is simply an array of all the different windows available in the whole browser. The other big one is dir(), I am constantly looking for a property in one of the many, many objects I am trying to access and now that is really easy.</p>
<p>All of that goodness combined with enough space to stick real code blocks and a full history (which you can access using the shift key and up/down arrows), I find myself pretty comfortable.</p>
<p>After <a href="http://adamchristian.com/stuff/xush-01.xpi">installing the extension</a>, you can <strong>simply press &#8216;meta (cmd on mac) + shift + s&#8217;</strong> and you should be greeted with the following (toggling will show/hide the shell):</p>
<p><strong>UPDATE: </strong>It was pointed out to me that on windows meta may not be bound, so I have updated both the extension and git, please try &#8216;alt+shift+ctrl+s&#8217; or &#8216;ctrl+shift+s&#8217; on windows/linux, (I am testing in a VM so it&#8217;s a bit strange. Sorry about the confusion!) </p>
<p> </p>
<div id="attachment_123" class="wp-caption alignnone" style="width: 624px"><img title="Welcome to XUSH" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-13-1024x847.png" alt="Welcome to XUSH" width="614" height="508" /><p class="wp-caption-text">Welcome to XUSH</p></div>
<p>To get started, you can type &#8216;help&#8217; to see what is available to you.</p>
<div id="attachment_128" class="wp-caption alignnone" style="width: 831px"><img class="size-full wp-image-128 " title="Help Menu" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-22.png" alt="Help Menu" width="821" height="206" /><p class="wp-caption-text">Help Menu</p></div>
<p> </p>
<p> </p>
<p>Other available functionality includes a big chunk of the <a href="http://code.google.com/p/mozmill/wiki/ControllerAPI" target="_blank">mozmill controller</a> for driving user actions in the browser, as well as <a href="http://code.google.com/p/mozmill/source/browse/trunk/mozmill/extension/resource/modules/elementslib.js" target="_blank">elementslib</a> &#8212; which gives you all kinds of powerful features for looking up nodes in the browser.</p>
<div id="attachment_127" class="wp-caption alignnone" style="width: 868px"><img class="size-full wp-image-127 " title="ElementsLib" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-6.png" alt="ElementsLib" width="858" height="187" /><p class="wp-caption-text">ElementsLib</p></div>
<p>As I mentioned above, the windows helper can quickly give you an idea of what is open in the browser and let you directly access the objects in the windows[x] array.</p>
<div id="attachment_129" class="wp-caption alignnone" style="width: 840px"><img class="size-full wp-image-129 " title="Windows Helper" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-3.png" alt="Windows Helper" width="830" height="149" /><p class="wp-caption-text">Windows Helper</p></div>
<p> </p>
<p>The nice big console gives you enough space (and using shift) you can do multiple line commands to actually execute code snippets:</p>
<div id="attachment_130" class="wp-caption alignnone" style="width: 676px"><img class="size-full wp-image-130 " title="Code Blocks" src="http://www.adamchristian.com/wp-content/uploads/2009/01/picture-5.png" alt="Code Blocks" width="666" height="218" /><p class="wp-caption-text">Code Blocks</p></div>
<p>My next round of features will include some more helpers, including tab completion and any bug fixes I find, please let me know of any that you find!</p>
<p>If you would like to play with the source, <a href="http://github.com/admc/xush/tree/master">I have it on github </a>and have a python script that uses <a href="http://code.google.com/p/mozrunner/">mozrunner</a> to launch it in dev mode (with venkman installed, although now I don&#8217;t really need it), but saves you from installing and uninstalling the extension every-time you want to try out your latest code changes:<br />
<code><br />
python xush.py<br />
</code></p>
<p>That should launch <a href="http://www.getfirefox.com">Firefox</a> with <a href="http://github.com/admc/xush/tree/master">XUSH</a> and <a href="https://addons.mozilla.org/en-US/firefox/addon/216">Venkman</a> both installed and allow you to hit the shortcut and wham, test away.</p>
<p>After another round of bug fixes I will be submitting this to <a href="https://addons.mozilla.org/en-US/firefox/">Mozilla AMO</a>.</p>
<p><strong>Other projects you might be into if this interests you:</strong></p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/216">Venkman</a></li>
<li><a href="http://code.google.com/p/mozmill/">Mozmill</a></li>
<li><a href="http://getfirebug.com/releases/chromebug/">Chomebug</a></li>
</ul>
<p>Thanks for your interest!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adamchristian.com/archives/121/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Windmill Gets a Facelift for 1.0Beta1</title>
		<link>http://www.adamchristian.com/archives/56</link>
		<comments>http://www.adamchristian.com/archives/56#comments</comments>
		<pubDate>Wed, 19 Nov 2008 08:11:36 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Automation]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Windmill]]></category>
		<category><![CDATA[Windmill-dev]]></category>
		<category><![CDATA[1.0]]></category>
		<category><![CDATA[Beta]]></category>
		<category><![CDATA[IDE]]></category>
		<category><![CDATA[Mozmill]]></category>
		<category><![CDATA[Release]]></category>
		<category><![CDATA[Testing]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://adamchristian.com/?p=56</guid>
		<description><![CDATA[Working up to the Windmill 1.0 Beta 1 Release, I finally had the opportunity to put some time into making the IDE (that a lot of you live in when in test writing mode) a little bit nicer to look at. The IDE has been growing organically since 0.1 and there was a lot of [...]]]></description>
			<content:encoded><![CDATA[<p>Working up to the <a href="http://www.getwindmill.com/archives/315">Windmill 1.0 Beta 1 Release</a>, I finally had the opportunity to put some time into making the IDE (that a lot of you live in when in test writing mode) a little bit nicer to look at.</p>
<p>The IDE has been growing organically since 0.1 and there was a lot of functionality hacked into it that wasn&#8217;t in the original game plan, so I did what I could to improve the beauty of the CSS/Layout as well as the whole mess of code behind it.</p>
<p><img style="float:right;position:relative;" title="loading" src="http://www.adamchristian.com/wp-content/uploads/2008/11/loading.png" alt="" width="244" height="127" /><br />
<strong>Launching</strong><br />
If you have used our latest release, or are running trunk you know that we have significantly improved the load times for the Windmill IDE. By compressing the JavaScript when the service is instantiated we can simply hand the IDE window one file that contains the vast majority of the required code.</p>
<p>The reason that this makes such a huge performance difference is because we are loading the source via the local windmill proxy and the data size size had very little impact, the overhead was in the browser two connection limit. When you have to pull down ~30 files two at a time it takes its toll and made the IDE feel very sluggish and more like a web page loading than an IDE.</p>
<p>In the process of figuring out exactly what was slowing down the launch time we added some more informative messages and output so you don&#8217;t sit there staring at a twirling circle graphic wondering if anything is happening. And to make the experience even more fun, I couldn&#8217;t help but implement a progress bar.</p>
<p><strong>General Layout</strong><br />
I removed the toolbar at the bottom of the screen, which I felt it was an irritation for test editing (especially with the drag and droppable actions). It is now in a drop down menu at the top right of the screen, with the rest of the UI access to IDE functions.<br />
<img class="size-full wp-image-60 alignleft" title="gen_layout0" src="http://www.adamchristian.com/wp-content/uploads/2008/11/gen_layout0.png" alt="" width="216" height="62" /><img class="size-full wp-image-62 alignright" title="gen_layout2" src="http://www.adamchristian.com/wp-content/uploads/2008/11/gen_layout2.png" alt="" width="198" height="88" /><br />
<img class="size-full wp-image-61 aligncenter" title="gen_layout1" src="http://www.adamchristian.com/wp-content/uploads/2008/11/gen_layout1.png" alt="" width="218" height="58" /></p>
<p><strong>Settings and Firebug Lite Improvements</strong><br />
The settings dialog has continued to improve by implementing more useful defaults, adding new options, removing deprecated options and simply making it just look better. Thanks jQuery UI!</p>
<p><img class="alignnone size-full wp-image-63" title="wm_settings" src="http://www.adamchristian.com/wp-content/uploads/2008/11/wm_settings.png" alt="" width="298" height="328" /></p>
<p>Firebug Lite has been a very popular feature since we first announced it, which has led to a handful of bug fixes over the last month. The most major of these was that the initial Windmill implementation of Firebug Lite required you to have Internet access as it was using resources that were hosted elsewhere.</p>
<p>These have since been copied to our source tree and are made available by the Windmill server so you can happily introspect your Web Apps JavaScript while writing tests on your Intranet.</p>
<p><img class="alignnone size-full wp-image-64" title="fblite1" src="http://www.adamchristian.com/wp-content/uploads/2008/11/fblite1.png" alt="" width="342" height="375" /><br />
<img class="alignnone size-full wp-image-65" title="fblite2" src="http://www.adamchristian.com/wp-content/uploads/2008/11/fblite2.png" alt="" width="393" height="449" /></p>
<p><strong>Output and Performance</strong><br />
Instead of writing all the raw windmill output to the output and performance tabs there is now an array called windmill.errorArr, where all terrible errors and warnings about technical details are pushed in the case you are interested to see all that data. However, it&#8217;s more likely that you aren&#8217;t and scrolling through all that output data becomes tedious.</p>
<p>This is why we have implemented output in blocks with the background color representing pass/failure with green/red (white for performance). These blocks are expandable, clicking them will reveal all output (or performance information) we know about the action that was executed. This should give you a faster general overview of your results and allow you to quickly see the details you care about.</p>
<p><img class="alignnone size-full wp-image-67" title="output" src="http://www.adamchristian.com/wp-content/uploads/2008/11/output.png" alt="" width="406" height="240" /><br />
<img class="size-full wp-image-68 alignnone" title="perf" src="http://www.adamchristian.com/wp-content/uploads/2008/11/perf.png" alt="" width="406" height="257" /></p>
<p><strong>Other Worthwhile Mentions</strong><br />
We moved our XPath implementation from Ajax-Slt to JS-XPath, which has proven to be more accurate when it comes to resolving XPath generated in Firefox (or using Firebug) against non XPath native browsers such as IE.</p>
<p>Many bugs and improvements have been made to the DOM Explorer, which should now feel a lot more like the Firebug DOM inspector, but should work in any browser.</p>
<p style="text-align: center;"><img class="size-full wp-image-66 aligncenter" title="dx" src="http://www.adamchristian.com/wp-content/uploads/2008/11/dx.png" alt="" width="500" height="150" /></p>
<p>We have also put a lot of effort into improving the communication between the JavaScript Controller and the Python Service so that when a test fails you get as much detailed information in the service as you do in the IDE.</p>
<p style="text-align: center;"><img class="size-full wp-image-69 aligncenter" title="stdout" src="http://www.adamchristian.com/wp-content/uploads/2008/11/stdout.png" alt="" width="500" height="74" /></p>
<p><strong>Timing and MozMill</strong><br />
The timing has lined up nicely as we are working on both a 1.0 release for <a href="http://www.getwindmill.com">Windmill</a> and <a href="http://code.google.com/p/mozmill/">MozMill</a>. MozMill is geared towards automated testing of all applications on the Mozilla Platform and functions in the trusted space providing lots of very useful flexibility.</p>
<p>You can currently try out <a href="https://addons.mozilla.org/en-US/firefox/addon/9018">MozMill 1.0rc1 as a Firefox Add-on</a>, and keep your eyes pealed as some exciting new MozMill feature work is around the corner.</p>
<p><strong>Participate</strong><br />
We are always trying to make life easier for the test writer, so please <a href="http://trac.getwindmill.com/report">log your bugs</a> and feel free to come <a href="http://freenode.net/">chat with us in #windmill on FreeNode</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adamchristian.com/archives/56/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 3.806 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2012-05-18 16:30:10 -->

