I realise this is a non-trivial task, but is there a way to regression test the styling and rendered layout of a web application?
I've found it straightforward to unit test and regression test functionality, both server-side and client-side.
However, a frustrating issue I've run into are CSS changes made to fix one layout issue that break the layout and styling on a different page. The only way I know how to detect these is to manually view every page in an application, and compare it with my own expectations, but obviously this can be burdensome and expensive when an application can have dozens of pages. Has there been any research using image processing or other techniques to detect these kinds of problems automatically?
What is Regression Testing? Regression Testing is a type of testing in the software development cycle that runs after every change to ensure that the change introduces no unintended breaks. Regression testing addresses a common issue that developers face — the emergence of old bugs with the introduction of new changes.
Regression Testing is defined as a type of software testing to confirm that a recent program or code change has not adversely affected existing features. Regression Testing is nothing but a full or partial selection of already executed test cases that are re-executed to ensure existing functionalities work fine.
Regression testing is a type of testing where you can verify that the changes made in the codebase do not impact the existing software functionality. For example, these code changes could include adding new features, fixing bugs, or updating a current feature.
Actually, one of the hidden gems of Selenium is that you can use it to take screen captures of the browser. Then using a technique as described in Find differences between images using C#, you can highlight the differences between previous snapshots.
This example shows how to grab a screenshot of the homepage and then create a difference image. With a little extra tinkering, you can use the same technique to count the pixels that are different.
[Test]
public void CompareHomePageToPrevious()
{
string fileName = Path.Combine(Environment.CurrentDirectory, "homepage.bmp");
var selenium = new DefaultSelenium("localhost", 4444, "*chrome", "http://mywebsite");
selenium.Start();
selenium.Open("/");
selenium.CaptureEntirePageScreenshot(fileName, "");
// Load current and previous captures
var current = new Bitmap(filename);
var previous = new Bitmap(_previousHomepageImage);
// Find all pixels that are the same and make them pink
Bitmap diff = ImageTool.GetDifferenceImage(current,previous,Color.Pink);
diff.MakeTransparent(Color.Pink);
// Save the image for viewing
// or count the number of different
}
Selenium is a really interesting choice because it's cross-platform and cross-browser, meaning that you can capture screens of different browsers. You can use this technique to compare snapshots between builds or to compare between browsers.
There is a way to test the layout of a web application using Galen Framework. This tool has its own language and is very easy to learn and understand. It is a Selenium-based and you can run tests in Selenium Grid, (Sauce Labs) if you want to test your application in different browsers.
This tool gets the location of a specified element on the page and check them relatively to each other.
Example: if you want to check that a menu pane is below the header and stretches to the width of a browser and has 50 pixels height, you can do it like this:
menu
below: header 5px
width: 100% of screen/width
height: 50px
This tool can also be used to test responsive designs.
You can find complete documentation on the official website, http://galenframework.com.
The best part is you can even create Java tests. The Galen JavaScript API is also available along with the sample projects on GitHub.
Again, test(s) written once can be used at multiple phases of the application life cycle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With