C#

How to use Selenium automation with HttpWatch and Chrome

calendarJanuary 11, 2018 in Automation , C# , Chrome , HttpWatch

The HttpWatch automation interface provides programmatic control of HttpWatch in both IE and Chrome browsers. It can be used to develop tests in almost any programming language (e.g. C#, JavaScript, Ruby, etc) that capture low level network timings, errors and other statistics generated when a web page is accessed.

However this interface only provides a basic GotoURL method to navigate between pages. If your testing requires more interaction, for example submitting forms or clicking on buttons, we recommend using the Selenium automation framework. The latest HttpWatch update (version 11.1.19) includes several Selenium related improvements to make the integration even easier:

In Visual Studio you no longer the need to separately download and install Selenium. Simply add these two Nuget packages to your project:

Once you’ve done this, Selenium will be automatically downloaded and installed when you build your project. It also makes maintenance easier as Visual Studio will show you when updates to these packages are available.

Starting a session using both HttpWatch and Selenium in Chrome requires just a few simple steps. The first is creating Selenium with the HttpWatch extension installed:

Controller control = new Controller();
 
// Make sure the HttpWatch extension is enabled in the Selenium Chrome session by referencing the CRX file
// e.g. C:\Program Files (x86)\HttpWatch\HttpWatchForChrome.crx
// The HttpWatchCRXFile property returns the installed location of the CRX file
var options = new ChromeOptions();
options.AddExtension(control.Chrome.HttpWatchCRXFile);
 
// Start the Chrome browser session
var driver = new ChromeDriver(options);
 
// Goto blank start page so that HttpWatch recording can be started
driver.Navigate().GoToUrl("about:blank");

The new HttpWatchCRXFile property saves you having to hard code a path to the HttpWatch installation on your PC.

The next step is attaching HttpWatch to the instance of Chrome created by Selenium. This is achieved by setting a unique page title and then calling the AttachByTitle method:

// Set a unique title on the first tab so that HttpWatch can attach to it
var uniqueTitle = Guid.NewGuid().ToString();
driver.ExecuteScript("document.title = '" + uniqueTitle + "'");
 
// Attach HttpWatch to the instance of Chrome created through Selenium
Plugin plugin = control.AttachByTitle(uniqueTitle);

Once everything is setup you can use Selenium methods to interact with controls on the page and HttpWatch methods to control recording and lookup the required network level data or timings:

driver.Navigate().GoToUrl(url);
 
// Start recording now that page containing the form is loaded
plugin.Log.EnableFilter(false);
plugin.Clear();
plugin.Record();
 
// Put 200 in the amount field
driver.FindElement(By.Name("Amount")).Clear();
driver.FindElement(By.Name("Amount")).SendKeys("200");
 
// Click on the submit button
driver.FindElement(By.Name("B2")).Click();
 
Console.WriteLine("\r\nClicked on submit button...");
 
// Use the HttpWatch Wait call to ensure HTTP activity has ceased
control.Wait(plugin, -1);
 
// Stop recording HTTP
plugin.Stop();
 
// Read the updated account balance back from the page
string accountBalance = driver.FindElement(By.Id("balanceSpan")).Text;
 
if (plugin.Log.Pages.Count != 0)
{
    Console.WriteLine("\r\nPage Title: '" + plugin.Log.Pages[0].Title + "'");
    Console.WriteLine("\r\nNew account balance: " + accountBalance );
    Console.WriteLine();
 
    // Display summary statistics for page
    Summary summary = plugin.Log.Pages[0].Entries.Summary;
    Console.WriteLine("Total time to load page (secs):      " + summary.Time);
    Console.WriteLine("Number of bytes received on network: " + summary.BytesReceived);
    Console.WriteLine("HTTP compression saving (bytes):     " + summary.CompressionSavedBytes);
}
 
// Need to use Selenium Quit to correctly shutdown Selenium and browser
driver.Quit();

You can read more about the Selenium and Chrome sample code in the HttpWatch Automation documentation.

Tags: , , ,

Automated Page Load Testing With Chrome and HttpWatch 1.1

calendarDecember 12, 2017 in Automation , C# , Chrome , HttpWatch

HttpWatch added Chrome support earlier this year and with version 11.1 it now also supports the use of Chrome through the automation API.

In a previous blog post we covered how to measure page load times with HttpWatch for new and existing users by clearing the cache to simulate a new user. Adapting this code for Chrome is as simple as changing one line of code to use the Chrome property.

Here’s the C# code for measuring the page load time for a new user:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 11.1
//
 
using HttpWatch;                
 
namespace EmptyCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "https://www.httpwatch.com/download/";
            Controller controller = new Controller();
 
            // Create an instance of Chrome
            Plugin plugin = controller.Chrome.New();                
 
            // Clear out all existing cache entries
            plugin.ClearCache();                
 
            plugin.Record();
            plugin.GotoURL(url);                
 
            // Wait for the page to download
            controller.Wait(plugin, -1);                
 
            plugin.Stop();                
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;                
 
            System.Console.WriteLine( "The empty cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");                
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");                
 
            plugin.CloseBrowser();
        }
    }
}

And here’s the code to measure the page load time after priming the cache:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 11.1
//
using HttpWatch;               
 
