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

A Comprehensive Guide to Non Functional Testing: Types, Examples, and Tools

Testing is an essential part of the software development lifecycle. Any software application needs to be tested for its functional and non functional requirements. Testing helps to examine if the software application matches all requirements and standards, ensuring customer satisfaction. Various aspects of applications are checked using different tests, classified into functional and non functional testing categories.

17 min read

Everything You Need To Know About Performance Testing and Its Types

The software testing process does not end with the segregation of functional and non-functional types. Therefore, to develop a thorough understanding of the SDLC, you need to dig deeper. One of the non-functional testing types is performance testing and this type is further segregated into 4 types.

4 min read

A Brief Guide to Functional Testing, Types & Examples

Apart from being an integral part of the SDLC, functional testing is defined as testing a software system's ability to meet the functional requirements of an end-to-end solution. New to the world of functional testing? You have come to the right place!

7 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free