Markup validation when page is generated with AngularJS

Question

We have a single page application created using AngularJS. We'd like to validate markup of that application. The problem is that markup is mostly generated with script, so that if we pass source code to validator, the result is only partial.

Currently we're looking into testing the page in the following way.

• Open the page with Selenium web automation library.
• Do some actions.
• Dump current HTML to file.
• Process it with standalone validator.

It's quite time consuming to implement this flow, as we would need to hardcode all the ways to use an application, so I'd like to ask: is there any other ways to do it?

Answer 1

With AngularJS Your should NOT have to do validate every variation of your page as DOM changes with script in your Single Page Application as long as you stick with AngularJS programming model and stick to the following:-

1. Validate every HTML file/fragment.

   These are Angular templates/partials OR any HTML files you may have (index.html). Use grunt based html validator plugins like this so that grunt workflow can ensure that the HTML is valid even before it is committed in to your source code repository. Such plugins can validate HTML fragments.

2. Use built-in AngularJS directives to manipulate the DOM.

   e.g. ngSwitch, ngView, ngIf etc. instead of any custom stuff using jQuery or other mechanism.

   AngularJS already ensures a valid HTML DOM. That means your resulting HTML is always going to be valid.

Answer 2

Have you consider using Angular e2e:

http://docs.angularjs.org/guide/dev_guide.e2e-testing

This allows you access to get/validate elements from html like:

expect(element('#email').html()).toBe('something');

From Angular Documentation using jazmine:

describe('Buzz Client', function() {
it('should filter results', function() {
  input('user').enter('jacksparrow');
  element(':button').click();
  expect(repeater('ul li').count()).toEqual(10);
  input('filterText').enter('Bees');
  expect(repeater('ul li').count()).toEqual(1);
});

});

Update 1

Then you can try something like:

• https://github.com/peterjwest/html_validator/blob/master/demo.js