Working with Pseudo elements in Selenium WebDriver

What are pseudo-elements?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

---

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {
  property:value;
}

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

Index of standard pseudo-elements

Section

• ::after (:after)
• ::backdrop 
• ::before (:before)
• ::cue (:cue)
• ::first-letter (:first-letter)
• ::first-line (:first-line)
• ::grammar-error 
• ::marker 
• ::part() 
• ::placeholder 
• ::selection
• ::slotted()
• ::spelling-error 

Browser	Lowest Version	Support of
Internet Explorer	8.0	:pseudo-element
	9.0	:pseudo-element ::pseudo-element
Firefox (Gecko)	1.0 (1.0)	:pseudo-element
	1.0 (1.5)	:pseudo-element ::pseudo-element
Opera	4.0	:pseudo-element
	7.0	:pseudo-element ::pseudo-element
Safari (WebKit)	1.0 (85)	:pseudo-element ::pseudo-element

How to get text from CSS property “content” on a ::before or ::after pseudo element

Many a Time, we have a requirement to get text contents of a CSS property "content" on a ::before or ::after pseudo element

Below is one of the cool ways to mitigate this situation.

We need to verify the text "This text needs to be verified." is displayed using Selenium WebDriver in Java.

I have the following HTML:

<div id="test_ID">
    <ul>
        <li>Required: Server Name</li>
        <li>Required: Receiving Port</li>
    </ul>
</div>

with the following CSS code:

#validationError:before {
    content: 'This text needs to be verified.';
}

Key: The sad part is this requirement cannot be only achieved using Java, however, we can always use the little sister of java - javascript(which works with selenium webDriver)

String script = "return window.getComputedStyle(document.querySelector('#test_ID'),':before').getPropertyValue('content')";
JavascriptExecutor js = (JavascriptExecutor)driver;
String content = (String) js.executeScript(script);
System.out.println(content);

This should print: This text needs to be verified

Differences Between Method Overloading and Method Overloading in Java

Differences Between Method Overloading and Method Overloading in Java

Sl No	Property	Method Overloading	Method Overriding
1	Method Names	The Method names must be SAME for Method Overloading	The Method names must be SAME for Method Overriding
2	Argument Types	Argument Types must be different(At least the order must be different)	The Arguments Type must be Same including the Order
3	Method Signatures	The Method Signatures must be Different	The Method Signatures must be Same
4	Return Types	No Restrictions	Must be same until 1.4V. From 1.5V onwards, Co-Variant Return types allowed
5	private, static, final Methods	Can be Overloaded	Cannot be Overridden
6	Access Modifiers	No Restrictions	The scope of the Access modifiers cannot be reduced but we can happily increase the scope(Private > Default > Protected > Public)
7	'Throws’ clause	No Restrictions	If the Child class method throws any checked Exception, the parent class method must compulsarily throw the same Checked Exception or its Parent’s Checked Exception. However, there is no restrictions for Unchecked Exceptions
8	Method Resolution	Method Resolution is always taken care by Compiler based on referrenced Type	Method Resolution is always taken care by JVM based on runtime Object.
9	Also known As (names)	Also known as Compile Time Polymorphism or Static Polymorphism or Early Binding	Also known as Run Time Polymorphism or Dynamic Polymorphism or Late Binding

How check if an Element is present in Selenium WebDriver

How check if an Element is present in Selenium WebDriver(5 Ways)

1) To check if Element Present on WebPage:

Key: use idDisplayed() method

Below, the first block of code checks out the size of the element. Every Element in Selenium has a size. So, if the Size of the Element is zero, it means that the element is not present on the web

if( driver.findElement(By.cssSelector("a > font")).isDisplayed()){
System.out.println("Element is Visible");
}else{
System.out.println("Element is InVisible");
}

Key: use Not Null checks
Below, an Element is not NULL if it is present on the web page. Hence, in the second block of code above, once the if condition returns true(Element is not null), we have the output Element is present.

if(driver.findElement(By.xpath("value"))!= null){
System.out.println("Element is Present");
}else{
System.out.println("Element is Absent");
}

Also, 

2) To check if element is Visible on WebPage:

if( driver.findElement(By.cssSelector("a > font")).isDisplayed()){
System.out.println("Element is Visible");
}else{
System.out.println("Element is InVisible");
}

The isDisplayed() method comes handy when we need to check if an element is displayed on the webpage. If returns a boolean which can be useful to ascertain if the element on the web page is visible. We can use the if condition on the isDisplayed() method and decide on the navigation flow based on the element’s availability on the DOM.

3) To check if Element is Enabled on the WebPage:

if( driver.findElement(By.cssSelector("a > font")).isEnabled()){
System.out.println("Element is Enable");
}else{
System.out.println("Element is Disabled");
}

The isEnabled() method comes handy when we need to check if an element is enabled for clicking or performing some action on it, on the webpage. If returns a boolean which can be useful to ascertain if the element on the web page is ready for being interacted with(perform actions on it/use it in our script). We can use the if condition on the isEnabled() method as above and decide on the navigation flow based on the element being enabled on the DOM.

4) To check text present:

if(driver.getPageSource().contains("Text to check")){
System.out.println("Text is present");
}else{
System.out.println("Text is absent");
}

Most Elements on the Web page have an associated text. This element property can be used smartly to check if an element is present on the web page. Like, if the pageSource of the webpage contains the associated element’s text, we can infer that the element is present on the webpage.

Right Click in Selenium WebDriver

How to Perform Right click in Selenium?

Hi Friends, many a time, in our automation, we may need to right click or context click an element. Later, this action is followed up by pressing the UP/DOWN arrow keys and ENTER key to select the desired context menu element 

