{"id":13165,"date":"2020-07-10T10:08:21","date_gmt":"2020-07-10T14:08:21","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=13165"},"modified":"2020-07-10T10:08:21","modified_gmt":"2020-07-10T14:08:21","slug":"capturing-form-loading-time-using-httpwatch-tool","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/capturing-form-loading-time-using-httpwatch-tool\/","title":{"rendered":"Capturing form loading time using HTTPwatch tool"},"content":{"rendered":"<p>Webform loading time depends on multiple factors such as hosting server, internet bandwidth, design of elements including type and number. As a tester, it is very difficult to find the root cause of the webform performance issue without using any tool. Using the <a href=\"https:\/\/www.httpwatch.com\/\">HTTPwatch tool<\/a>\u00a0which is a simple extension to Google chrome, any tester can capture webform loading time very easily.<\/p>\n<p>The summary logs will also show, which request has consumed more time in a group of requests. Another advantage of this tool is it will show how much time is taken by HTTP requests in seconds immediately, so not many complex calculations are required for the user to calculate response time for a particular request. All the logs can be saved in the CSV files and shared with the development team. Users do not need to set up a performance tool at the initial stage as well. Even some of the <a href=\"https:\/\/www.machmetrics.com\/speed-blog\/average-page-load-times-websites-2018\/\">Surveys<\/a> claim that form loads within `3 seconds`.<\/p>\n<hr \/>\n<h3>Installation:<\/h3>\n<p><strong>1<\/strong>. Navigate to the <a href=\"https:\/\/www.httpwatch.com\/download\/\">website<\/a> for downloading the setup.<\/p>\n<p><strong>2<\/strong>. Download the `Basic Edition` by clicking on the button `DOWNLOAD 25MB`. Setup will start downloading.<\/p>\n<p><strong>3<\/strong>. Click on the `httpwatch.exe` -&gt;Right Click-&gt; `Run as administrator` , following screen will open.<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>4<\/strong>. Click on `Next`, following screen will be open<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-1.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-1.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>5<\/strong>. Click on `I Agree`, following screen will be open. Select the required components to be installed and then press `Next`<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-2.png\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-2.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>6<\/strong>. Select the `Destination Folder` in the below screen and then press `Install`<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-3.png\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-3.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>7<\/strong>. After completion of installation following screen will be displayed, click on `Finish`<strong>(Note- before clicking on finish setup will ask you to close all browsers, hence save all of your unsaved work)<\/strong><\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-4.png\" data-rel=\"lightbox-image-4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-4.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>8<\/strong>. Open the Chrome browser. `HTTPwatch` will be added as an extension in it.<br \/>\n<a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-5.png\" data-rel=\"lightbox-image-5\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-5.png\" alt=\"\" \/><\/a><\/p>\n<hr \/>\n<h3>HTTPWatch functionalities:<\/h3>\n<p>Note: <a href=\"https:\/\/qxf2.com\/selenium-tutorial-main\">Qxf2 Selenium Tutorial<\/a> has been used to demonstrate the examples in the post.In the later section comparison between actual application will be covered. Although, We have demonstrated examples with <a href=\"https:\/\/qxf2.com\/selenium-tutorial-main\">Qxf2 Selenium Tutorial<\/a>, We have tested this against publicly available websites like Facebook, LinkedIn, IRCTC, etc.<\/p>\n<p><strong>1<\/strong>. Open the application in this case <a href=\"https:\/\/qxf2.com\/selenium-tutorial-main\">Qxf2 Selenium Tutorial<\/a> in the Chrome browser. Then click on the HTTPWatch icon and it will open the HTTPWatch console as shown in the below image.<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-6.png\" data-rel=\"lightbox-image-6\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-6.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>2<\/strong>. Close the `HTTPWatch is debugging this browser&#8217;s warning. The `Record` tab will be enabled to record the HTTP requests. Click on the `Record` tab the requests. Then access the webform in the open browser.<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-7.png\" data-rel=\"lightbox-image-7\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-7.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>3<\/strong>. I have recorded the time capture for loading `Selenium-Redirect` form from the <a href=\"https:\/\/qxf2.com\/selenium-tutorial-main\">`selenium-tutorial-main-page`<\/a> note that I have start recording after entering all details such as `Name`, `Email, `Phone No` and before pressing the `Click Me` button. Then open the HTTPWatch console to monitor the logs as shown in the below screen.<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/07\/httpwatch-selenium-redirect.png\" data-rel=\"lightbox-image-8\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/07\/httpwatch-selenium-redirect.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>4<\/strong>. You can view the summary as shown below, the summary shows the `time taken for that particular scenario`(highlighted number in below image) i.e. `1.1` seconds, which is well within an acceptable range to open a form. Even I capture logs for all remaining pages and found that all forms open within 3 seconds. The summary will also show some of the parameters such as method `GET` or `POST`, as well as `status code` weather requests, got a response from `Cache` or `Memory Cache` etc.<\/p>\n<p>You can use `Stop` to stop recording while, `Clear All` will clear all logs.<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/07\/httpwatch-setup-screen-8.png\" data-rel=\"lightbox-image-9\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/07\/httpwatch-setup-screen-8.png\" alt=\"\" \/><\/a><\/p>\n<p><strong>5<\/strong>. You can also `Save` these logs, as well as there are other options available such as `Export to CSV` and `Send by Email` as shown below:<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-9.png\" data-rel=\"lightbox-image-10\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2020\/06\/httpwatch-setup-screen-9.png\" alt=\"\" \/><\/a><\/p>\n<hr \/>\n<p>I hope you have liked the blog. You can use this simple utility in your projects to capture form load times.<\/p>\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>Webform loading time depends on multiple factors such as hosting server, internet bandwidth, design of elements including type and number. As a tester, it is very difficult to find the root cause of the webform performance issue without using any tool. Using the HTTPwatch tool\u00a0which is a simple extension to Google chrome, any tester can capture webform loading time very [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[189,238],"tags":[242],"class_list":["post-13165","post","type-post","status-publish","format-standard","hentry","category-debugging","category-httpwatch","tag-httpwatch"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/13165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=13165"}],"version-history":[{"count":66,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/13165\/revisions"}],"predecessor-version":[{"id":13365,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/13165\/revisions\/13365"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=13165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=13165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=13165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}