Thursday, 8 September 2016

How to add HTML validation into your test process without even trying

TLDR; Charles proxy can use validator.w3.org and report results in the proxy GUI


After looking at my default test process for web and realising it didn't include HTML validation by default, I decided to find the easiest way I could to add it in to my process.

I generally find that the easier I can slot something into my process, the more likely I am to use it.

We all use Dev Tools by default now

Dev tools are bundled with every browser now, so we all use them. Right?

Previously we had to download plugins and add ons. But now that it is a right click away by default, we have no excuse.

But HTML validation doesn't appear to be there. I can 'audit' the performance of the page in the Chrome dev tools, and the CSS usage checking is quite useful. But no HTML validation.

Which is the higher technical risk to your products functionality? CSS? Speed? HTML?



Sadly, the latter I think has caused more issues across devices than any of the others.

So what can help me get the basics right? And do so without trying too hard.

I mentioned https://validator.w3.org/ in a previous post. But that requires work. I have to check each page one by one.

A quick web search revealed a bunch of HTML validation tools. Some of which look quite good and I Will evaluate them in due course. But they require adding a new tool type into my workflow, which means I have to change how I test and that means I need to work harder to incorporate it.

What I really wanted was a proxy that validates HTML

  • I had a quick search for 'Fiddler' plugins to validate HTML but couldn't see any.
  • I couldn't remember any of my existing proxies offering to validate HTML.

But a web search for proxies that validate html popped up Charles.

I already use Charles, but it never had any standout features that meant I used it regularly. So I must have missed the HTML validation functionality.

But there it is, clear as day.



What does the Validate option in Charles Proxy do?


Given the urls that you highlight in the 'session'. Charles will open up a new 'validation' tab and pass each of those urls through to the w3.org validator and format the results for you.



And that, I can add into my workflow, since I already use proxies and I already own Charles.

I know how to chain proxies so if I prefer to use one of the other proxies for observation and manipulation then I can always add Charles into the chain and use it for validation during the process.

Since Charles is cross browser I'll be able to use this on my Windows and Mac testing.

Summary

  • Understand your own workflow
  • Try and find tools that fit into your existing workflow
  • Learn what your existing tools already do
  • Try to add automated validation into your workflow seamlessly
  • Charles Proxy can use w3.org validator to validate HTML

And with that I've just increased my workload, but hopefully for the general betterment of my testing and my web sites and web apps.






No comments:

Post a Comment

>