1. How DOM Records Page Ready State
- 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
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.
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();
ChromeDriver driver = new ChromeDriver("C:\\WebDriver\\bin", options);
Screenshot screenshot = (driver as ITakesScreenshot).GetScreenshot();
// Eager case screenshot.SaveAsFile("two.png", ScreenshotImageFormat.Png);
// None case screenshot.SaveAsFile("three.png", ScreenshotImageFormat.Png);
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.
1. Browser records the DOM.readyState which could be complete, uninitialized, interactive, 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