Wait for Pop-up

popup In recent past, I encountered one scenario where you need to automate pop-up in the application. I am blogging this, as many of you may have faced the same issue.

You need to automate the below scenario. There is a link present on the Web-page, Pop-up gets opened as you click on the link & perform some action on this pop-up.

Now you may wonder what’s the big deal in just automating above scenario.

I also thought in the same way but my scripts were failing.

After investigation I found that when I tried to switch to pop up it was not there,meaning till that time pop up didn’t get open.

I tried to apply Thread.Sleep ,it worked fine for me. But again using Thread.Sleep can cause many issues like –

  1. This may fail if opening a pop up takes longer time
  2. If pop up gets open up in fraction of seconds then it will be waste of time.
  3. It is not the good practice to use Thread.Sleep and be last option we should think of when synchronize the browser.

There is no direct solution or Expected condition available in Selenium WebDriver for this issue. Hence to overcome all these problems I have written a method which implements new Expected condition and exactly behaves like implicit wait.

private void clickWaitForPopoUp(WebDriver driver, By by,int waitTime) {
        final int currentWindows = driver.getWindowHandles().size();
        driver.findElement(by).click();
        WebDriverWait wait = new WebDriverWait(driver, waitTime);
        wait.until(new ExpectedCondition<Boolean>() {
            public Boolean apply(WebDriver d) {
                return (d.getWindowHandles().size() != currentWindows);
            }
        });
    }

XPATH Basics…

xpath

XPATH Basics…

  • XPath is a text syntax for locating parts of HTML document
  • XPath contains a library of standard functions which helps to locate the WebElement
  • XPath is a W3C recommendation

XPath uses path expressions to select WebElement or sets of WebElements in Web page. These expressions look very much like the expressions you see when you work with a traditional computer file system. like c:\MyFolder\another_folder\myFile.txt

XPATH terminologies

Nodes

While using Selenium WebDriver, we come across following three types of nodes

  1. element
  2. attribute
  3. text

Look at below HTML code sample

<div class="header">
<div class="myLinks">
<a href="http://www.google.com/" target="_blank">Link to Google</a>
  <a href="http://www.yahoo.com/" target="_blank">Link to Yahoo</a>
  <a href="http://www.facebook.com/" target="_blank">Link to FaceBook</a>
 </div>
</div>
  • here div, a are element nodes (element is the basically type of WebElement).
  • Attribute nodes for div element is class and its value is myLink
  • “a” element has text nodes as Link to Google, Link to Yahoo, Link to FaceBook

Relationship of Nodes

There are various relations available in XPATH but as a selenium user we must have knowledge of below relations

Children

Element nodes may have zero, one or more children.
above example Google Link, Yahoo Link, and FaceBook Link are Children of div tag which having class myLinks

Descendants

A node’s children, children’s children, etc. called as Descendants.
Similarly Google Link, Yahoo Link, and FaceBook Link are Descendants of div tag which having class header

Selecting Elements

XPath uses path expressions to select nodes in an Web document. The node is selected by following a path or steps. The most useful path expressions are listed below:

Expression Description
nodename Selects all nodes with the name “nodename” Example div, a, input, button etc.
/ Selects child from the current node
// Selects Descendants from the current element that match the selection no matter where they are
. Selects the current node
.. Selects the parent of the current node
@ Selects attributes

In the table below we have listed some path expressions and the result of the expressions:

Path Expression Result
/div Selects root level div from the whole page in above example it is div having header class
/div/div Selects all div which are child of root div in above example it is div having myLinks class
//div Selects all div from the page no matter where they are

Predicates

Predicates are used to find a specific node or a node that contains a specific value.
Predicates are always embedded in square brackets.

<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <div id="mainMenu">
   <ul class="coolMenu">
    <li><a href="https://www.blogger.com/home.html">Home</a></li>
    <li><a href="https://www.blogger.com/about.html">About Us</a></li>
    <li><a href="https://www.blogger.com/contact.html">Contact Us</a></li>
    <li><a href="https://www.blogger.com/downloads.html">Useful Downloads</a></li>
   </ul>
  </div>
  <h1>This is a Home Page</h1>
  <div class="content_column">
   <p>
   This is a paragraph 1. <a href="https://www.blogger.com/read1?%333">read more</a>
   </p>
   <p>
   This is a paragraph 2. <a href="https://www.blogger.com/read1?%323">read more</a>
   </p>
   <p>
   This is a paragraph 3. <a href="https://www.blogger.com/read1?%326">read more</a>
   </p>
   <p>
   This is a paragraph 4. <a href="https://www.blogger.com/read1?%338">read more</a>
   </p>
  </div>
  <div class="content_column">
   <p>
   This is a paragraph 1. and its detailed explanation
   </p>
   <p>
   This is a paragraph 2. and its detailed explanation
   <a href="https://www.blogger.com/moreFromImage?html1234">
    <img src="DetailedImage" />
   </a>
   </p>
   <p>
   This is a paragraph 3. and its detailed explanation
   </p>
   <p>
   This is a paragraph 4. and its detailed explanation
   </p>
  </div>
  <div id="footerMenu">
   <ul class="coolMenu">
    <li><a href="https://www.blogger.com/home.html">Home</a></li>
    <li><a href="https://www.blogger.com/about.html">About Us</a></li>
    <li><a href="https://www.blogger.com/contact.html">Contact Us</a></li>
    <li><a href="https://www.blogger.com/downloads.html">Useful Downloads</a></li>
   </ul>
  </div>
 </body>
</html> 

In the table below we have listed some path expressions with predicates and the result of the expressions for above example

Path Expression Result
/div[1] Selects the first div element from the root that is div having id mainMenu Note: In IE 5,6,7,8,9 first node is[0], but according to W3C, it is [1].
//div[@id=’mainMenu’]/ul/li Selects all the li of ul which is child of div having id as mainMenu
//div[@id=’mainMenu’]/ul/li[last()] Selects the last li from above explained list of li
//a[text()=’Home’] Selects all the a(anchor) having text Home
//div[@id=’mainMenu’]/ul/li[position()<3] Selects the first two li from above explained list of li

On similar line we can use all below listed Predicates as per requirements.

position() Matches the particular position from the list
last() Matches the Last position from the list
text() Get the text node of element
contains(string1,string2) Matches if the string2 contains in string1
starts-with(string1,string2) Matches if the String1 starts with String2
ends-with(string1,string2) Matches if the String1 ends with String2
matches(string,pattern) Matches if the String1 match with given regular expression pattern
upper-case(string) Convert the string to Uppercase
lower-case(string) Convert the String to Lowercase

Selecting Unknown Elements

XPath wildcard character * can be used to select unknown Web elements.

Please contact me via cotact me page and send me queries and suggestions….

Stay cool… & Keep Automating…..