Wait, How Browsers Work?

when we type a URL in the browser, and hit Enter, what happens behind scene?

  • First,the browser will retrieve the file specified by your URL. This html file instructs the browser on extended requirements: images, scripts, external stylesheets etc.
  • Then multiple requests to server(s) for images, scripts, css file etc. i.e. parallel downloading of data.
  • Browser’s rendering engine( AKA layout engine) then begin to render the page to display the requested contents on the browser screen

    Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit. This is why web application can behave differently in different browsers.

    The rendering flow is like this:

    Besides rendering engine, there is another engine: JavaScript engine, which interprets/executes javaScripts on the page. And JavaScript is the major role on the client-side to make our page dynamic, thus causing a lot of trouble for us automation engineers!

For automation, we are especially interested in an element’s journey in browser and the nuisance javaScript /Ajax have for the display of them. To be more specific, we as automation engineers really care:

A Web Element’s Journey to Debutante
An element could be in any of the following states before it is displayed on screen:

Element Status findElement() result If try to interact with it
(click, sendKey, moveTo..)
Still on the way to the browser Throws NoSuchElementExeption Got exception
In the DOM, but not visible yet
(Could be hidden, not displayed, or not in the viewport)
Will return the element fine Throws exception
In the DOM, browser still rendering it Will return the element fine Throws exception
Visible but not enabled Good Throws exception
Visible and enabled Good Good

javaScript’s Nuisance on the Display of Web Elements
When an element finally makes it onto browser screen, it is finally the time for us automation engineers to invite the element to dance and enjoy the party! However, this doesn’t mean that the element is going to be ever-present and available for our automation to interact with!

  • An Ajax call could make this element stale and totally replaced by a new one. And all this happens in silence!
  • Javacript can delete the element, make it hidden, or move it around, covers it with another layer of element such as a popup, a running preroll. It could be just disappear in a blink of an eye!

This is so called ‘dynamism’ of web page. We automation engineers shall understand all these tricks javascript/ajax plays on the page and handle it properly

Helpful reading: Detailed description on How Browser Works:
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/