Headless Browser using Selenium & Java

1. What is Headless Browser?

    Executing the tests on background without viewing the execution on any Browser that you desired to.

2. How Headless Browser helps QA?

    Helps in the executing the tests in a Non-UI mode i.e., Selenium Headless Browser

3. Is Headless Brower supports widely available Browsers like Chrome or Firefox etc?

    Latest versions of SeleniumWebDriver 3 & 4, supports headless versions of real browsers                     like Chrome, Firefox, and Edge

 4. Limitations of Headless Browser?

        1. Page load issues

        2. Sync

        3. Tracing the defects of the application

        4. UI validations like page align, background colors etc

5. How Java helps in Headless Browser?

    HtmlUnitDriver is a Java based implementation of Selenium WebDriver based on HtmlUnit, without     a GUI.

6. Headless Browser Maven Dependency!! 

    <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-htmlunit-driver -->

        <dependency>

            <groupId>org.seleniumhq.selenium</groupId>

            <artifactId>selenium-htmlunit-driver</artifactId>

            <version>2.52.0</version>

        </dependency>

NOTE: Version may vary based on the selenium version you are using.

7. Ways to implement in the Selenium Code using Java!

    1. Using HtmlUnitDriver, which is the default usage. Refer the Example 1.

    2. Using widely used browsers. Refer the Example 2.

Example 1: Using the HtmlUnitDriver()

    import org.openqa.selenium.htmlunit.HtmlUnitDriver;

     public class headlessBrowserDemo {

     public static void main(String[] args) {        

            HtmlUnitDriver htmlUnitDriver = new HtmlUnitDriver();        

            htmlUnitDriver.get("https://google.com/"); 

           System.out.println("Title of the page is = " + htmlUnitDriver.getTitle());        

        }

    }

Example 2: Using the ChromeDriver()

    import org.openqa.selenium.htmlunit.HtmlUnitDriver;

    import org.openqa.selenium.WebDriver;

    import org.openqa.selenium.chrome.ChromeDriver; 

    public class headlessBrowserDemo {

     public static void main(String[] args) {        

            System.setProperty("webdriver.chrome.driver","C:\\Users\\chromedriver.exe");

    ChromeOptions options = new ChromeOptions();

    options.setHeadless(true);

    WebDriver driver=new ChromeDriver(options);        

            driver.get("https://google.com/"); 

           System.out.println("Title of the page is = " + driver.getTitle());        

        }

    }

How to solve Stale Element Reference exception in Selenium Webdriver

What is Stale Element?

Means a Stale element points to any of the GUI Object, which is not present any more.

What is the main Cause?

When an GUI Object was in DOM initially, later point in time during that Object become stale as it might not have present in Document Object Model (DOM).

How to catch stale elements/objects?

Using StaleElementReferenceException. This exception is cuases whenever an element is not present in the DOM, or deleted.

Are there any ways to handle? Yes, below are options to resolve the Stale elements.

1.     Page refresh and verifying again for the same element/object.

2.     Implement using Exception Handling method

3.     Use the point 2 using Iteration/loop statement based on the application behavior

4.     Explicit wait

 

Example for point 1:

       //refresh page

      driver.navigate().refresh();

Example for point 2:

       WebElement staleEle = driver.findElement(By.id("UserName"));

       try{

             staleEle.sendKeys("Selenium");

          }catch(StaleElementReferenceException e){

         staleEle = driver.findElement(By.id("UserName"));

         staleEle.sendKeys("Selenium");

         }

Example for point 3:

    for(int i =0;i<=3; i++){

        WebElement staleEle = driver.findElement(By.id("UserName"));

               try{

                     staleEle.sendKeys("Selenium");

                  }catch(StaleElementReferenceException e){

             staleEle = driver.findElement(By.id("UserName"));

             staleEle.sendKeys("Selenium");

         }

}

Example for point 4: 

WebDriverWait wait= new WebDriverWait(driver, 10);

      wait.until(ExpectedConditions.presenceOfElementLocated(By.id("UserName")));

 

 

 

 

 

 

 

 

Web iFrames/Frames Handling - Selenium Web Driver

