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

Dealing with ShadowDOM with jQuery

Recently we started testing https://urban.org and we wanted to take screenshots of the dropdown menu and search box, but they were implemented as components with shadowDOM.
2 mins read read

Regression Testing: Your Step-by-Step Action Plan

Regression testing can be an overwhelming task. You can try to do too much and fail because of a lack of resources. In this article we will talk about how you can start with small practical steps to get results fast. Once you set up basic tests like visual regression testing you can start with more complex implementations including automation.
7 min read

25 Web Dev & QA Testing Statistics Every Developer Should Know [2022]

Trends move quickly in the web development and QA testing space. These trends can help predict where the QA and testing industry is headed. Development teams can adapt emerging best practices and methodologies while gaining a better understanding of the challenges they face throughout the development cycle.

 

7 min read

Diffy helps your QA team

to ensure that websites don't get visual bugs

Try For Free