Selenium Wait for Page to Load in c# | EngineerDiaries

Jan 22, 2021, 1453 Views, 1

Contents

  • How DOM Records Page Ready State
  • Page Load and Single Page Application
  • Selenium wait for page to load
  • Code
  • Output
  • Code Explanation
  • Summary
  • 1. How DOM Records Page Ready State

    You might be aware that when a web page loads browser creates a Document Object Model (DOM) of the webpage which is predominantly all the elements(HTML), attributes(CSS), and methods(Javascript) in a tree structure with them as nodes. But the webpage also loads in stages as some nodes are loaded before and some after as it is not an array, but a tree so it has to be asynchronous in nature. Document.readState hence been defined as:
    • uninitialized - Loading has not started yet by the browser
    • loading - When elements of DOM are being created
    • loaded - DOM structure is created
    • interactive - Loaded without styling
    • complete - All the components of the webpage have been loaded

    Selenium Wait for Page to Load in c# | EngineerDiaries

    2. Page Load and Single Page Application

    Let us first talk about the earlier traditional systems. So, you create a website on HTML. The first page is sent as a response from the server meaning say if engineerdiaries was on PHP, you would type in engineerdiaries.com/home and a webpage would be a part of the response. This was the process at every call of a webpage. With SPA like angular, there is a structure of website defined. Header, Footer, and a Body and that Body changes based on the route. And for the content on every webpage, there is a call to the server via an API. The advantages of SPA are faster user experience and beautiful performance. SO, here complete state would mean that the Application has been loaded successfully by the browser.

    3. Selenium wait for page to load 

    Now here comes the part of using selenium webdriver to handle the page load event as well. Here we are not using wait because selenium now has pageloadstrategy added to its library where the state of the page can be recorded. Now they have three options:
    1.Normal: Normal waits for the page to reach ready state to be complete
    2.Eager: Eager waits for the page to be interactive that is loading without CSS, but in our example when we used both the stages eager and normal gave the same result whether in SPA or PHP site.
    3.None: None just wants a response from the page and does not care if the page is loaded or not. Hence, we received a blank.

    4. Code

    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using WebApplication1.Models;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    using OpenQA.Selenium.Remote;
    using OpenQA.Selenium.Support.UI;
    using SeleniumExtras.WaitHelpers;
    using System.Net;
    using SeleniumProxyAuth;
    using SeleniumProxyAuth.Models;
    namespace WebApplication1.Controllers
    {
        public class HomeController : Controller
        {
            public IActionResult Index()
            {
                
                ChromeOptions options = new ChromeOptions();
                options.BinaryLocation = "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
                options.PageLoadStrategy = PageLoadStrategy.Normal;
                //options.PageLoadStrategy = PageLoadStrategy.Eager;
                //options.PageLoadStrategy = PageLoadStrategy.None;

                DesiredCapabilities capabilities = new DesiredCapabilities();          
                capabilities.SetCapability(ChromeOptions.Capability, options);
               
               
                ChromeDriver driver = new ChromeDriver("C:\\WebDriver\\bin", options);
                driver.Navigate().GoToUrl("https://engineerdiaries.com/");
                Screenshot screenshot = (driver as ITakesScreenshot).GetScreenshot();
                screenshot.SaveAsFile("one.png", ScreenshotImageFormat.Png);
               // Eager case screenshot.SaveAsFile("two.png", ScreenshotImageFormat.Png);
               // None case screenshot.SaveAsFile("three.png", ScreenshotImageFormat.Png);
                driver.Dispose();       
                return View();
            }
        }
    }



    5.Output

    Case:When PageLoadStrategy.Normal


    Selenium Wait for Page to Load in c# | EngineerDiaries

    Case:When PageLoadStrategy.Eager


    Selenium Wait for Page to Load in c# | EngineerDiaries

    Case:When PageLoadStrategy.None


    Selenium Wait for Page to Load in c# | EngineerDiaries

    6.Code Explanation

    1. Here we are using OpenQA.Selenium; NuGet package and chrome driver installed at C:/WebDriver/bin
    2.options.BinaryLocations is optional as ours was not picking the location of google chrome
    3.options.PageLoadStrategy to set  PageLoadStrategy  to Normal,None or Eager
    4. We are taking screenshots of the three states here to facilitate the output clearly where one.png is normal; two.png is eager; three.png is none
    5. In the end do not forget to dispose the driver.

    7.Summary

    1. Browser records the DOM.readyState which could be complete, uninitializedinteractive, etc.

    2. In SPA browser loads the entire application. Single Page Applications are Faster.
    3. Selenium Webdriver have pageloadstrategy classes with Normal=complete, eager=without css, none=without loaded webpage
    4. Same output was observed in the case of Normal and eager in both SPA and MPA

    Comments Section:

    preity

    Jun 15, 2021

    great.