Measure and Optimize Page Load Time With Selenium

Automation Testing To Measure Page Load Time With Selenium

You can make use of Selenium to measure the performance of a web page over a period of time. The results that are obtained from the Navigation Timing API can be further used to improve the page load time with Selenium testing and also benchmark those results against your competitors’ web performance. Though there would be visible differences between the home page & functionalities provided by two websites/web-apps (solving a similar problem), it is still important that the page load speed is equal (if not better) than your competition.

Along with tracking & benchmarking the web-page performance, Selenium can also be used to log the statistics of the page to come up with improvements on the client-side. As far as the server side is concerned, major performance improvement can be obtained by making use of the right kind of infrastructure.

Example 1 – Capturing Statistics Of A Web-Page Timings With Navigation Timing API

Let’s have a look at an example where Python is used along with the Selenium framework to capture important statistics about the web-page (e.g. lambdatest.com). It is an example that you can use to get started to measure page load time in Selenium.

''' Loosely based on the example code in http://www.obeythetestinggoat.com/
how-to-get-selenium-to-wait-for-page-load-after-a-click.html
'''
'''
Import the necessary packages required for execution
'''
from selenium import webdriver

''' Chrome web driver interface
'''
hyperlink = "http://lambdatest.com"
driver = webdriver.Chrome()
driver.get(hyperlink)

''' Use Navigation Timing  API to calculate the timings that matter the most '''   
 
navigationStart = driver.execute_script("return window.performance.timing.navigationStart")
responseStart = driver.execute_script("return window.performance.timing.responseStart")
domComplete = driver.execute_script("return window.performance.timing.domComplete")

''' Calculate the performance'''
backendPerformance_calc = responseStart - navigationStart
frontendPerformance_calc = domComplete - responseStart
 
print("Back End: %s" % backendPerformance_calc)
print("Front End: %s" % frontendPerformance_calc)
 
driver.quit()

To start with, an instance of Chrome web-driver is created and the web page under test is opened in the browser. We make use of Performance Timing API to obtain the amount of time spent in each event from the time the request was made from the browser. The execute_script option is used to synchronously execute JavaScript code in current window/frame.

For the demo, we have used the following metrics:

• navigationStart – This attribute returns the time spent after the user agent completes unloading the previous page/document. If there was no document prior to loading the new page, navigationStart returns the same value as fetchStart.
• responseStart – This attribute returns the time as soon as the user-agent receives the first byte from the server or from the local sources/application cache.
• domComplete – This attribute returns the time just before the current document/page readiness is set to ‘complete’. document.readyState status as ‘complete’ indicates that the parsing of the page/document is complete & all the resources required for the page are downloaded. We will have a look an example of domComplete in subsequent section.

window.performance. timing.navigationStart, window.performance.timing.responseStart, and window.performance. timing.domComplete are the Timing Navigation options which are passed as arguments to execute_script() API. The measurement of time is in milliseconds (ms).

We have used Eclipse as the IDE for development & testing of the test code. In order to execute the code, press (CTRL + F9) from your Eclipse IDE. Below is the output once the above code is executed, the output shows the time spent in the front-end & back-end activities of the web-page.

Example 2 – Using WebDriverWait Interface For Element Search On A web-page

We have a look at another example where we load a web-page and search for the presence of an element (div-id) in the page. We search for the div-id for timeout duration of 5 seconds. Once the page is loaded, div-id (in our case: owl-example) is searched for 5 seconds, after which an exception is raised if the owl-example div-id is not present on the web-page. All the necessary modules are imported at the start of the implementation.

from selenium import webdriver
from selenium.common.exceptions import TimeoutException
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

''' Create a Chrome webdriver instance''' 
driver = webdriver.Chrome()
#driver = webdriver.Firefox()

''' Open the webpage under test'''
driver.get('http://lambdatest.com')
timeout = 5

''''' Test case 1 - The required div-id is not present on the web-page ''''' 
#while True:
try:
    element_present = EC.presence_of_element_located((By.ID, 'owl-example-1'))
    WebDriverWait(driver, timeout).until(element_present)
    print("1 - Element is present on the page")
#        break
except TimeoutException as ex:
    print("1 - Timed out waiting for page to load " + str(ex))
#        break

''''' Test case 2 - The required div-id is not present on the web-page '''''
#while True:
try:
    element_present = EC.presence_of_element_located((By.ID, 'owl-example'))
    WebDriverWait(driver, timeout).until(element_present)
    print("2 - Element is present on the page")
#        break
except TimeoutException as ex:
    print("2 - Timed out waiting for page to load " + str(ex))
#        break

''' Free up the resources'''
driver.close()
driver.quit()

