pageLoadStrategy in Selenium

I assume by now a lot of the QA engineers would be familiar by the fact the Selenium has released the version 4.x.x of the famed Selenium framework. There has been a lot of talk about that and a lot of content creators have posted some very good content on the changes that have been incorporated.

One of the changes that have been incorporated is that there has been an introduction of pageLoadStrategy in Selenium 4. One of the features that Selenium has since v2.46 is the pageLoadStrategy. This is one of the new browser options that is available to use in Selenium – and it is common and available across all browsers – as evident from this documentation.

Let’s discuss what this is and how it can be used.

pageLoadStrategy

page load strategy comes intro picture when you are launching the web page in Selenium – either by using the get() method or the navigate().to() method.

So what happens when you hit

driver.get("https://google.com") #code is in Python

As soon as this method is executed, it initiates this chain of events –

• The browser in question gets the request to initiate the loading of the url mentioned in the get() method.
• The browser in question ( or so every browser) supports the document.readyState property of js document. So browser queries about the state of document.readyState.
• The browser checks the loading state of the document- which is given by the document.readyState property.
• Selenium in this time will keep waiting for the status of the document.readyState
• As soon as the browser gets the status of complete – which is a status returned by document.readyState, it informs Selenium.
• Be default, Selenium waits for this complete state to be reached. WebDriver will hold off on completing a navigation method like get() etc, until the complete state is reached.
• When this state is reached, it means that the navigation is complete for Selenium.

However, it is imperative to know that this doesn’t mean that the page is loaded completely. Also this chain of events is not implied when navigation happens as a result of clicking an element or submitting a form.

Woah! What’s all that ????

Yes. It can be a bit overwhelming. So let’s discuss first each thing one by one – what the heck is document.readyState?

document.readyState

This has been directly picked from the Mozilla Dev Network about document.readyState

The Document.readyState property describes the loading state of the document. When the value of this property changes, a readystatechange event fires on the document object.

I think this statement is pretty self-explanatory. The readyState property of the document objects denotes the current state of the document (document.readyState tells us the status of the page load).

There are 3 different possible states:

loading

In this state, the document is constructing its elements- which means it has not done with parsing of the dom elements.

interactive

In this state, the DOM is loaded and accessible. If the readyState is interactive, then the DOM is loaded, but resources like script, img, and css files will still be downloading. The DOMContentLoaded event is also fired when the readyState changes from loading to interactive. Once the state is interactive, we can access the DOM elements

complete

When readyState is changed to complete, it means that the document is now parsed and loaded, and all known additional resources like CSS, images, and JS have also been parsed and loaded. The state indicates that the load event is has been fired.

How it corresponds to pageLoadStrategy?

In the Selenium’s pageLoadStrategy, there are three accepted values that actually correspond to the states from the document.readyState

The pageLoadStrategy values for the WebDriver are –

• normal
• eager
• none

Let’s discuss about each one of these values

normal

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service

options = Options()
options.page_load_strategy='normal'
svc=Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=svc,options=options)
driver.set_window_size(1400,900)
driver.get("https://amazon.in/")

driver.quit()

When set to normal the pageLoadStrategy will make Selenium wait until the readyState property returned complete and the load even is fired. This means that the page is completely loaded – including the additional resources like stylesheets,images etc. Please keep in mind that it does not necessarily mean that the page has finished loading, especially for sites like Single Page Applications that use JavaScript to dynamically load content after the Ready State returns complete [ taken directly from Selenium’s documentation.

eager

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service

options = Options()
options.page_load_strategy='eager'
svc=Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=svc,options=options)
driver.set_window_size(1400,900)
driver.get("https://amazon.in/")

driver.quit()

When the pageLoadStrategy is set to eager, then the Selenium will wait only until the initial HTML document has been completely loaded and parsed, and discards the loading of stylesheets, images, and subframes. Webdriver waits only until the DOMContentLoaded event is fired in this case.

none

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service

options = Options()
options.page_load_strategy='none'
svc=Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=svc,options=options)
driver.set_window_size(1400,900)
driver.get("https://amazon.in/")

driver.quit()

When pageLoadStrategy is set to none, Selenium webdriver will only wait for the initial page load to happen. It will not block the webdriver flow at all.

Try running the above three scripts and you will see the difference in how the flow is a bit different in the three cases.

Why do I need it.

This may be useful to work when you have to test different scenarios – there may be scenarios where you do not want to wait for the long wait times due to the images loading or specific JS calls on the page to happen, so at that time, you can use the different strategies from the pageLoadStrategy.

Please let us know if you’re using this pageLoadStrategy somewhere in your tests – I would love to know more about the use cases.