Valid HTML markup automation, leads to better cross browser compatibility

In short: Having bad HTML to look nice needs more efforts than creating valid HTML which will look nice and be compatible.

It took some time for me to investigate how to force development process to increase the

quality of HTML markup and minimize cross browser compatibility issues in web UI development.

HTML validation process always left by developer for the last point and has lowest priority.

It is almost not done during development process and only when page or probably in many cases

whole web site is ready for production.

Compatibility and accessibility testing is another duty of testers but looks like they are in general

more busy with other things and markup left as is with low priority and extremely high number of errors

and warnings in production code. So looks like it is rendered, then no one cares.

For manual testing there are some tools available for devs and tests but I think that

W3C's online validator is out of competition. Just open https://validator.w3.org/ online validator

and try to validate some popular resources.

I will be surprised if any one of them will have low number of validation errors.

I will not publish some numbers here and will try to avoid validating software/hardware and IT service providers.

Try some popular news portals like cnn.com and nytimes.com .

Number of errors is extremely high I think. To be true I do not see any reason to keep that so high

and the only reason it is so just web UI was not designed and developed with compatibility in mind.

Some will tell but it is rendered and looks nice. I will agree that it is working, but we should understand the price of it.

Making bad html to look good leads to extra coding and development pain.

That means more code we need, more testing we need and more UI bugs we have.

Just some words about automation testing. There is manual tests which is well known when tester

tests unit like feature or page manually executing or opening it to check functionality.

Automation test is done using some tools which checks functionality problematically like browser simulating,

clicking, creating resources, managing them and disposing. Automation test just a step after small development

milestone which should check if feature works as expected and none of dependencies are broken.

Spend some time using your favorite search engine to find more about "Automation testing"

Solution is not new and it is web ui automation test. Automation tests will force devs to keep HTML

clear and valid from the first steps of development. It will minimize tester's efforts and save a lot of time for big portal testing.

Code can be as simple as

[TestMethod]
..............
var result = Validator.Client.Check(new Uri("https://www.cnn.com", UriKind.Absolute));

if(!result.Validity)
{
.... Show errors.... result.Errors
}

W3C provides API (web service) for testing. More information can be found here https://validator.w3.org/docs/api.html

API will check for markup validity and will return a list of errors with HTML fragments and comments with suggestions.

So you can consume that API from your test code for HTML validation or use sample library which I am using for my projects,

So the only thing you need now is to create Test project and implement some lines of code.

Additional resources