How to test a styling/UI theme change?

Questions
#1

Say that a team is extensively changing the styling of an applications UI (e.g. from a dark theme to a white theme) but the underlying layout and functionality should be the same. How would you plan to test it?

My thoughts are that it is effectively a Regression - lite. Where we simply work through the various menus, dialogs, error messages etc and make sure that the styling has been correctly updated. While we would keep an eye out for any howling functional issues, we wouldn’t be concentrating on it.

What do people think? Would you approach this differently?

1 Like
#2

My general approach is to compare the old version and the new version side-by-side, ideally on separate monitors. You can also use tools like PerfectPixel to overlay a screenshot of one version over the other (you can adjust the transparency levels and even reverse the colours of the screenshot) - this approach is useful when you need to compare spacing and sizing.

If you take the PerfectPixel route. can also save yourself some time by using a tool that takes full-page screenshots - my preferred extension for this is AwesomeScreenshot. However full-page screenshot tools can sometimes struggle with things like sticky navs, modals and inline frames, so YMMV.

5 Likes
#3

Hi, If your main concern is spacing and sizing checks, then you can use Galen Framework. It is an automated layout testing framework and it has Selenium, JAVA, JUnit, and TestNG support. You can also find detail info here: https://www.swtestacademy.com/galen-framework/

#4

Hi Chris, we have a customer portal / website that is branded for different clients which means lots of different fonts, colours etc. We use customer journeys as our first point of call when a site is initially created. Three or four journeys takes you through the majority of the site and as the site is responsive they can be done at different sizes or on different devices fairly easily by different people.

Hope that helps.

#5

I worked on a website which had its theme/brand colour changed but no new features or functional changes were made. I made sure to check on all browsers and devices. And visited every page and also performed regression testing to make sure existing functionality wasnt affected with this change. I made sure to perform regression testing as I had lesson learnt from previously tested website which had similar theme/styling change and i just checked for styling/theme change only and dint perform regression and i faced few issues once it was live on production which could have easily been avoided by performing regression testing.

#6

great info cheers James our company moving forward will be customising or branding each website but I would need to ensure from a UI/UX perspective it still functions as expected. Excellent tools thanks K