Web Testing Framework
There's a new version and now hosted on AMO (addons.mozilla.org). Get the new version there and it will take care of auto-updates in the future.
Web Testing Framework (WTF) is an extension to YSlow that tests for the following shady web dev practices:
- Use of
<blink> - Use of
<marquee> - Use of
<font> - Missing doctype
- Use of spacer GIFs
- Use of
<a href="#"..>and<a href="javascript:...>
Gimme!
- The code is in GitHub
- To install click here
Note that this extension requires Firebug and YSlow2
Help
Please report any bugs here and also suggestions for more checks for what you think is bad practice (and is technically possible to test by a tool, as opposed to a human)
Thanks!
Thanks to Ryan Grove for inspiration with the naming of the new tool 
Motivation
The motivation is mainly to demonstrate how easy it is to create new extensions and new checks to YSlow. They don't even need to be performance-related.
There are two basic concepts. 1. A rule is a type of check like "use gzip". 2. The pool of available rules can be combined into rulesets. The API is therefore just:
YSLOW.registerRule({...});
YSLOW.registerRuleset({...});
The first takes an object containing name, id, info about the new check and a lint() function that performs the check. The second accepts a config object - which rules go into the ruleset.
Check this file - that's all it takes to do a new extension.
This entry was posted on Sunday, June 20th, 2010 and is filed under tools, Web1.0, yslow. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
June 20th, 2010 at 5:03 am
So why I should avoid # links? (Links should be links. Links with href such as href=# and href=”javascript:” should be avoided like the plague)
June 20th, 2010 at 5:11 am
well, then you turn off JavaScript what happens to those links?
June 20th, 2010 at 5:18 am
Yeah, I’m quite guilty of making JavaScript links.
I think the idea is to use JavaScript to add onclick events to parts of your website. Frameworks like jQuery make it fairly simple to add an onclick event and prevent the click from activating any hyperlinks in the same part of the page.
The href parts should be written so that your website will work in a purely JavaScript-free fashion when a browser lacks or has disabled support.
If I’m totally wrong about this then let me know.
June 20th, 2010 at 10:06 am
It could be interesting to add some elements like “iframe”, “frames”, sites “designed with tables” and not css… if i’ve new ideas i’ll send you
it’s a great tool.
June 20th, 2010 at 11:25 am
Does it only test static HTML, or generated HTML as well? I ask as JavaScript links are not really a problem of course when they’re inserted into the DOM by JavaScript itself.
If I where not visiting this page on my Android I would have tested it myself of course
June 21st, 2010 at 1:00 am
Your tool is really a great idea, here are my suggestions:
Link such as <a href=”#” can be anchors, such as a “Back to the top” link, not only JavaScript links.
Like Javier, I’d like to see iframes and designed with tables rules.
And also, you can add rules for inline css and javascript.
Good Luck!
June 21st, 2010 at 1:38 am
@Bruno, I think href=#top is fine (and the tool forgives), but not href=”#”
@Sander, yes, the JS-modified DOM is inspected. Will think about inspecting the static HTML
@Javier, @Bruno – tables for layout is something I thought about, just unsure how to check. Maybe require at least one TH in addition to TD?
Not sure about iframes, ads and such still need them…
June 21st, 2010 at 5:49 am
@Stoyan: what about if it have inside the table?
June 21st, 2010 at 5:50 am
@Stoyan: what about if it have inside the table?
P.S.: htmspecialchars($comment)
June 21st, 2010 at 5:51 am
aaaaaaaa
@Stoyan: what about if it have h1 inside the table?
P.S.: htmspecialchars($comment)
June 21st, 2010 at 8:04 am
This really has some potential. Few low weighted additions could be the presence of a favicon, and really just take advantage of YSlow’s interface with mark-up validation, in it’s simplest form missing closing tags etc. Do you know of any SEO YSlow mods as there’s definitely room for that?
June 21st, 2010 at 9:40 am
Welcome to the Web police!
You are not authorized to use href=”#”.
You are not authorized to use spacer.
You are not authorized to use frame.
…
The next step : you are not authorized to use HTML
June 21st, 2010 at 11:58 am
I like the url of this page.
June 21st, 2010 at 12:05 pm
One other thing…reminds me a bit of Inline Code Finder by Robert Nyman…which prompts me to ask, what about inline styling?
https://addons.mozilla.org/en-US/firefox/addon/9640/
June 22nd, 2010 at 8:48 am
Please add a check for onClick, onChange, etc attributes as well, at least as an option. Although better than JavaScript links, use of these attributes is still a discouraged practice. Adding JavaScript behavior should be fully unobtrusive. I would love to have a tool like this to help enforce that on projects that I work on with a team.
June 23rd, 2010 at 3:51 pm
You can borrow ideas from Eric Mayer’s diagnostic CSS: http://meyerweb.com/eric/tools/css/diagnostics/
Event attributes (onThis and onThat) are a good idea, inline styles too. I think that the only valid method to catch presentational tables is to look for nested ones. Maybe a looser check for missing thead, th elements will be helpful.
@Vlado, since you can use some HTML in the comment form, htmlspecialchars() is not a good idea.
July 15th, 2010 at 12:49 pm
I don’t know the full capabilities of yslow, but if it is possible, remove height and width styles and sizing from images, and if the dimensions turn out to be 1×1, then you can mark it as a spacer image.
July 16th, 2010 at 6:04 am
@Ping, that’s possible, but sometimes 1×1 images are used for tracking and not for layout
That’s why I check for 1×1 dimensions and in addition look for hints in the image URL, such as “dot” and “spacer”
July 19th, 2010 at 7:57 pm
‘#’ is perfectly fine and is normally used for ajax calls. Including that as spammy is a bit ridiculous.
August 3rd, 2010 at 4:26 pm
@Anthony ‘#’ by itself is not perfectly fine. Using the hash to point to a particular section of a page is acceptable, but the href attribute should never contain only ‘#’.
Using progressive enhancement, the href should start out pointing to a vaild link. The click handler that is attached unobtrusively can override that, but the link should be functional before Ajax or any other dynamic behavior is added.
December 16th, 2010 at 12:42 pm
Thanks! Added it, to my collection of useful plugins.
February 12th, 2011 at 7:49 pm
[...] Web Testing Framework http://phpied.com/wtf/ A YSlow extension for inspecting shady webdev practices [...]
March 5th, 2011 at 4:03 am
[...] Web Testing Framework 0.0.1http://phpied.com/wtf/ [...]
March 7th, 2011 at 7:11 am
Hash links are pretty common npwadays and I definately wouldn’t call them a shady practice. Hash links are required for a lot of banner rotators and for obvious users like navigating a very tall page.
October 6th, 2011 at 6:25 am
Very useful plugin – thank you!!
November 26th, 2011 at 12:07 am
hotels and travel resources…
[...]Web Testing Framework / Stoyan’s phpied.com[...]…
December 9th, 2011 at 8:42 pm
[...] YSlow can also be used as a framework to build extensions that talk to browser, refer to Stoyan Stefanov’s article for code samples: Web Testing Framework [...]
January 29th, 2012 at 3:12 pm
emc testing lab…
[...]Web Testing Framework / Stoyan’s phpied.com[...]…
March 19th, 2012 at 10:30 pm
Thank you for the auspicious writeup. It in fact was a leisure account it. Glance complex to far added agreeable from you! By the way, how can we be in contact?