For right clicking an element in Selenium, we make use of the Actions class. The Actions class provided by Selenium Webdriver is used to generate complex user gestures including right click, double click, drag and drop etc.

Right Click using Actions Class:

Actions action = new Actions(driver);
WebElement ele= driver.findElement(By.id("Log in"));
action.contextClick(ele).perform();

Here, we are instantiating an object of Actions class. After that, we pass the WebElement to be right clicked as parameter to the contextClick() method present in the Actions class. Then, we call the perform() method to perform the generated action.

Sample code to right click an element

package LearnSelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class RightClick {
 
 public static void main(String[] args) throws InterruptedException{
  WebDriver driver = new FirefoxDriver();
  
  //Launching WebPage to Perform Right Click
  driver.get("http://www.facebook.com");
  
  //Right click in the TextBox to enter the Email for Login
  Actions action = new Actions(driver);
  WebElement searchBox = driver.findElement(By.id("email"));
  action.contextClick(searchBox).perform();
  
  //Thread.sleep just for user to notice the event
  Thread.sleep(4000);
  
  //Closing the driver instance
  driver.quit();
 }
 
 
}

Double Click in Selenium WebDriver

How to Perform Double click in Selenium?

Hi Friends, in this post, we will learn how to double click an element using Selenium Webdriver with Java. For double clicking an element in Selenium, we make use of the Actions class. The Actions class provided by Selenium Webdriver is used to generate complex user gestures including right click, double click, drag and drop etc.

Double Click using Actions Class:

Actions action = new Actions(driver);
WebElement element = driver.findElement(By.id("Log in"));
action.doubleClick(element).perform();

Here, we are instantiating an object of Actions class. After that, we pass the WebElement to be double clicked as parameter to the doubleClick() method present in the Actions class. Then, we call the perform() method to perform the generated action.

Sample code to right click an element

package LearnSelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class DoubleClick {
 
 public static void main(String[] args) throws InterruptedException{
  WebDriver driver = new FirefoxDriver();
  
  //Launching sample website
  driver.get("http://www.facebook.com");  driver.manage().window().maximize();
  
  //Double click the button to launch an alertbox
  Actions action = new Actions(driver);
  WebElement ele = driver.findElement(By.id("Log in"));
  action.doubleClick(ele).perform();
  
  //Thread.sleep just for user to notice the event
  Thread.sleep(5000);
  
  //Closing the driver instance
  driver.quit();
 } 
 
}

Mouseover in Selenium WebDriver

Mousehover in Selenium WebDriver

Hi Friends, today we shall learn how to perform mousehover over an element using Selenium Webdriver with Java. For performing the mouse hover over an element in Selenium, we make use of the Actions class. The Actions class provided by Selenium Webdriver is used to generate complex user gestures including mouseover, right click, double click, drag and drop etc.

Mouse Hover using Actions Class:

Actions action = new Actions(driver);
WebElement element = driver.findElement(By.id("elementId"));
action.moveToElement(element).perform();

Here, we are instantiating an object of Actions class. After that, we pass the WebElement to be mouse hovered as parameter to the moveToElement() method present in the Actions class. Then, we will call the perform() method to perform the generated action.

Sample code to mouse hover over an element

package learnSelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class MouseOver {
 
 public static void main(String[] args) throws InterruptedException{
  WebDriver driver = new FirefoxDriver();
  
  //Launching sample website
  driver.get("http:www.facebook.com");
  driver.manage().window().maximize();
  
  //Mouseover on submit button
  Actions action = new Actions(driver);
  WebElement ele = driver.findElement(By.id("Log in"));
  action.moveToElement(ele).perform();
  
  //Thread.sleep just for user to notice the event
  Thread.sleep(5000);
  
  //Closing the driver instance
  driver.quit();
 } 
 
}

Drag and Drop in Selenium WebDriver

Drag and Drop in Selenium WebDriver

Hi Friends, today we are going to learn how to perform Drag and Drop in selenium which is one of the common use cases in automation. In this tutorial, we are going to study the handling of drag and drop event in Selenium WebDriver using Actions class. 

Actions in Selenium WebDriver

For performing a complex user gestures like drag and drop, we have a Actions class in Selenium WebDriver. Using the Actions class, we first build a sequence of composite events and then perform it using Action (an interface which represents a single user-interaction). The different methods of Actions class we will be using here are-

• clickAndHold(WebElement element) - Clicks a web element at the middle(without releasing).
• moveToElement(WebElement element) - Moves the mouse pointer to the middle of the web element without clicking.
• release(WebElement element) - Releases the left click(which is in pressed state).
• build() - Generates a composite action

Sample Code for performing drag and drop operation-

package learnSelenium;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class MouseOver {
 
 public static void main(String[] args) throws InterruptedException{
  WebDriver driver = new FirefoxDriver();
  
  //Launching sample website
  driver.get("www.samplesite.com");
  driver.manage().window().maximize();

  //Identify the WebElement on which drag and drop operation needs to be performed
  WebElement fromWebElement = driver.findElement(By Locator of fromWebElement);

  //Identify the WebElement to which the above object is dropped
  WebElement toWebElement = driver.findElement(By Locator of toWebElement);
   
  //Creating object of Actions class to build composite actions
  Actions builder = new Actions(driver);
   
  //Building a drag and drop operation
  Action dragAndDrop = builder.clickAndHold(fromWebElement)
      .moveToElement(toWebElement)
      .release(toWebElement)
       .build();

  //Performing the drag and drop action
  dragAndDrop.perform();
  
    //Thread.sleep just for user to notice the event
  Thread.sleep(3000);
  
  //Closing the driver instance
  driver.quit();
 }
 
}