namespace PrimedCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "https://www.httpwatch.com/download/";
            Controller controller = new Controller();               
 
            // Create an instance of Chrome
            Plugin plugin = controller.Chrome.New();               
 
            // Visit the page to prime the cache
            plugin.GotoURL(url);
            plugin.Record();
            controller.Wait(plugin, -1);               
 
            // Shutdown Chrome and create a new instance
            plugin.CloseBrowser();
            plugin = controller.Chrome.New();               
 
            plugin.Record();               
 
            // Visit the page a second time with the cache primed
            plugin.GotoURL(url);
            controller.Wait(plugin, -1);               
 
            plugin.Stop();               
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;               
 
            System.Console.WriteLine( "The primed cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");               
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");               
 
            plugin.CloseBrowser();
        }
    }
}

By default the Chrome.New() method creates a new tab in the official release of Chrome installed on your PC but by passing a Chrome channel name you can also use other installed versions:

// Create an instance of Chrome (Beta channel)
Plugin plugin = controller.Chrome.New("Beta");

There’s more information available in the documentation for the New method.

Tags: , ,

Using HttpWatch to Measure Page Load Times for New and Existing Users

calendarMay 14, 2008 in Automation , C# , Caching , HttpWatch , Internet Explorer , Optimization

If you’re tuning a web page’s performance there are two types of visitors that you need to be concerned about:

  1. A new visitor to your site who won’t have any of your pages, scripts, CSS or images in their browser cache.
  2. An existing user of your site who will have your cacheable pages, scripts, CSS or images in their browser cache.

Visitor type 1) is said to be in the Empty Cache state and Vistor type 2) is said to be in the Primed Cache state. Optimizing for visitors with an empty cache is important as their initial impressions of your site will be affected by how quickly its pages are loaded.

The performance of any page is never going to worse for visitors with a primed cache, but minimizing the load on your site caused by existing users through the use of effective caching will reduce your bandwidth costs and server load.

Your can manually simulate these two scenarios with HttpWatch. For example, you could run an Empty Cache test on our home page (www.httpwatch.com) using these steps:

  • Open a HttpWatch in IE and click on Tools->Clear Cache or use the keyboard shortcut Alt+C. If you haven’t cleared your browser cache recently this could take a few minutes:
    Clear Cache
  • Click on Record and go to www.httpwatch.com
  • HttpWatch will then display a time chart with the page load time:
    Empty Cache Test

To run the Primed Cache test you would first need to ensure that the page has already been visited and then re-visit it in a new instance of IE. You shouldn’t re-use the same instance of IE because there may some images held in memory from the first visit to the page. To perform the Primed Cache test you would need to:

  • Visit www.httpwatch.com in IE to prime the cache
  • Close down IE and start a new instance
  • Open HttpWatch and click on Record
  • Go to www.httpwatch.com
  • HttpWatch will then display a time chart with the page load time:
    Primed Cache Test

Of course, with a test like this you really want to run it automatically. The HttpWatch Automation interface (document in the HttpWatch Help file) allows you to do this in a few lines of code. Here’s the code in C# for the Empty Cache test:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 6.x
//
 
using HttpWatch;                
 
namespace EmptyCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "https://www.httpwatch.com/download/";
            Controller controller = new Controller();
 
            // Create an instance of IE (For Firefox use
            // controller.Firefox.New("") )
            Plugin plugin = controller.IE.New();                
 
            // Clear out all existing cache entries
            plugin.ClearCache();                
 
            plugin.Record();
            plugin.GotoURL(url);                
 
            // Wait for the page to download
            controller.Wait(plugin, -1);                
 
            plugin.Stop();                
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;                
 
            System.Console.WriteLine( "The empty cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");                
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");                
 
            plugin.CloseBrowser();
        }
    }
}

and here’s the Primed Cache test. Notice how we use controller.IE.New() a second time to ensure that a new instance of IE is started:

// Set a reference to the HttpWatch COM library
// to start using the HttpWatch namespace
//
// This code requires HttpWatch version 6.x
//
using HttpWatch;               
 
namespace PrimedCacheTest
{
    class Program
    {
        static void Main(string[] args)
        {
            string url = "https://www.httpwatch.com/download/";
            Controller controller = new Controller();               
 
            // Create an instance of IE (For Firefox use
            // controller.Firefox.New("") )
            Plugin plugin = controller.IE.New();               
 
            // Visit the page to prime the cache
            plugin.GotoURL(url);
            plugin.Record();
            controller.Wait(plugin, -1);               
 
            // Shutdown IE and create a new instance
            plugin.CloseBrowser();
            plugin = controller.IE.New();               
 
            plugin.Record();               
 
            // Visit the page a second time with the cache primed
            plugin.GotoURL(url);
            controller.Wait(plugin, -1);               
 
            plugin.Stop();               
 
            // Find the load time for the first page recorded
            double pageLoadTimeSecs =
                plugin.Log.Pages[0].Entries.Summary.Time;               
 
            System.Console.WriteLine( "The primed cache load time for '" +
                url + "' was " + pageLoadTimeSecs.ToString() + " secs");               
 
            // Uncomment the next line to save the results
            // plugin.Log.Save(@"c:\temp\emptytestcache.hwl");               
 
            plugin.CloseBrowser();
        }
    }
}

BTW, everything we’ve mentioned in this blog post works with the free Basic Edition of HttpWatch as well as the Professional Edition.

Tags: , , ,

Ready to get started? TRY FOR FREE Buy Now