In most of the GUI applications, you might have not come across with Frames/iFrames mostly but if you are using PEGA applications then definitely you might come across with Frames/iFrames that too more than one frame without no doubt.

The challenge part here is you may be seeing the same object in more than one Frame. This is the situation where automation developer has to break once brain to automate such weird behavior of the application, I mean the complexity of the PEGA application will be like that.

Using Selenium, when Frame/iFrames appears you have to switch to Frame first, then only the specific Object on the desired page will be identified, so that you can action on the Object later on. 

Now, you will learn or get to know more in terms of Selenium code here below.

How to ensure there is a Frame/iFrame present in a web page:

Steps to ensure:

1. Click F12/Go to Developer Tools section
2. In Browser, select Ctrl+F, then find for "//iframe
3. Then you will see number of "iframes" present in the page


How to navigate to Frame/iFrame present in a web page:

Ways to switch Frame are:

1. By Index
2. By Frame Name or ID

Other information/operations on Frames

1. Handling dynamic Frame
2. Handing Child Frame (Multiple Frames)
3. Move back to Parent Frame
4. Move back to Most Parent Frame

By Index:

Examples:

driver.switchTo.frame(0); //switch to index 0
driver.switchTo.frame(1); //switch to index 1
driver.switchTo.frame(2); //switch to index 2

By Frame Name:

Examples:

driver.switchTo.frame("Frame1"); 
driver.switchTo.frame("Frame2"); 
driver.switchTo.frame("Frame3"); 

By Frame ID:

Examples:

driver.switchTo.frame("Frame123CV_0A"); 
driver.switchTo.frame("Frame123CV_1A"); 

driver.switchTo.frame("Frame123CV_2A"); 

Handling dynamic Frame:

Follow the below steps:

1. Get the total no. of Frames present in the particular web page

2. Validate your desired Object present in that web page, repeat the loop until last

3. Later, find the Frame name or Index in which the desired Object present

4. Finally, after obtaining the Frame no., switch to Frame and perform the action.

Example (Steps 1,2 & 3): To get the Frame No of the specific Object

WebElement element=driver.findElement(By.name("userName"));

int size = driver.findElements(By.tagName("iframe")).size();

for (i=0;i<size; i++){
driver.switchTo().parentFrame();

driver.switchTo().frame(i);

try{

if (element.isDisplayed())

   break;

}

catch(Exception e)

{

  e.fillInStackTrace();

}

return i;

}

Example (Step 4): Lets say above Example returned value in frameNo argument and perform the action on the Object.

driver.switchTo().parentFrame();

driver.switchTo().frame(frameNo);

return element.sendKeys("Vasu Chiluveru");  //action on the Web Element

Handling Child Frame (Multiple Frames)

Example:

driver.switchTo().frame("ParentFrameName").switchTo().frame("ChildFrameName");

Move back to Parent Frame

If you want to Move back to the parent frame use below code

driver.switchTo().parentFrame();

Move back to Most Parent Frame

If you want to Move back to most parent frame use below code

driver.switchTo().defaultContent();

Key Board Events in Selenium Webdriver

When Selenium Webdriver is being used, few times you will face challenges in handling all Key Board and even some times when using Mouse too. The alternate approach is ROBOT or ACTIONS class

Now, here you learn about Actions & Robot classes:

Example: Single Key action
Actions action = new Actions(driver);
action.sendKeys(Keys.ENTER).build().perform();

Example: Set focus to the userName object
Actions action = new Actions(driver);
driver.findElement(By.name(“userName”)).sendKeys(Keys.ENTER);

Example: Multiple Key action
Actions action = new Actions(driver);
action.keyDown(Keys.CONTROL).sendKeys("a").keyUp(Keys.CONTROL).perform();

