With visual testing we focus on pixel to pixel relations between page screenshots. However sometimes we want to create visual test only for specific parts of the page. This could be because we have dynamic content, advertisement banners, or simply we are not interested in the rest of the page.
Selecting the element
The first thing we need to do is identify the element we are going to test in the HTML code. To do so we need to find its selector. We will show this on snapics.co page.
The tested element will be the main image on the homepage.
After right clicking and inspecting the element we can see that the element is contained in a div with the following opening tag
<div id="main-slideshow" class="empty-slider">
This means we can selected by id using the following selector ‘#main-slideshow’. You can read more on how to obtain element selectors in our blog post here.
Creating the visual test
We will be using an existing project for this purpose and create a brand new test, lets call it ‘Main Slider’.
We chose the Selector option and fill in the data from above. After creating the test, we can obtain its baseline image. Which in our case looks like this.
Oh… our text is missing, this is because we have some animations that delay the rendering. However we can add a ‘Wait‘ step to our test and give it a value of 2000, giving the text 2 seconds to render before we take the screen shot.
Much better the text is now visible and we can start testing. For the sake of this post we will temporary change the text in the signup button so we we can have failing test to show.
There you have it, we are now able to verify that our main slider is in good shape. We can even add tests for different resolutions, schedule them and receive reports if something changes.
Using the selector approach in your visual testing can significantly speed up your tests. Moreover you are shielded from unwanted content for the different test cases. This way you can have much more granularity and stability in your suites.