Book Excerpt - Science of Selenium - Ch-5 Introduction to WebUI Automation using Selenium

Book Excerpt - Science of Selenium - Ch-5 Introduction to WebUI Automation using Selenium

Kalilur Rahman Kalilur Rahman

Kalilur Rahman

Director @ Novartis | Technology Transformation Leader| Author | Ex-Accenture/Cognizant/TCS | Life Long Learner | Quizzer | Mentor | Speaker | Influencer | Operations | Consulting | Quality Engineering

发布日期: 2020年2月15日
+ 关注

Dear All

Using this forum to share some excerpts to raise the interest levels of the book I wrote and published through BPB Publications. I will share some excerpts every week to get your inputs and suggestions for future work.

This week, I am focusing on the Chapter 5 - Introduction to WebUI Automation using Selenium. This covers the following aspects

Table of Contents

Chapter 5 discusses the Web UI automation using Selenium by understanding various options for testing the Web UI. This chapter covers HTML, CSS, DOM, JavaScript and their correlation with Selenium. It also covers various types of browser coverage and options for building a true cross-browser testing experience.

Chapter 5 Introduction to Web UI Automation Using Selenium


“If you automate a mess, you get an automated  mess.”
- Rod Michael

So far, we learned about the importance of automation, what Selenium can deliver to help us with automation. In this chapter, we will cover the Web UI Automation using Selenium by understanding the various components that make up a web UI and various options for testing the Web UI. This section will cover Hyper Text Mark- up Language (HTML), Cascading Style Sheets (CSS), the Document Object Model (DOM), and JavaScript and correlation. To do good automation, it is important to know the relationship between UI components, Selenium API, and various types of browsers. This chapter targets to demystify these doubts and give some good examples to leverage the power of the Web UI to perform   seamless automation

Objective

Understanding of the web UI architecture and understanding of various components and elements that make up the web application is an important aspect of web application automation using Selenium.

In this chapter, we will cover thecore aspects to a great extent in detail. They include HyperText Markup Language (HTML), usage of Cascading Style Sheets (CSS) and the Document Object Model (DOM) that shows how content rendersand interacts within a web application, including actions performed by the  user.

For automation using Selenium, an automation specialist needs to understand the Document Object Model that can be mapped to a Page Object Model for object- oriented program-based automation. The automation engineer also needs to have skills to locate various web elements, choose the selectors in the web UI, customize various IDs and elements in a page, designa mechanism to handle events, and take care of asynchronous interactions.

The other aspects the engineerneeds to take care of would be the styling of web elements, management of the DOM and simulation of screen sizes across browsers, desktop or mobile configurations to make sure the application works well. The objective of this chapter is to address all these points as outlined in the preceding Structure.

Components of the Web UI

The user interface design is a very important concept in software design. Good software products have very good user interface designs. Similarly, web pages, sites or applications have user interface elements that permit functional and technical capabilities to be leveraged, a visual representation of the user interface and security elements to be implemented for application features. Typically, any UI design has four major components to be leveraged. They are as  follows:

  • Input Control Elements
  • Navigational Elements
  • Informational Elements
  • UI Containers

The user interface of a web page, site or a web application uses more or less standard elements outlined by various global bodies. Some of the types of UI elements include the following:

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image

The HTML elements highlighted in the preceding image can be represented as follows:

  • Document: This is the root element.
  • Each document may have presentation elements in the form of Cascading Style Sheets (CSS) or a JavaScript Code.
  • Each HTML document will be having the HTML Document Elements in the form of tags starting with an <HTML> element.
  • Each HTML element contains a <HTML> element and the <HTML> element will have a <HTML> element as a sub-element in the HTML document.
  • Each HTML element will then contain a <BODY> element that can have the following HTML elements:

A link in the form of the <a> element that may have a link reference attribute such as the "<href>" attribute followed by a URL or link path in the form of a "Link Text" Text.

Aheader element with a <h1> tag.

Other Elements in <BODY>.

The list of HTML 5 tags include the following. Some of the tags are obsolete in HTML 5 such as <applet> that arereplaced by <object> and <basefont>, <big>, <center>, <font>, <s>, <strike>, <u> have been replaced by CSS-based styling options. All these tags are important to know while doing automation programs in Selenium:

<a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> to <h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output><p> <param> <pre> <progress> <q><script> <section> <select> <small> <source><span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td><textarea> <tfoot> <th> <thead> <time><title> <tr> <track> <tt> <u><ul> <var> <video> <wbr>

