4

Background Information

Just to get some context for my question, I started at a new SME in the UK earlier in the year. I was employed as a PHP developer, but I am Scrum certified and have worked for large and small companies; so alongside moving the company to Agile processes, I've been asked to propose and head QA, automation, testing and releases. Outside of web development, I have no first-hand experience with any of those processes.

My employer currently has a lot of very basic HTML and CSS websites with some JavaScript and not very much PHP. It's very important, for SEO purposes, that any changes to a website does not affect, auto-generate or in any other way mess with the HTML pages served. Every site that has been migrated into any framework has lost SEO power and lost leads and therefore lost revenue. So the development time has been costly for no return. In fact, our Jekyll websites are going to be decommissioned and we're going to redeploy the old flat and non-responsive HTML versions of the sites.

Because of this, a bespoke and very light weight request/response PHP framework has been developed in house. The purpose is to migrate the old HTML websites to run in this new framework, with the obvious advantage that pages can be partially templated etc.

What I need to know

I need a way to prove that the HTML served by our framework matches the corresponding HTML source on the live website, and where the differences are (if any exist). We can do this manually (but that's going to take time away from development one way or another).

Is there an automation tool that will compare one webpage (example dev page at https://test.example.com/my-page.html) against another (example corresponding live page at https://example.com/my-page.html) and detail where the HTML source is different? I'm sure that I can write a PHP script which will do this, but if there's something out of the box that'll do the same job then that's saved [expensive] dev time.

4
  • 1
    đź‘‹ Hey Shaun, just wanted to say that this is a great question - well written, plenty of detail, the problem is clear, and welcome to SQA!
    – trashpanda
    Aug 4 at 13:28
  • Thanks. It helps being a former published author I guess. Aug 4 at 13:30
  • 1
    Do you want to compare only the HTML tags, or content as well? If you want to see changes in content as well, you're basically dealing with a comparisson of two text documents.
    – pavelsaman
    Aug 4 at 14:33
  • 1
    The comparison is essentially two text documents as well as the HTML tags and attributes; of course, some things we can ignore like the source path to an image will obviously differ on the staging site to live as that's pre-processed by the framework. However, the relative path must be the same (so <img src="https://test.example.com/images/main.jpg" /> vs <img src="https://example.com/images/main.jpg" /> Aug 4 at 14:38
1

Is there an automation tool that will compare one webpage ... against another ... and detail where the HTML source is different?

You could use something off the shelf like DiffNow.com as suggested in this similar StackOverflow question. Otherwise, using a script is probably the easiest.

3
  • Thanks, I was obviously wording my search terms wrongly, ah and should have searched SO first. Aug 5 at 8:56
  • 1
    But will this take the different base urls into account? Or is it just a normal diff?
    – pavelsaman
    Aug 5 at 14:53
  • With the premium version of this software (which is only $19.99 USD per year) it seems to be able to exclude certain words from the comparison I think using some sort of pregmatch functionality or something I'm guessing. The premium edition is for Windows. Aug 5 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.