Detect differences from html and css changes from live site

Question

We have a webpage that can be hosted in an iframe on another site. When it's shown in another website we override the css to have the l&f of that site.

What happens is when someone changes the css class name or properties in the webpage it might look bad on other site where it's hosted until we detect and change it.

If there is a way to detect this before the change goes live we can make change it for the other site as well.

Some kind of html,css capture tool which can say if there is any difference in the css classes on the html elements or the properties

Answer 1

I hope you have templates!

If you don't (and therefore can't just diff them on a commit trigger or the like) ...

As you don't state the language your site is coded in, giving advice is difficult. Instrumenting a web application to catch these things will also be (I may be wrong), non deterministic as the control flow of the program will affect the outcome.

I would advise using a tool to capture and replay test traffic to your web application, then compare the output of the returned buffers after stripping any application-variable output.

You could also wrap something like printf or echo or whatever your language uses to detect a set {text, line number, file} and compare the HTML in these.

Ultimately, why bother?? seems like a pointless exercise to me. Just run a HTML/CSS/whatever validator on the output and actually use the site to check it looks ok. And if your HTML isn't separate from your model/business logic then you have bigger worries anyway.

1. wget
2. libxml2
3. diff