Scribd Logo
Upload

Welcome to Scribd!

  • 45 views

    BrowserArchitecture ClientSide

    Uploaded by

    vivek
    The document discusses browser architecture and testing across different browsers. It explains that browsers have components like the user interface, browser engine, rendering engine, JavaScript interpreter, and data persistence. The rendering engine parses HTML, constructs the DOM tree, performs layout, and painting. Cross-browser testing checks compatibility across browsers to ensure correct behavior. Client-side testing focuses on execution within browsers by disabling JavaScript or intercepting requests. The document provides tips on setting up cross-browser environments and tools for client-side validation and bypass testing.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    BrowserArchitecture ClientSide

    Uploaded by

    vivek
    45 views59 pages
    The document discusses browser architecture and testing across different browsers. It explains that browsers have components like the user interface, browser engine, rendering engine, JavaScript interpreter, and data persistence. The rendering engine parses HTML, constructs the DOM tree, performs layout, and painting. Cross-browser testing checks compatibility across browsers to ensure correct behavior. Client-side testing focuses on execution within browsers by disabling JavaScript or intercepting requests. The document provides tips on setting up cross-browser environments and tools for client-side validation and bypass testing.

    Original Description:

    BACK

    Original Title

    BrowserArchitecture_ClientSide

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses browser architecture and testing across different browsers. It explains that browsers have components like the user interface, browser engine, rendering engine, JavaScript interpreter, and data persistence. The rendering engine parses HTML, constructs the DOM tree, performs layout, and painting. Cross-browser testing checks compatibility across browsers to ensure correct behavior. Client-side testing focuses on execution within browsers by disabling JavaScript or intercepting requests. The document provides tips on setting up cross-browser environments and tools for client-side validation and bypass testing.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    45 views59 pages

    BrowserArchitecture ClientSide

    Uploaded by

    vivek
    The document discusses browser architecture and testing across different browsers. It explains that browsers have components like the user interface, browser engine, rendering engine, JavaScript interpreter, and data persistence. The rendering engine parses HTML, constructs the DOM tree, performs layout, and painting. Cross-browser testing checks compatibility across browsers to ensure correct behavior. Client-side testing focuses on execution within browsers by disabling JavaScript or intercepting requests. The document provides tips on setting up cross-browser environments and tools for client-side validation and bypass testing.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 59

    HELLO!

    I am Sang Bui
    I am here because I want to learn

    E: [email protected]
    S: thanhsang.skype
    W: sangbui.com
    L: https://vn.linkedin.com/in/buithanhsang
    1. BROWSER ARCHITECTURE

    2. CROSS BROWSER TESTING

    3. CLIENT SIDE BYPASS TESTING


    ABOUT MY CURRENT PROJECT

    “Testing multiple browsers on


    multiple platforms”
    LAYOUT DEFECT
    FUNCTION DEFECT
    FUNCTION DEFECT
    https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2
    f%2fwww.abglobal.com%2fdefined-contribution%2fus%2finside-
    the-minds-of-plan-participant.htm&title=I took AB’s Investor
    Survey and found out I am a CAPABLE, CONFIDENT
    INVESTOR&summary=AB queried over 1,000 US workers to help
    understand their behavior and attitude toward investing for
    retirement. Some of the results were surprising. Take the survey
    yourself and find out what type of investor you are.
    WHAT IS THE DIFFERENCE
    BETWEEN THESE BROWSERS?
    BROWSER
    ARCHITECTURE
    WHAT’S THE BROWSER?
    The browser main functionality is to
    present the web resource you choose,
    by requesting it from the server and
    displaying it on the browser window.
    The resource format is usually HTML
    but also PDF, image and more.
    WHAT’S THE BROWSER?
    BROWSER ARCHITECTURE

    User Interface

    Data persistence
    Browser Engine

    Rendering Engine

    JavaScript Display
    Networking
    Interpreter Backend

    Dependency
    USER INTERFACE
    The space where interaction between users and
    the browser.
    Most of the browsers have common inputs for
    user interface:
    • Address bar.
    • Next and back buttons.
    • Buttons for home, refresh and stop
    • Bookmark web pages
    • …etc.
    BROWSER ENGINE

    The bridge between


    User Interface & Rendering Engine

    User Interface

    Browser Engine

    Rendering Engine
    BROWSER ENGINE
    Browser Engine provides methods to begin
    the loading of URL and other high-level
    browsing actions.
    - Reload, Back, Forward actions
    - Error messages
    - Loading progress
    RENDERING ENGINE
    Rendering Engine interprets (render) the HTML,
    XML, JavaScript and generates the layout that
    is displayed in the User Interface.
    Key component of this phase is HTML, CSS
    parse.
    This is a reasons why the browser display a
    website so difference.
    NETWORKING
    Access and transfer data on the internet
    (calls HTTP, HTTPS, FTP).
    The Networking components handles all
    aspects of internet communication or
    security.

    JAVASCRIPT INTERPRETER
    Component parse & executes the JavaScript
    that is embedded in the website.
    Results of the execution a passed to the
    Rendering Engines for display.
    DISPLAY BACKEND
    Display common UI components.
    Drawing basic widgets like combo boxes,
    windows.

    DATA PERSISTENCE
    Storing the data on the client side.
    - Cookies.
    - Cache.
    LOOK BACK AGAIN!

    User Interface

    Data persistence
    Browser Engine

    Rendering Engine

    JavaScript Display
    Networking
    Interpreter Backend

    Dependency
    FIREFOX ARCHITECTURE
    CHROME’S ARCHITECTURE
    IE ARCHITECTURE
    THE RENDERING ENGINE
    Different browser use different
    rendering engines
    THE BASIC FLOW OF
    RENDERING ENGINE
    1. Parsing HTML to construct the DOM
    2. Render tree construction
    3. Layout of the render tree
    4. Paint the render tree
    1. HTML PARSER DOINGS

    Parses input HTML tag


    Fixes developer mistakes
    Request to load resource
    Constructs DOM tree
    HTML PARSER DOINGS
    <HTML>

    <BODY>

    <P> <DIV>

    Parsing HTML to construct the DOM TEXT <IMG>


    2. RENDER TREE CONSTRUCTION

    • Tree of visual elements in display order.


    • Style information, computed metrics
    • Shadow DOM tree
    RENDER TREE CONSTRUCTION
    3. LAYOUT THE RENDER TREE

    What is Layout process?


    • Calculation of geometry and position
    • Flow based model (left-to-right, top-to-
    bottom)
    • Coordinate system relative to top left
    coordinates
    4. PAINTING
    Go through the tree from the root
    Global and Incremental paint
    Painting order (CSS2):
    – background colour
    – background image
    – border
    –…
    Changes style will cause restyle and repaint of
    the element. Changes of position will cause re-
    layout and repaint.
    LOOK BACK THE BASIC FLOW!
    WEBKIT main flow

    Mozilla's Gecko
    DIFFERENT BROWSER USE
    DIFFERENT RENDERING ENGINES
    IN DIFFERENT WAYS
    QUIZ
    PARSING HTML TO CONSTRUCT THE DOM
    <HTML>

    <BODY>

    <IMG> <P> <DIV>

    SRC Text <P>

    Text
    CROSSING BROWSER TESTING
    • Cross browser testing is a process to test
    the web application across multiple browsers.

    • Check compatibility of web in multiple


    browsers & make sure that web application
    works correctly.

    • Involves testing both client side and server


    side behavior of application.
    TEST THE WEB
    APPLICATION ACROSS
    MULTIPLE BROWSERS?
    EXHAUSTIVE TESTING

    Exhaustive Testing (Test everything) is Impossible.


    Instead of exhaustive testing, Risk analysis and
    Priorities should be used to focus testing efforts.

    Based on:
    - Know your audience
    - Decide the platform you will support
    - How much you can test
    - Trending
    TRENDING
    HOW TO SET UP A ENVIRONMENT
    VirtualBox: Modern.ie:
    (Support IE6 – MS Edge)
    https://www.virtualbox.org/wiki/Downloads
    https://dev.modern.ie/tools/vms/windows/

    IE Tab: Chrome & Firefox. Support IE 7,8,9


    Tools:
    • www.browseemall.com
    • https://crossbrowsertesting.com
    • https://saucelabs.com
    • https://www.browserstack.com
    SAFARI BROWSER
    QUIZ
    How to setup this requirements:

    Chrome latest IE Edge


    Chrome 46 IE 11
    Chrome 44 IE 10
    Firefox latest Safari latest
    Firefox 45 Android browser latest
    Firefox 43
    Firefox 42
    ANSWER

    Chrome latest
    Firefox latest
    Chrome 46 Chrome 44 Safari latest
    IE Edge
    Firefox 45 Firefox 43 Firefox 42
    Android
    IE 11 IE 10
    browser latest
    CHECK SUPPORTED CODE
    http://fmbip.com/
    http://www.browseemall.com/Compatibility/ValidateHTML
    https://www.browseemall.com/Resources
    https://html5test.com/
    https://html5test.com/compare/browser/index.html
    CLIENT-SIDE TESTING
    Hey! Wake up.
    CLIENT VALIDATION
    CLIENT SIDE TESTING
    Client-Side testing is concerned with the
    execution of code on the client, typically
    natively within a web browser or
    browser plugin.
    BYPASS CLIENT-SIDE

    • Disabling JavaScript in the browser


    • Using a browser tool (ex: Firebug)
    • Using a proxy tool like WebScarab or Tamper
    Data to intercept any submitted data and
    manipulate it before sending it on to the server.
    PRACTICE ISSUES

    • HTML input required Attribute


    • HTML input maxlength Attribute
    • Check upload file format
    • Check locked/security content

    http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required

    http://www.w3schools.com/tags/att_input_maxlength.asp

    http://demo.byonepress.com/premium/sl-wp/
    TAMPER DATA

    Download: https://addons.mozilla.org/en-US/firefox/addon/tamper-data/
    “PLAY WITH THE CLIENT-SIDE”
    REFERENCES
    https://msdn.microsoft.com/en-us/library/aa741312%28v=vs.85%29.aspx
    http://www.lxway.com/599268602.htm
    http://taligarsiel.com/Projects/howbrowserswork1.htm
    http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
    https://lab.cs.ru.nl/laquso/Reliability_of_Google_Chrome
    http://sangbui.com/thong-ke-trinh-duyet-su-dung-o-viet-nam/
    http://blog.kloud.com.au/2014/05/02/cross-platform-testing-myths-vs-
    mysteries/
    https://www.owasp.org/index.php/Client_Side_Testing
    THANK YOU

    Q&A

    You might also like