Testing Responsive Websites using media queries
There is always the option of testing responsive websites by using different devices like phones, phablets, tablets and desktop and check whether the right pages are displayed and user experience is the intended one. But, I was thinking about how to test this, in case you don't have access to all the devices.
One way is to-
a. Use Device Anywhereb. Use Perfecto Mobile but these are costly options.So, the Cheaper option and another way to do this is--
Test the media queries i.e check which CSS is loaded when a particular screen size/device width is hit. Say for eg-@media only screen and (min-width: 320px) and (max-width: 640px){//load newsection.css.............}
So when the min-width and max-width is between 320px and 640px respectively, then the "newsection.css" page should be loaded. This is another way to test whether the right page is loaded in a particular screen resolution.
I was recently trying out various approaches for testing media queries based on the above idea and found the following resources really useful (Thanks guys!!!).
From the above resource, I tried out various Proof of concepts (POC), to test media queries. The best one I liked was a very simple and effective solution.
What do we do when we want to check whether a particular function is executed in a program?? Atleast, I used to give simple PRINT statements. So, if the program is executed the print statement is also executed and if it appears in my console (or anywhere else) I know that, the particular function was accessed. I would give print statements likeprint ("Breakpoint 1"); print ("Breakpoint2");// or something like this.
Similarly, in CSS, you have something called a "before" pseudo-selector which can be given in the body tag. So, basically whatever is given within this pseudo-selector will be the first line of code executed when the program flow enters the "body" section.
I gave a print statement using "content" tag within this to ensure that, only those CSS definitions defined within a particular media query is selected.
OK. enough of my talking... I will show you what I did ...@media only screen and (min-width: 768px) and (max-width: 979px) {body::before{content: "Tablet media query (768 < 979) fired";font-weight: italic;display: block;text-align: center;background: rgba (255,255,0, 0.9); position: absolute;top: 0;left: 0;right: 0;z-index: 99; }body {width: 80%;color: #444;margin: 0 auto; font-family: sans-serif; line-height: 1.618;font-size: 50px;-webkit-transition: width 0.5s ease-in;-moz-transition: width 0.5s ease-in;transition: width 0.5s ease-in;}
In the above code when the resolution hits 768 px to 979px, the code in the "before" selector gets executed and the "content" (equivalent to print statement) will tell the user "Hey!!! your media query is triggered". Then the code within the "body" tag gets executed.
This is a way of testing to see whether a particular media query is triggered and helps Testers to do more hands on testing than just looking at the GUI.