We usually spend lot of time and efforts developing products with solid technical features and functionality. As per the survey, most users don’t focus on such functional aspects of the application. What matters to them is what they see. Irrespective of how great your coding structure is, your work is measured by user interface of the application.┬áThese are the reasons behind tremendous importance of Web UI Testing.

In this article we will learn one of the most popular google chrome extension “Page Ruler” which is built to ease the complexities of User Interface Testing.

As the name suggests, Page Ruler lets you draw a ruler to get position, width and height of selected area. You can also get dimensions and pixel positions of any web element on the page.


Why Page Ruler?

As part of extensive UI testing, we need to verify exact positioning, size, length and width of web element. Verifying distance between elements and padding are also very important. Page Ruler gives you a platform to perform such verification. It’s easy to install and use.

Features of Page Ruler:

1) Create a Ruler on any web page to verify width, height and top, bottom, left and right position of selected area.
2) Ruler is re-sizable and movable after you draw it.
3) Size of the ruler can be changed from toolbar located on either top or bottom section of the web page.
4) “Enable Elements Mode” can be used to locate and verify the web elements on the page. Elements will be highlighted when you mouse hover on them.
5) Supports 10 different languages.

Installation:

Page Ruler is a Google Chrome extension and you can install it just by few clicks.

Install Page Ruler For Google Chrome

Click this button to navigate to Page Ruler installation page in your Google Chrome browser. You’ll see a page as shown below:

page_ruler_add_to_chrome

– As highlighted in the screenshot there will be a button “Add To Chrome”. If you click that button, you’ll be asked to click”Add Extension” through pop-up window.

– Confirm your action in pop-up window and installation part is done. Voila!!

How to Use Page Ruler?

Using Page Ruler for Web UI testing is very easy. After installation you will see an icon of Page Ruler in toolbar of Google Chrome browser.

pageruler_icon_toolbar

Now open the web page in browser on which you want to use Page Ruler and click on the icon from toolbar.

pageruler_bar

As you can see in above image there is a Page Ruler Bar displayed on the top of the web page containing following parameters to measure:

Width, Height, Left, Top, Right and Bottom.

Let’s measure the search field located in the right sidebar of Testing Journals page and see how it looks like.

pageruler_search_bar

Width : Horizontal width of selected area / element.
Height : Height of selected area / element.
Left : Distance between left end of web page and left surface of the selected area / element.
Top : Distance between Top end of web page and upper surface of the selected area / element.
Right : Distance between left end of web page and right surface of the selected area / element.
Bottom : Distance between Top end of web page and bottom surface of the selected area / element.

Some shortcuts:

ALT+P: Enable / Disable Page Ruler bar
Arrow Keys: Move the ruler in any direction
Arrow Keys + Shift: Move the ruler by 10 pixels
Arrow Keys + Ctrl: Expand the ruler by 1 pixel
Arrow Keys + Shift + Ctrl: Expand the ruler by 10 pixels
Arrow Keys + Ctrl + Alt: Shrink the ruler by 10 pixels

How to Locate the Element on Web Page?

Mouse hover on left most corner of Page Ruler tool bar and you will see “Enable Element Mode” option.

Well, now you know everything about this awesome google chrome extension for Web UI Testing. Play with it and make the best use out of it. Thank You for reading and Happy Testing!!


Share This Article :