Like the previous example, we initialize the Chrome webdriver interface. The web-page under test is the TestMu AI homepage – lambdatest.com. The timeout duration is set to 5 seconds. There are two test-cases, details of which are mentioned below

• Test case 1 – The web-page being loaded is checked for the presence of div-id ‘owl-example-1’. Using the WebDriverWait interface, search is performed for 5 seconds. If‘owl-example-1’ is not present on the page, an exception is raised.
• Test case 2 – The test condition is same as Test case 1, except that the div-id under search is ‘owl-example’

Below is the output of the above example

As expected, the first test case fails as the div-id under search is not present on the web-page under test. The search times out after 5 seconds. On the other hand, the second test case passed since the div-id ‘owl-example’ is present on the web-page. For confirmation, please visit the HTML source of TestMu AI. (which is the page being tested)

There would be scenarios where you need to perform an operation when a webpage is loaded i.e. document.readyState status as ‘complete’. The operation could either be clicking on a hyper-link or clicking on a button or any other operation. It could be a tricky situation as there might be scenarios where few sections of webpage are loaded asynchronously using AJAX (Asynchronous JavaScript and XML) on the client side. We focus on webpage operations where a new webpage is loaded. In this section of the Selenium testing tutorial, we have a look at the mechanism that Selenium uses to check whether the complete webpage is loaded.

Example 3 – Detection Of Page Load Completion With pytest & Selenium

Selenium has an in-built condition called staleness_of and its own wait_for implementation. staleness_of is the element of the selenium class selenium.webdriver.support.expected_conditions. staleness_of will wait until an element is not attached to the DOM. Below is the implementation of the class

class selenium.webdriver.support.expected_conditions.staleness_of(element)

element is the actual element on the webpage to wait for. It returns False if the element is attached to the DOM, else it returns True. We will make use of the pytest framework which we have already covered in earlier blogs. In the below example, @contextmanager is used which aids in allocating & releasing necessary resources when required.

''' Import the 'modules' that are required for execution '''
''' In this example, we make use of pytest framework along with Selenium '''
import pytest
import pytest_html
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from time import sleep
from contextlib import contextmanager
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.expected_conditions import     staleness_of

@pytest.fixture(params=["chrome"],scope="class")
def driver_init(request):
    if request.param == "chrome":
        web_driver = webdriver.Chrome()
    request.cls.driver = web_driver
    yield
    web_driver.close()

@pytest.mark.usefixtures("driver_init")
class BasicTest:
    pass
class Test_URL(BasicTest):
        def test_open_url(self):
            self.driver.get("https://www.lambdatest.com/")
            print(self.driver.title)
            sleep(5)

        @contextmanager
        def wait_for_page_load(self, timeout=30):
            #Search for the div-id owl-example
            old_page = self.driver.find_element_by_id('owl-example')  
            yield
            WebDriverWait(self.driver, timeout).until(
                staleness_of(old_page)
            )
        
        def test_click_operation(self):
            # Wait for a timeout duration of 10 seconds, after which we perform a CLICK operation
            with self.wait_for_page_load(timeout=10):
                self.driver.find_element_by_link_text('FREE SIGN UP').click()
                print(self.driver.execute_script("return document.readyState"))

In wait_for_page_load(), search for the div-id owl-example is performed. WebDriverWait is used in combination with ExpectedCondition to achieve Explicit Wait condition. The driver and timeout are passed as arguments. We wait until the element gets stale. In case the element being searched i.e. owl-exampl’ is not present, a TimeoutException is thrown. This is how we check for the staleness of the element.

In test_click_operation(), the webpage lambdatest.com is loaded after which a wait for the maximum duration of 10 seconds is performed. It uses wait_for_page_load() to check whether the element owl-example on the webpage is not stale. Once the webpage is loaded within the timeout, we check if there is an element which has link text FREE SIGN UP which is a button that is hyperlinked to the registration page. Finally, we check the status of web page/document using the Document.readyState property. When the value of this particular property changes, a readystatechange event is fired on the document object.

The three possible states are loading, interactive, and complete. Document.readyState achieves the state as complete if the webpage/document & its dependent resources have finished loading. In our example, if the page is loaded completely, a button click is performed which eventually takes us to the TestMu AI registration page

For execution, py.test command is used with verbose enabled and –capture set to no

Depending on the target market and the browser that is responsible for bringing you the most traffic, you should create a cross browser testing matrix to perform cross browser testing in an organized manner. Cross browser testing of your product would help you with the findings of valuable test cases which can further be used for improving the page-load times. Rather than creating a local infrastructure to do these tests, you can make use of TestMu AI which offers scalable cross browser testing tool on the Cloud.