User:Rajrit/sandbox

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.

One way is to- a. Use Device Anywhere b. User Perfecto Mobile

but another way to do this is to test media queries.

Testing media queries has many different approaches. There have been numerous discussions related to this all over the web. But, one approach for testing media queries is to 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.

The following resources below talk about different approaches and are related to testing media queries

http://johanbrook.com/design/css/debugging-css-media-queries/

http://playground.johanbrook.com/css/mediaquerydebug.html

http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/

Based on the info from the above resources, there is one approach to test media queries which is very simple and an effective solution.

What do we do when we want to check whether a particular function is executed in a program?? Some used to give simple PRINT statements. So, if the program is executed the print statement is also executed and if it appears in the console (or anywhere else) we know that, the particular function was accessed. We would give print statements like

print(“Breakpoint 1″); print (“Breakpoint2″); //or something like this

Similarly, in CSS, you we 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.

We give a print statement using “content” tag within this to ensure that, only those CSS definitions defined within a particular media query is selected.

One approach of testing media queries using this concept is shown below-

@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.

To see the how to above approach could be used for testing media queries, copy the below, code save it as a html file and execute it ——————————————————————————————– Code:

<!DOCTYPE html> Documents

 @media only screen and (min-width: 320px) and (max-width: 640px){

body::before{ content: “Tablet media query (320 < 640) fired”; font-weight: bold; display: block; text-align: center; background: rgba(255,255,0, 0.9);  /* Semi-transparent yellow */ position: absolute; top: 0; left: 0; right: 0; z-index: 99; }

}

@media only screen and (min-width: 641px) and (max-width: 767px){

body::before{ content: “Tablet media query (641 < 767) fired”; font-weight: bold; display: block; text-align: center; background: rgba(255,255,0, 0.9);  /* Semi-transparent yellow */ 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: 14px; -webkit-transition: width 0.5s ease-in; -moz-transition: width 0.5s ease-in; transition: width 0.5s ease-in; }

}

@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;

}

I am testing media queries

NOTE: If we add the window resize bookmarklet (by just dragging and dropping into the browser tab) we can verify the screen resolution with the media query getting triggered. The bookmarklet used is from -> http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/)