The Chickenfoot add-on provides a scripting environment within Firefox. Find out how using Chickenfoot can make it easier to do your Web development tasks.
Chickenfoot is a Firefox add-on that allows you to automate user actions within the browser environment. It also lets you extend the browser interface to provide additional features to a Web page.
Before I delve into how this add-on can make your Web development work easier, I thought I'd take a moment to share the answer to the question I bet you're asking yourself (I know I was): Why is it called Chickenfoot? Here is the answer from the Chickenfoot site:
"Chickenfoot is a game that you can play with dominoes. Since Chickenfoot does much of its work by manipulating the Document Object Model, or DOM, of a web page, Chickenfoot the Firefox extension is like a toy that lets you play with the DOMinoes of the web."
Chickenfoot is available as a free download. When you click the downloaded file, Chickenfoot is installed via the Firefox Add-ons dialog box. After installation, it is available as a sidebar selection (View | Sidebar). After you enable the sidebar, Chickenfoot appears on the left side of the browser adjacent to where pages load.
The lower portion of the Chickenfoot sidebar presents an interface with four tabs: Output, Patterns, Actions, and Triggers. Here's a brief description of the tabs:
- Output: Displays a history of all actions or code that has been run. The results of running code in the editor at the top of the sidebar will appear here.
- Patterns: Contains search patterns for locating common elements in a page. One example of a pattern is an HTML button. When you select the button, it searches the current page for all instances of an HTML button (matches are highlighted on the page).
- Actions: Contains all user actions within the browser page.
- Triggers: Chickenfoot scripts that automatically run when a certain Web page is visited.
The following code snippet is an example of the simple syntax available in Chickenfoot. This script loads TechRepublic; enters the search term 'chickenfoot' in the search box on the page (this text box has focus when the main page loads); and clicks the Search button (the Search text is assigned to the Search button on the Web page) to search on TechRepublic for the search term entered.
The code demonstrates the easy to use script syntax, with go, enter, and click corresponding to what the user does within the Web page.
The recording of actions across different sites, as well as the running of scripts within pages, introduces possible cross-site scripting security vulnerabilities that may need to be addressed by Chickenfoot developers.
AJAX allows you to build powerful Web interfaces, but it can be hard to test these interfaces using automated testing tools since AJAX features bypass normal browser functionality. This is where Chickenfoot enters the picture; it provides the necessary functionality to automate user actions within the browser.
The Actions tab within the bottom portion of the Chickenfoot sidebar lets you record actions within the browser interface; this allows you to generate test scripts for a Web site. The first step in generating such a script is clearing the Actions window by clicking the brush in the upper right corner of the Actions tab.
Once the Actions tab is cleared, select the Record Actions checkbox to begin recording user actions within the browser. Everything will be recorded until you deselect the Record Actions checkbox. As an example, I recorded my loading of the Google home page, entering TechRepublic as the search term, and selecting search. The following script was generated.
click("Google Search button")
You can save the generated script for later use.
It is easy to see how this provides a great way to automate application testing. For example, the selection of AJAX features may be recorded and used to test an application, whereas AJAX-enabled features are often not available to standard testing tools.
For more information about Chickenfoot scripts, check out the Chickenfoot Script Repository.
The number of great tools spawned as Firefox add-ons continues to amaze me. These add-ons offer so many excellent tools and features that help build and test Web applications. Two Firefox add-ons that provide features similar to Chickenfoot are Greasemonkey and CoScripter. However, the simple English script syntax in Chickenfoot makes it stand out and makes it more accessible for nontechnical users.
Chickenfoot allows you to automate user actions to automate tests. In addition, you can write scripts to add features (especially personal features) to a Web page.
If you are not using Chickenfoot, look into how this add-on can help with your daily programming tasks. To keep up with Chickenfoot-related news, check out the Chickenfeed blog.
What are your impressions of Chickenfoot? What Firefox add-ons can you not live without for your Web development tasks? Share you thoughts and experience with the Web Developer community.
Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.
---------------------------------------------------------------------------------------Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!
Check out the Web Development Zone archive, and catch up on previous editions of Tony Patton's column.