Example: Copy entire page content (chord is being used when there is a requirement to use more than one Keys
Actions action = new Actions(driver);
driver.findElement(By.name("body")).sendKeys(Keys.chord(Keys.CONTROL, "a"));
or
Actions action = new Actions(driver);
action.keyDown(Keys.CONTROL).sendKeys("a").keyUp(Keys.CONTROL).perform();

Example: Enter input to Text Field

Actions keyin = new Actions(driver); 

keyin.sendKeys("Vasu Chiluveru", Keys.ARROW_DOWN) .build().perform();

 or

keyin.sendKeys("Vasu Chiluveru") .build().perform();

Example: Enter input to Text Field (clicking on an element first then sending the string to the application)

Actions keyin = new Actions(driver); 

WebElement userName = driver.findElement(By.xpath(xpath_expression));

keyin.sendKeys(userName,Keys.SHIFT,"Vasu Chiluveru") .build().perform();

 or

keyin.sendKeys(userName,"Vasu Chiluveru") .build().perform();

Using ROBOT - Example: Single Key action

Robot robot = new Robot();

robot.keyPress(KeyEvent.VK_CONTROL);

robot.keyRelease(KeyEvent.VK_CONTROL);

Using ROBOT - Example: Multiple Key actions

Robot robot = new Robot();

robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_A);
robot.keyRelease(KeyEvent.VK_A);

robot.keyRelease(KeyEvent.VK_CONTROL);

JavascriptExecutor - Selenium WebDriver

There are some instances during automation using Selenium you might have come across with challenges in identifying few objects of the web page due to application behavior. Hence scroll the page where you have the object or navigate the page to view the right element/object during execution time, this is one of the solutions if you see any challenges in identifying the page elements.

JavaScriptExecutor helps you to execute JavaScript through Selenium WebDriver with two methods. They are:
1. "executescript" - Executes JavaScript in the context of the currently selected frame or window in Selenium
2. "executeAsyncScript" - Your page renders more quickly

Here are few examples:

1. Scroll down
2. Scroll Up
3. Scroll the page vertically
4. Scroll to a particular element
5. Scroll at a particular coordinate
6. Scroll up in a vertical direction
7. Scroll horizontally in the right direction
8. Scroll horizontally in the left direction
9. Using Robot Class – Scroll down
10. Using Robot Class – Scroll Up
11. Wait for a while
12. Handle alerts
13. Highlight an Element
14. Get the page Title
15. Page Refresh
16. Open another URL
17. Key in Value to TextBox
18. Click Button

Scroll down:

JavascriptExecutor js = ((JavascriptExecutor) driver);

js.executeScript("window.scrollTo(0, document.body.scrollHeight);");

Scroll Up:

JavascriptExecutor js = ((JavascriptExecutor) driver);

js.executeScript("window.scrollTo(0, -document.body.scrollHeight);");

Scroll the page vertically:
JavascriptExecutor js = ((JavascriptExecutor) driver);

((JavascriptExecutor) driver).executeScript(“window.scrollTo(0, document.body.scrollHeight)”);

Scroll to a particular element:

WebElement webelement = driver.findElement(By.xpath(“//input [@name=webelement]”));
JavascriptExecutor js = ((JavascriptExecutor) driver);

((JavascriptExecutor) driver).executeScript(“arguments[0].scrollIntoView();”,webelement);

Scroll at a particular coordinate:
JavascriptExecutor js = ((JavascriptExecutor) driver);

 ((JavascriptExecutor) driver).executeScript(“window.scrollBy(400,500)”);

Scroll up in a vertical direction:
JavascriptExecutor js = ((JavascriptExecutor) driver);

((JavascriptExecutor) driver).executeScript(“window.scrollTo(document.body.scrollHeight,0)”);

Scroll horizontally in the right direction:
JavascriptExecutor js = ((JavascriptExecutor) driver);

((JavascriptExecutor) driver).executeScript(“window.scrollBy(3000,0)”);

Scroll horizontally in the left direction:
JavascriptExecutor js = ((JavascriptExecutor) driver);

((JavascriptExecutor)driver).executeScript(“window.scrollBy(-3000,0)”);

Using Robot Class – Scroll down

Robot robot = new Robot();

robot.keyPress(KeyEvent.VK_PAGE_DOWN);

robot.keyRelease(KeyEvent.VK_PAGE_DOWN);

Using Robot Class – Scroll Up

Robot robot = new Robot();

robot.keyPress(KeyEvent.VK_PAGE_UP);

robot.keyRelease(KeyEvent.VK_PAGE_UP);

Wait for 5 min
JavascriptExecutor js = ((JavascriptExecutor) driver);
js.executeAsyncScript("window.setTimeout(arguments[arguments.length - 1], 5000);"); 

Handle alerts
JavascriptExecutor js = ((JavascriptExecutor) driver);
js.executeScript("alert('Hello, Vasu Chiluveru');");
driver.switchTo().alert().accept();

Highlight an Element
WebElement uName = driver.findElement(By.name("UserName"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].style.border='6px dotted blue'", uName );

Get page Title

JavascriptExecutor js =(JavascriptExecutor) driver;
String pageTitle = js.executeScript("return document.title;").toString();
System.out.println("Page Title "+pageTitle);

Page Refresh
JavascriptExecutor js =(JavascriptExecutor) driver;
js.executeScript("history.go(0);");

Open URL
JavascriptExecutor js =(JavascriptExecutor) driver;
js.executeScript("window.location = 'https://www.google.com'");

Enter value in to TextBox
JavascriptExecutor js =(JavascriptExecutor) driver;
js.executeScript("document.getElementById('userName').value='Vasu Chiluveru'");

Click Button
JavascriptExecutor js =(JavascriptExecutor) driver;
js.executeScript("document.querySelector('#button').click()");

Need of XPath and Examples

Generally, the GUI objects will be identify by the locators id, name, class etc., however it is very difficult to identify the dynamic object on the DOM. Dynamic Object Model (DOM) is an application programming interface (API) for HTML and XML documents, it defines the logical architecture as shown above.

There are few techniques available in XPath where in you can easily identify the GUI dynamic objects without any waste of time. Refer the above snapshot to under the below example

Syntax = //tagname[@attribute=’Value‘]

Example = //input[@id=’user-message‘]

There are two type of Xpaths:

1.  Absolute Xpath – Refers to complete path of an object on the page, denotes by single slash i.e., /       Example: /html/body/div[2]/div/div[2]/div[1]/div[2]/form/div/input
2.  Relative Xpath – Refers to a path of an object on the page from a landmark, denotes by double slash i.e., //  Example: //form/div/input

Few Xpath Keywords

1. Contains - //tagname[contains(@attribute, ‘value‘)] – Checks for the value given in the code on your web page
2. Starts-with - //tagname[starts-with(@attribute, ‘value‘)] – Checks for the value given in the code that starts with on your web page
3. Multiple Xpaths - //tagname[@attribute=’Value‘]//tagname[@attribute=’Value‘] – Checks for the values given in both the xpaths code on your web page
4. Operator “or” - //tagname[@attribute=’Value‘ or @attribute=’Value‘] – Checks for the values given in the code that is there on your web page at least one value from both of them
5. Operator “and” - //tagname[@attribute=’Value‘ and @attribute=’Value‘] - Checks for the values given in the code that is there both the values on your web page
6. Text - //tagname [text()=’text value‘] - Checks for the value given in the code that is present on your web page
7. Ancestor - //*[@class=’ClassName’’]//ancestor::div - First, it finds the class which class is “ClassName” and then, starts finding div elements in the page.
8. Following - //tagname[@id=’idName’]//following::input - First, it finds the form which id is “’idName” and then starts to find all input elements after that node.
9. Child - //*[@class=’ClassName’]//ul[@id=’idName’]/child::li - Selects all children elements of the current node.
10. Preceding - //img[contains(@src,’srcName’)]//preceding::li - First, will locate the bottom element, then use preceding with “li” to find all “li” elements
11. Following-sibling - //*[@class=’className’]/child::div[2]//*[@class=’className’]//following-sibling::li - First, will locate child div elements, and then li elements of following li siblings
12. Descendant - //*[@class=’className’]//*[@id=’idName’]//descendant::li - First, will locate className, and then descendant li elements
13. Parent - //*[@id=’idName’]/button//parent::form   - Finds the parent name of the button
14. Locate an Element inside Array of Elements –

• //span[contains(text(),’tableValue’)]
• (//span[contains(text(),’tableValue’)])[1]
• (//span[contains(text(),’tableValue’)])[1]/following-sibling::strong[@class=’className’]