...
...
...
...
INTENTIONALLY LEFT BLANK
...
...
...
...
INTENTIONALLY LEFT BLANK
...
...
...
INTENTIONALLY LEFT BLANK
...
...
...
INTENTIONALLY LEFT BLANK
...
...
...
INTENTIONALLY LEFT BLANK
...
...
...

Headless Browser Testing

Headless browser testing offers a lot of benefits to the automation programmer.    The concept is like this. A webdriver instance is created and run in the background. This is very useful for validating programs that don’t mandate many variants of user behavior. Headless browser testing permits the automation suite to be executed any time of the day like a batch program as a browser invocation is not needed in the system. The developer can work on other tasks in parallel while the background execution is going on, and thus a productivity enhancement is a direct benefit. Human intervention-related test failure avoidance, increased the memory consumption avoidance are two additional benefits we can  derive.

In general, headless browsers consume fewer resources and thus are faster than typical browser-based test automation. A headless browser script is good where static content needs to be captured like a web scraping or web applications which needs minimal user interactions. We can also run a good application monitoring programs using a headless browser especially, if we want to capture the performance of the browser, background processes, etc. Common features like capturing a screenshot are all feasible with the headless browser just like in a regular webdriver-based application.

A few disadvantages are as follows. Firstly, we are not emulating the real end-user behavior, and hence it is better to avoid it for testing web apps with multiple types  of user experience and behavior. Secondly, as the testing is backend, some of the user experience elements and cosmetic issues are difficult to find, unless a human checks the screenshots captured through a headless browser test outcome. Finally, most of the headless browser drivers are open-sourced and do not have similar support or backing like the Selenium tool itself so there is a chance for lack of support in the long run. In spite of all these aspects, headless browser testing is a widely used and  a successful phenomenon.

Now, let us see an example of Headless Browser Testing with PhantomJS Driver. To run this program, you need to download the PhantomJS driver and the jar files and configure them in your IDE under the library path of the project. Once configured, we can create a simple path by setting the Driver file (Phantomjs.exe) path and creating a new instance of PhantomJSWebDriver. Please note that PhantomJS is deprecated in 2017 and is planned to be taken out when Selenium 4.0 is launched. The rest of the code is similar to any other webdriver-based test execution. For example, we are running a simple search on the Bing Search engine. Let us see the  code:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.phantomjs.PhantomJSDriver;


import java.io.File;


public class Ch5_Prog_3_Headless_Browser_PhantomJS_Example {
    public static void main(String[] args) throws InterruptedException {
        //Set the path of the PhantomJS Driver file location
        File headlessDriverFile = new File("C:\\Selenium\\phantomjs.exe");
        System.setProperty("phantomjs.binary.path", headlessDriverFile.getAbsolutePath());
        //Create a new instance
        WebDriver driver = new PhantomJSDriver();
        //Let's start a search at Bing.com
        driver.get("https://www.bing.com");
        //Let's start a search
        ///html//input[@id='sb_form_q']
        WebElement element = driver.findElement(By.xpath("/html//input[@id='sb_form_q']"));
        element.sendKeys("Selenium");
        element.submit();
        //Let's check the Title Page and the length of the file
        System.out.println("Page title is: " + driver.getTitle());
        System.out.println("Page output length of HTML page is: " +driver.getPageSource().length());
        //Close the driver
        driver.quit();
    }
}



Conclusion
In this chapter,  we focused on the fundamentals of the web application. We understood what makes up a web application and a web page. We looked at the core elements an automation engineer needs to understand while using Selenium for automation. We got introduced to HTML, CSS, DOM, and the important elements and aspects that make up the concept. We discussed some of the core concepts of  the web browser automation such as screen size management. We got introduced   to the concepts such as headless browser testing which is very important for test automation especially, in web applications having limited user interactions or for testing the infrastructure and continuous build-related needs using automation. We also saw the various types of browsers and how to instantiate the web driver session across browsers. In the upcoming chapters, we will delve into details about the Selenium features, including programming on the top languages used for Selenium automation.
Questions
  1. What are the key architectural components of a Web  UI?
  2. What are the different locators and syntax of XPATH locators? What are the different locators and syntax of CSS  locators?
  3. Hope you enjoyed the excerpts from Chapter-5. What are your comments?
  4. How will you handle asynchronous event handlers while using locators? How is an HTML web page structure mapped? What are itskey constituents? How will you build a Document Object Model (DOM)  tree?
  5. What is CSS? What are the benefits of CSS?
  6. What is an element locator?
  7. What are the ways available to locate an element using  Selenium?
  8. How will you resize the window using Selenium? What are the benefits?
  9. What is Headless Browser Testing? What are the benefits and drawbacks of using a Headless Browser?
  10. What is a PhantomJS driver? How will you use it? What is a FluentWait()? Where will you use it?
  11. What are the differences between implicit and explicit waits in Selenium?
  12. When will you use them?
  13. What is the difference between an absolute and relative  XPath?
  14. How will you implement a custom locator function in  Selenium?
  15. What is the difference between a DOM and a Page Object Model  (POM)?

