22 October 2020

Testing tabs, mobile menu, sliders

A lot of web pages right now have some elements that get activated by clicking on the pages. For example, sliders, or dropdown menus, or tabs. How to take screenshots of those pages too?

 

Here is an example of how you can do that with Diffy.

 

Let's take an example of the site https://ec.europa.eu/info/index_eu. We would like to take screenshots of not only the homepage but also the language switcher and the second slide on the homepage slideshow.

 

For that we can create three URLs from the homepage:

https://ec.europa.eu/info/index_en
https://ec.europa.eu/info/index_en#language-switcher
https://ec.europa.eu/info/index_en#next-slide

 

And now we can add custom javascript (under Project Settings > Advanced > Custom Javascript) that gets injected into the pages to trigger actions based on the URL like:

if (window.location.hash == '#language-switcher') {
  // trigger the language switcher.
}

if (window.location.hash == '#next-slide') {
  // trigger the slider to move it one the next one.
}

 

This will make three screenshots of the homepage but with different actions run. So we get all the elements covered.

Same page differently captured by Diffy

What Kind of Things Break During WordPress or Drupal Updates and How to Fix Them Quickly

Much of the modern Web is powered by open source content management systems (CMS) like WordPress or Drupal. Like all software, though, even the most reliable CMS needs bugfixes, and all world-class software gets new features in time. And sometimes, – we’ve all been there – no matter how good the intentions behind them are, some updates break things.
3 mins read read

Top Visual Regressions that You Can Spot with and without Automated Testing

Visual bugs are typically considered easy to spot. You can often see what’s missing or what’s amiss on a web page.

A photo that’s too much to the left, the wrong fonts, a missing button -- these are things that you can spot at a simple glance. But not all visual bugs are that easy to catch, especially not with the naked (or untrained eye).

This is where automated visual regression tools like Diffy come into play. They can help you spot elusive visual bugs easily, even if you have to test hundreds of pages.

4 mins read

The Complete Compatibility Testing Guide | Tools, Types & Examples

As technology advances faster than ever, software development needs aren't focused on a single platform anymore. Today, each software is developed with the aim to run cross-platform. This is where the need for compatibility testing comes into play.

For the vast majority of software types, you have to test your website’s/application’s compatibility to run on a wide range of devices. How do you do that? How can you make sure that your users can move seamlessly across devices without their experience being hampered in any way?

5 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free