Book Availability
The book is available at the following sites
Note:-
Title Images are created using CANVA tools. Authors of the quote referred where known. Most of the information shared is generic and available in various forms in the Internet. Respective trademarks are owned by corresponding firms. Opinions about tools highlighted are from a personal experience standpoint and in no way reflect the views of my current or past employers or clients.
#WhatInspiresMe #Automation #Selenium #KRPoints #TestAutomation #DevOps #AITesting #NewAgeTesting #MobileTestAutomation

                      
  
    

  
            
    
    

    

      
    

      

        
    
    
    

    


      
            

    
    
    
    
    
    


    

    
    

      

        
        

          

            

                  
                    Michael Schliebner
                  
                  
Road User Support

              
        
          

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    

      4 年
  
        

          

    
    
    
    
    
    
    
    
    
    
    
    
    

      
  
      
            

            
  

    
<3 Selenium

  


            
      
          

          
        


              
                
  

    
    
    
      赞
    
  


              

                
                
                  
  

    
    
    
      回复
    
  


                
                
                  1 次回应
                
              
        

      
        

      

  
  
            

    
    
    
    
    
    


    

    
    

      

        
        

          

            

                  
                    MANUEL SCH?LLIG
                  
                  
????????  8??9?? K+ COMMUNITY? STRATEGIC PRODUCT MANAGEMENT  ?? MARKETING ENTHUSIAST    ?? 2??5?? Million Yearly Content Views ?? FOLLOW AND CONNECT ?? Do or do not - there is no try ??SMT & SEMICONDUCTOR SOLUTIONS??

              
        
          

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    

      4 年
  
        

          

    
    
    
    
    
    
    
    
    
    
    
    
    

      
  
      
            

            
  

    
Fantastic insights Kalilur Rahman

  


            
      
          

          
        


              
                
  

    
    
    
      赞
    
  


              

                
                
                  
  

    
    
    
      回复
    
  


                
                
                  3 次回应
                
              
        

      
        

      

  
  
            

    
    
    
    
    
    


    

    
    

      

        
        

          

            

                  
                    pegah dehghani
                  
                  
Msc Engineer at Stichting NIOC

              
        
          

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    

      4 年
  
        

          

    
    
    
    
    
    
    
    
    
    
    
    
    

      
  
      
            

            
  

    
for chemist

  


            
      
          

          
        


              
                
  

    
    
    
      赞
    
  


              

                
                
                  
  

    
    
    
      回复
    
  


                
                
                  3 次回应
                
              
        

      
        

      

  
  
            

    
    
    
    
    
    


    

    
    

      

        
        

          

            

                  
                    Rishad Ahmed ╰☆╮
                  
                  
Master Leadership Coach | Keynote Speaker |Author | Bringing Wisdom to Modern Leadership | 75k+ followers

              
        
          

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    

      4 年
  
        

          

    
    
    
    
    
    
    
    
    
    
    
    
    

      
  
      
            

            
  

    
awesome!

  


            
      
          

          
        


              
                
  

    
    
    
      赞
    
  


              

                
                
                  
  

    
    
    
      回复
    
  


                
                
                  1 次回应
                
              
        

      
        

      

  
  
        
        

          
            查看更多评论
          
        

    

  
      

      

    
    
    
    
    
    

    

        要查看或添加评论，请登录
    

  
  
               
    

    
    


          
            

              Kalilur Rahman的更多文章
            

         
        

      

        
          
    
    
    
    
    

      


        

            
        
      

            
        
      
      

  
  
        
      

    

  
  
          
      
        

      

      

        
        
              
    
    
    

    
      


            

              社区洞察
            



        

          
        
    
    

      
  
      
        

      

  
  
              
    
      


            

              其他会员也浏览了