ProgrammingDomain - All at one place

Mastering CSS Selectors in Selenium Webdriver[Java]

2020-06-16T19:02:00.006+05:30

CSS Selectors in Selenium

Hi All! Today we will look at how we can use CSS Selector in Selenium. CSS Selector is one of the 8 ways of locating elements on a web page.

Since CSS is the language of the Web, it is faster and more convenient as compared to XPath(Another locator for locating web elements).

How to Test/Validate CSS Selector Query

For validating CSS Selector Query:

Open Chrome Browser
Open Developer Tools(Use Shortcut CTRL + SHIFT + I)
Click anywhere in the Elements window and click CTRL + F.
Write Your CSS Query and Click Enter.

See the image below for further understanding.

Below are the ways of selecting elements using CSS Selector :

CSS Selector : ID

Hash(#) is used for selecting a web element with ID.

Syntax: #<id_value> or tagname#<id_value>

Example: #username or input#username

Consider the following HTML code:

 <div>   
    <input id="username" type="text" name="username" />   
  </div>

You can use # for selecting the username input box;

 WebElement username = driver.findElement(By.cssSelector("#username"));

CSS Selector : Class

A dot (.) is used for selecting a web element with Class.

Syntax: .<class_value> or tagname.<class_value>

Example: .inputbox or input.inputbox

Consider the following HTML code:

 <div>   
    <input class="inputbox" id="username" type="text" name="username" />   
  </div>

You can use . for selecting the username input box;

 WebElement username = driver.findElement(By.cssSelector(".inputbox"));

CSS Selector: Multiple Classes

Syntax: .class1.class2.class3...classn

Example: .inputbox.active or input.inputbox.active

Consider the following HTML code:

 <div>   
    <input class="inputbox active" id="username" type="text" name="username" />   
  </div>

You can use a dot(.) for selecting the username input box;

 WebElement username = driver.findElement(By.cssSelector(".inputbox.active"));

CSS Selector: Selecting element using attributes

Syntax: tagname[attribute='value']

Example: input[id='username']

Consider the following HTML code:

 <div>   
    <input class="inputbox" id="username" type="text" name="username" />   
  </div>

You can use . for selecting the username input box;

 WebElement username = driver.findElement(By.cssSelector("input[id='username']"));

CSS Selector: Accessing Children

Navigating to children is done by an arrow(>).

Syntax: parent>child

Example: input[id='username']

Consider the following HTML code:

 <ul class=”list”>  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium Code : Selects all <li> inside <ul>

 List<WebElement> list = driver.findElement(By.cssSelector(".list>li"));

CSS Selector: Selecting the First Child

first-of-type is used to select the first child from all the children tags.

Syntax: parent>child:first-of-type

Example: ul>li:first-of-type

Consider the following HTML code:

 <ul class=”list”>  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects first-child, i.e., <li>Child1</li>

 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:first-of-type"));

CSS Selector: Selecting the Last Child

last-of-type is used to select the first child from all the children tags.

Syntax: parent>child:last-of-type

Example: ul>li:last-of-type

Consider the following HTML code:

 <ul class="list">  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects last-child, i.e., <li>Child4</li>

 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:last-of-type"));

CSS Selector : Selecting nth-child

nth-of-type is used to select the child passed in the index.

Syntax: parent>child:nth-of-type(index)

Example: ul>li:nth-of-type(3)

Consider the following HTML code:

 <ul class="list">  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects third child, i.e., <li>Child3</li>

 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:nth-of-type(3)"));

CSS Selector: Finding Next Sibling

Plus(+) is used to select the next sibling.

Syntax: parent>child:first-of-type+<tag>

Example: ul>li:first-of-type+li

Consider the following HTML code:

 <ul class="list">  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects second child, i.e., <li>Child2</li>

 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:first-of-type+li"));

CSS Selector : Regular Expression(contains)

Below syntax will help you find a tag whose id contains text user.

Syntax: tag[id*=’user’]

Selenium code to do the same:

 WebElement username = driver.findElement(By.cssSelector("input[id*='user']"));

CSS Selector : Regular Expression(starts with)

Below syntax will help you find a tag whose id contains text user.

Syntax: tag[id^=’user’]

Selenium code to do the same:

 WebElement username = driver.findElement(By.cssSelector("input[id^='user']"));

CSS Selector : Regular Expression(ends with)

Below syntax will help you find a tag whose id contains text user.

Syntax: tag[id$=’user’]

Selenium code to do the same:

 WebElement username = driver.findElement(By.cssSelector("input[id$='name']"));

That's it from my side for CSS Selectors in Selenium. Feel free to try these and comment down below if any doubts.

Thank You!

More on Selenium

Selenium 4 Features - 2020

Selenium Interview Questions and Answers

Selenium Interview Questions - FAQs

What is XPath in Selenium?

Waits in Selenium

Page Object Model in Selenium

What is Programming?[Basics]

2020-06-10T13:52:00.006+05:30

What is Programming?

Just beginning your programming journey? No wonder a question comes to your mind, What is Programming? Well, You are in the right place then. I will try and simplify things for you here which even a beginner can understand.

Agenda for today :

Programming Definition
What is a program?
What is a Programming Language?
Types of Programming Languages?

Programming Definition

Programming or Computer Programming simply is a process or a method of writing programs or code to build a software/product. In other words programming is used for building software.

Software Examples : MS Word, Browser, Web Page you are using to access this site.

What is a Program?

Program is a set of instructions that you give to your computer to solve a specific problem.

For example, let's say you want to add two numbers, 5 + 2

You can write a program to add two numbers and display its result.

Now you will say Adding two numbers? That’s easy! I can calculate it in no time. I can do it on my own why would I need a program/code for that?

And I would say you to add 32432432 + 2343243432.

What do you think? How much time will you take?

You can run a program multiple times for multiple values.

Write Once Run Forever(WORF) that’s my terminology BTW!

Now you get it right?

Programming is nothing but writing programs/code that reduces manual efforts and can be used any number of times to solve similar problems.

Now you know about Programming and Programs what next?

What is a Programming Language?

Now you know Program is a set of instructions

Let's say You are instructing something to someone. How will you do it?

With Language right? Whether it is English, Spanish, Hindi, Russian or Chinese.

And not everyone in the world would understand it.

In a similar way, there are different programming languages.

Some are designed to talk to your computer hardware while others are designed to talk to computer software.

A programming language is a medium of communication between you and your computer.

Types of Programming Languages

Low-Level Language :

The language which the computer understands is Low Level language. This is the language computer uses to perform internal operations.

It can be in binary form or it can be commands used for instructing computer.

Examples: Machine Language, Assembly Language

High-Level Language :

It is a human-readable language that gets converted to Low level language(the one that the computer understands). And we need language translators like Compiler/Interpreter to convert a High Level language to a Low Level language.

Examples include all the modern languages like C, C++, Java, etc.

Why Should one learn Programming?

In this modern era of digital world having a programming skill is the icing on the cake. You can :

get a high paying job
do freelancing
develop applications for your business

So that’s it from my side on What is Programming. Hope you understood everything from this since I have covered things in a way that will be helpful for a beginner to understand.

You can also tell me what next you want.

If you still have any doubts you can comment down below.

Rest Assured Framework(Java, TestNG, Maven) | Test Automation Framework

2020-06-08T18:10:00.076+05:30

Rest Assured Framework | Test Automation Framework

Hi All! Today we will see a basic Rest Assured Framework that you can scale further for big projects. The framework is developed using Java.

Before starting with the Framework lets checkout the basics that we should know in order to move further. Don’t worry it will be just a refresher, not a detailed one.

What is Rest API and how do we test it?

REST stands for REpresentational State Transfer. It is an architectural style for designing Web services(?).

Web services are pieces of code in a remote machine that is platform-independent (can be executed from any machine). Web Services are used to fetch data from the database and provide it to the client.

Look at the figure below :

Author: Seobility

We have a Server where we have our Rest API services and Database.

We have a Client.

Client request data from the Server and Server fetches data from the Database and responds with the data

Remember: Client can be anything from a mobile to a desktop.

API testing is nothing but validating the responses sent by the server.

Don’t worry we will go through these with RestAssured example.

Why Rest Assured?

Rest assured is a Java Library that is becoming very famous in the market for performing Rest API Automation. It provides a rich set of powerful APIs, making it way easier to work with Rest APIs.

Finally, Let's get started with our Rest Assured Framework Tutorial.

Following setup should be done on your machine before we proceed. I am not going to go through all of these since I will go old by then. I will provide links for these steps

Download Eclipse EE
Install Java
Install Maven
Setup TestNG

Let's start then,

Create a new Maven project

We would require the following dependencies to work with Rest Assured.

Copy them inside your pom.xml file.

RestAssured Dependency

 <!-- https://mvnrepository.com/artifact/io.rest-assured/rest-assured -->  
 <dependency>  
   <groupId>io.rest-assured</groupId>  
   <artifactId>rest-assured</artifactId>  
   <version>4.3.0</version>  
   <scope>test</scope>  
 </dependency>

TestNG Dependency

 <!-- https://mvnrepository.com/artifact/org.testng/testng -->  
 <dependency>  
   <groupId>org.testng</groupId>  
   <artifactId>testng</artifactId>  
   <version>7.1.0</version>  
   <scope>test</scope>  
 </dependency>

Java Hamcrest Library

 <!-- https://mvnrepository.com/artifact/org.hamcrest/java-hamcrest -->  
 <dependency>  
   <groupId>org.hamcrest</groupId>  
   <artifactId>java-hamcrest</artifactId>  
   <version>2.0.0.0</version>  
   <scope>test</scope>  
 </dependency>

Now create three packages in src/test/java

We will return to this in a minute!

Methods used in Rest Assured

We will cover this framework in BDD(Behaviour Driven Development) style.

And Rest Assured makes it easy to work with BDD since it gives us built-in methods for it. Let’s check out these methods :

given(): We set headers, cookies, parameters & authorization headers for our requests here.

when(): We use HTTP verbs POST, PUT, DELETE, GET to send requests here.

then(): Validating the responses received from the server.

Clear? Yes?

Setting Config files for different environments

Rest Assured Automation Framework will be useless if we run it on a single environment because in real-time APIs are deployed to different environments. Let me tell you different test environments that we have in my company, so there are three :

1. DEV - Development Environment

2. INT - Integration Environment

3. STG - Staging Environment

We have different URLs for these three environments and properties specific to the environments like port, auth tokens, etc. And this will be the base for our Automation Framework.

I will create three different property/config files for these three environments. That’s what you have to do in the root of your project.

And define two properties inside each file:

We'll use a free jsonplaceholder API (Warning: API is not consistent, you might get errors sometimes.)

And single we have only one URL we will add this in all the three files.

But in a real scenario, we'll have different URLs for different environments.

Starting up with our coding part

Now in our com.utilities class, we will define a BaseClass.java file where we will set baseURI for Rest Assured by fetching it from our above properties file with the help of parameter passed from Maven Command line(We will see it later).

The base URI will be set depending upon the environment we will pass from the command line.

For Example : mvn test -Denv=INT (will run the tests in INT environment)

1:  //BaseClass.java  
2:  package com.utilities;  
3:  import java.io.File;  
4:  import java.io.FileInputStream;  
5:  import java.io.FileNotFoundException;  
6:  import java.io.IOException;  
7:  import java.util.Properties;  
8:  import org.apache.log4j.Logger;  
9:  import org.apache.log4j.PropertyConfigurator;  
10:  import org.testng.annotations.BeforeSuite;  
11:  import org.testng.annotations.BeforeTest;  
12:  import org.testng.annotations.Optional;  
13:  import org.testng.annotations.Test;  
14:  import com.testcases.PostsTest;  
15:  import groovyjarjarpicocli.CommandLine.Parameters;  
16:  import io.restassured.RestAssured;  
17:  public class BaseClass {  
18:       public String url;  
19:       String info;  
20:       public Logger LOGGER;  
21:       public Properties prop = new Properties();  
22:       @org.testng.annotations.Parameters({"env"})  
23:       @BeforeTest()  
24:       public void initialize(String environment){  
25:            try {  
26:                 String rootPath = System.getProperty("user.dir");  
27:                 PropertyConfigurator.configure(rootPath + "/log4j.properties");  
28:                 LOGGER = Logger.getLogger(BaseClass.class);       
29:                 if(environment.equals("DEV")) {  
30:                      prop.load(new FileInputStream(new File(rootPath + "/DEVENV.properties")));  
31:                 }else if(environment.equals("INT")) {  
32:                      prop.load(new FileInputStream(new File(rootPath + "/INTENV.properties")));  
33:                 }else if(environment.equals("STG")) {  
34:                      prop.load(new FileInputStream(new File(rootPath + "/STGENV.properties")));  
35:                 }  
36:                 url = prop.getProperty("url");  
37:                 info = prop.getProperty("info");  
38:                 System.out.println("===================================");  
39:                 System.out.println("Info --- "+info);  
40:                 System.out.println("===================================");  
41:                 RestAssured.baseURI = url;  
42:            }catch(FileNotFoundException f) {  
43:            }catch(IOException io) {  
44:            }  
45:       }  
46:  }

The below line will receive parameter which we will pass from Maven Command line/Jenkins(If you want to use it for CI/CD)

@org.testng.annotations.Parameters({"env"})

Below code checks the env parameter that we passed from command line and loads a respective config file

 if(environment.equals("DEV")) {  
      prop.load(new FileInputStream(new File(rootPath + "/DEVENV.properties")));  
 }else if(environment.equals("INT")) {  
      prop.load(new FileInputStream(new File(rootPath + "/INTENV.properties")));  
 }else if(environment.equals("STG")) {  
      prop.load(new FileInputStream(new File(rootPath + "/STGENV.properties")));  
 }  
 url = prop.getProperty("url");  
 info = prop.getProperty("info");

And this code sets up our base URI.

RestAssured.baseURI = url;

Now Create a Post.java file in com.models, I will tell you later why?

1:  //Post.java  
2:  package com.models;  
3:  public class Post {  
4:       public int userId;  
5:       public int id;  
6:       public String title;  
7:       public String body;  
8:       public int getUserId() {  
9:            return userId;  
10:       }  
11:       public void setUserId(int userId) {  
12:            this.userId = userId;  
13:       }  
14:       public int getId() {  
15:            return id;  
16:       }  
17:       public void setId(int id) {  
18:            this.id = id;  
19:       }  
20:       public String getTitle() {  
21:            return title;  
22:       }  
23:       public void setTitle(String title) {  
24:            this.title = title;  
25:       }  
26:       public String getBody() {  
27:            return body;  
28:       }  
29:       public void setBody(String body) {  
30:            this.body = body;  
31:       }  
32:  }

There are a number of fake Rest APIs on jsonplaceholder website, but we will use /posts API.

URL : https://jsonplaceholder.typicode.com/posts

Now let's create our test cases in package com.testcases defined earlier.

Create a PostsTest.java file under package com.testCases.

1:  //PostsTest.java  
2:  package com.testcases;  
3:  import java.io.FileInputStream;  
4:  import java.io.FileNotFoundException;  
5:  import java.io.IOException;  
6:  import java.util.Properties;  
7:  import static org.hamcrest.Matchers.*;  
8:  import org.apache.log4j.Logger;  
9:  import org.apache.log4j.PropertyConfigurator;  
10:  import org.testng.Assert;  
11:  import org.testng.annotations.BeforeClass;  
12:  import org.testng.annotations.Test;  
13:  import com.models.Post;  
14:  import com.utilities.BaseClass;  
15:  import static io.restassured.RestAssured.*;  
16:  import io.restassured.RestAssured;  
17:  import io.restassured.http.ContentType;  
18:  import io.restassured.path.json.JsonPath;  
19:  import io.restassured.response.Response;  
20:  public class PostsTest extends BaseClass {  
21:       int postId = 1;  
22:       @Test(priority = 1)  
23:       void createNewPost() {  
24:            Post newPost = new Post();  
25:            newPost.setUserId(1);  
26:            newPost.setTitle("new title");  
27:            newPost.setBody("new body");  
28:            Post postedPost =   
29:            given()  
30:                 .contentType(ContentType.JSON)  
31:                 .body(newPost)  
32:            .when()  
33:                 .post("/posts")  
34:            .then()  
35:                 .assertThat()  
36:                 .statusCode(201)  
37:                 .log().all()  
38:                 .extract()  
39:                 .as(Post.class);  
40:            System.out.println("Posted Post Title : "+postedPost.title);  
41:            postId = postedPost.userId;  
42:            Assert.assertEquals(postedPost.title, "new title");  
43:       }  
44:       @Test(priority = 2)  
45:       void getSinglePost() {  
46:            given()  
47:            .when()  
48:                 .get("/posts/"+postId)  
49:            .then()  
50:                 .assertThat()  
51:                 .body("id", equalTo(postId))  
52:  //               .body("id", equalTo(postId), "title", equalTo("new title")  
53:                 .log().all(true);  
54:       }  
55:  }

We will be having just one class and these two methods since this article will become way too long. You can add more if you understand the basics.

Now look at the code below. This is why we added Post.java class previously

 Post newPost = new Post();  
 newPost.setUserId(1);  
 newPost.setTitle("new title");  
 newPost.setBody("new body");

This is how we send our body in a post request

Another alternative is to use Java HashMap but I like this better.

Now you will have to add a dependency in pom.xml

 <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->  
 <dependency> <!-- Convert java onject to json -->  
       <groupId>com.fasterxml.jackson.core</groupId>  
       <artifactId>jackson-databind</artifactId>  
       <version>2.10.2</version>  
  </dependency>

This dependency will convert our Java object to JSON format.

given()

.contentType(ContentType.JSON)

.body(newPost)

You see we are setting the body with our newPost object but how will this object be sent across to the server.

Because the only format that is used for transferring data is JSON/XML.

Finally, convert your project to TestNG by:

Right-clicking on your project root folder -> TestNG -> Convert to TestNG.

This is the final step of our framework.

Now for running the tests open the command prompt from the folder where your project is.

And run command

mvn test –Denv=INT

You can use any environment (DEV, INT, STG).

That is it! I want you to try out this Rest Assured Framework once.

You can further integrate it with Github, Jenkins, reports, or logging(Log4j).

If you want the Git and Jenkins integration or the code of the framework, comment down below

If you need I will write another article for it – maybe a Second part of this framework

Selenium 4 Features - 2020

2020-05-30T19:33:00.009+05:30

Selenium 4 Features

Hi All, In today's article we will look into some of the Selenium 4 features. Although, still in its Alpha release, Selenium 4's stable release is expected to hit the market soon.

As of the date of this article, the latest Selenium Alpha release is v4.0.0-alpha-6 - Check Official ChangeLog File for the latest updates.

There are changes in many areas in Selenium 4 like Selenium Grid, Selenium IDE and Selenium Webdriver, but we will be mainly focusing on changes in Selenium Webdriver.

Also, try: Selenium Quiz with Answers

The list of Selenium 4 features we will be looking in today are :

Take Screenshot of Web Elements
Capturing Screenshot of a section in a web page.
Opening a new tab on the browser.
Opening a new window on the browser.
Relative/Friendly locators
getRect() for finding dimensions and position.
Chrome Devtools API.

If you want to download Selenium 4, you can directly go to the Selenium Website.

Or, download it from the Maven Repository.

Take Screenshot of Web Elements

I assume you all know how we used to take screenshots in Selenium 3? If not, let us refresh ourselves.

In Selenium 3 we used to take a screenshot of the entire page and not a specific element. The below code will refresh your memories.

 File src = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));

But with Selenium 4, we can take a screenshot of web elements on a web page. Just grab the element by findElement() method and use getScreenshotAs() method.

Suppose you want to take a screenshot of an email field on a webpage. Then the below code does it for you :

 WebElement email = driver.findElement(By.id("email"));  
 File src = email.getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));

The screenshot will look like this :

You can also take screenshots the Selenium 3 style if you are in love with the previous version.

Then the below code will help you :

 WebElement email = driver.findElement(By.id("email"));  
 File src = ((TakesScreenshot)element).getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));

Capturing Screenshot of a section in a web page

When it comes to capturing a screenshot of a section of a web page and by section, I mean a table or a form on a web page, we can locate the web element(again a table or a form or a div) and use getScreenshotAs() method on it.

For example, the below code :

 WebElement followByEmail = driver.findElement(By.id("FollowByEmaill")); //a div on my page programmingdomain.com  
 File src = ((TakesScreenshot)followByEmail).getScreenshotAs(OutputType.FILE);  
 FileUtils.copyFile(src,new File("file where you want to save the screenshot"));

will give you this screenshot :

Opening a new tab on the browser.

Selenium 4 has come up with many features and one being, opening a new tab on the browser(bank tab).

For opening a new blank window newWindow() method is used in Selenium.

Consider the following code that opens a google page, then opens a new tab and navigates to a specific URL(programmingdomain.com).

 driver.get("https://www.google.com");  
 driver.switchTo().newWindow(WindowType.TAB);  
 driver.navidate().to("https://www.programmingdomain.com");

Opening a new window on the browser.

Very similar to the previous section, this section used WindowType.WINDOW instead of WindowType.TAB for opening a new window.

Consider the following code that opens a google page, then opens a new window and navigates to a specific URL(programmingdomain.com).

 driver.get("https://www.google.com");  
 driver.switchTo().newWindow(WindowType.WINDOW);  
 driver.navidate().to("https://www.programmingdomain.com");

Relative/Friendly Locators

Locators play an important role in finding/locating elements on a web page. Selenium 3 had 8 locators namely, ID, Name, TagName, ClassName, CssSelecor, XPath,LinkText, PartialLinkText and with Selenium 4 this number is increasing even more.

Below are the methods that are used for relatively locating elements in Selenium 4 :

below(): finds element which is below the already located/searched element.
toLeftOf() : finds element which is in the left of the already located/searched element.
toRightOf() : finds element which is in the right of the already located/searched element.
above(): finds element which is above the already located/searched element.
near(): finds element which is at most 50px away from located/searched element.

The below example will make it clear for you :

 //import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;  
 WebElement nextButton = driver.findElement(By.id("nextButton"));  
 WebElement previousButton = driver.findElement(withTagName("button").toLeftOf(nextButton));

This code locates previousButton when you have already located nextButton and want to locate previousButton which is present at the left of nextButton.

The withTageName() method return RelativeLocator which is similar to By class.

Also, Selenium uses a Javascript function getBoundingClientRect() internally to find the relative element.

getRect() for finding dimensions and position.

In Selenium 4, getRect() method is used to get the dimensions of a web element like height, width, X-Coordinate, Y-Coordinate.

As told in the previous section, getRect() also uses getBoundingClientRect() function of Javascript to get the dimensions of web elements.

Let's see how we use to get the dimensions in Selenium 3.x vs now with Selenium 4.x.

Selenium 3.x

 WebElement loginbtn = driver.findElement(By.id("login"));  
 Dimension btnDim = loginbtn.getSize();  
 System.out.println(btnDim.getHeight());  
 System.out.println(btnDim.getWidth());  
 Point p = loginbtn.getLocation();   
 System.out.println(p.getX());  
 System.out.println(p.getY());

Selenium 4.x

 WebElement loginbtn = driver.findElement(By.id("login"));  
 Rectangle rect = loginBtn.getRect();  
 System.out.println(rect.getHeight());  
 System.out.println(rect.getWidth());  
 System.out.println(rect.getX());  
 System.out.println(rect.getY())

Chrome Devtools API

Let's conclude this article with this topic. Selenium 4 features also include Chrome Devtools API which gives us the following facilities which could be only done manually previously :

Enable Network Offline
Enable Network Online
Get Console log
Load Insecure website

There are some internal changes done in order to make the Chrome Devtools API available to us.

The ChromeDriver which previously extended from RemoteWebDriver now has a bridge, ChromiumDriver between them which includes getDevTools() method.

Selenium 3.x

ChromeDriver <-- RemoteWebDriver

Selenium 4.x

ChromeDriver <-- ChromiumDriver <-- RemoteWebDriver

And ChromiumDriver includes the following method :

 public DevTools getDevTools(){  
      return devTools.orElseThrow(() -> new WebDriverException("Unable to create Devtools Connection"));  
 }

If you want the coding implementation of the above Devtools features, you can contact us. We'll be happy to provide you with that.

End of Selenium 4 Features

If you like this article please comment down below and show your support. If you want information on any other topic, comment down and let us know. Thank You!

More on Selenium

Selenium Interview Questions and Answers

Selenium Interview Questions - FAQs

What is XPath in Selenium?

Waits in Selenium

Page Object Model in Selenium

Print A to Z in Javascript

2020-05-28T13:31:00.003+05:30

Print A to Z in Javascript

Hi All! Today we'll be covering How to print A to Z in Javascript? i.e., print all the characters of the English alphabet(A-Z).

Javascript's String object has an inbuilt method fromCharCode() that takes an ASCII code as input and returns the corresponding character.

We are looping through ASCII codes from 65(A) to 90(Z) by converting A to its ASCII equivalent with the help of "A".charCodeAt(0) inside a for() loop.

And then printing the characters from A-Z using String.fromCharCode(i).

 <!DOCTYPE html>  
 <html>  
   <head>  
     <script>  
       function print() {  
         for(var i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {  
         document.getElementById("list").insertAdjacentHTML('beforeend','<li>'+String.fromCharCode(i)+'</li>')  
         }  
       }  
     </script>  
   </head>  
 <body>  
   <button onclick="print()">Print A to Z</button>  
   <ul id="list">  
     <!-- here we will insert <li> dynamically -->  
   </ul>  
 </body>  
 </html>

Output :

How to convert int to char in C?

2020-05-22T10:45:00.007+05:30

How to get Ascii value of char in C?

2020-05-22T10:06:00.003+05:30

How to get Ascii value of char in C?

Hi, without wasting your time I will tell you How to get Ascii value of char in C.

I assume you know when we assign lower sized data type to a higher sized data type it will automatically convert it to higher sized data type.

So, when we assign char to int. It will convert char to its ASCII, which is an int. Hence we get ASCII value of char.

Checkout the below code :

 #include <stdio.h>  
 int main()  
 {  
   char ch = 'A';  
   int i = ch;  
   printf("Ascii value of %c is %d \n",ch,i);  
   return 0;  
 }

Internally,

int i = ch;

Will be converted to :

int i = (int)ch

Output :

Ascii value of A is 65

Uncheck other Checkboxes on selection of one Checkbox in Javascript

2020-05-21T19:36:00.010+05:30

Javascript Disable Checkbox when another Checkbox is checked

Hi All! In this article, we will be seeing how to Disable Checkbox when another Checkbox is checked in Javascript i.e., how to make checkboxes behave like radio buttons.

Also Check: How to add tooltip to textbox in Javascript?

The simplest approach is by using vanilla Javascript. Get all the checkboxes in the form of an array and then looping over each item and checking each item in the array matches with the source checkbox which is clicked and if not, uncheck the checkboxes which are not clicked/selected.

 <!DOCTYPE html>  
 <html>  
     <head>  
        <script>  
             function check(el){  
                 var cities = document.getElementsByName("city");  
                 cities.forEach(function(item){  
                     if(item!=el)  
                         item.checked = false;  
                 });  
             }  
         </script>  
      </head>  
      <body>  
          <h1>Radio button like Checkboxes</h1>  
          <input type="checkbox" onchange=check(this) id="city1" name="city" value="Hyderabad">Hyderabad<br>  
          <input type="checkbox" onchange=check(this) id="city2" name="city" value="Mumbai">Mumbai<br>  
          <input type="checkbox" onchange=check(this) id="city3" name="city" value="Delhi">Delhi  
      </body>  
 </html>

Output

Page Object Model in Selenium

2020-05-20T08:34:00.012+05:30

Page Object Model in Selenium

Hi All, in this article, we'll be understanding Page Object Model in Selenium, famously known as POM. This is one of the most famous questions asked in automation testing interviews, mostly for 3+ years experienced candidates, who are expected to have sound knowledge on the Selenium framework as well.

Also, try: Selenium Quiz with Answers

What is Page Object Model in Selenium?

Page Object Model is a design pattern in Selenium in which we create Classes for Pages and Member Variables for Web Elements.

So for every page on the website, we create a Class which is also called Object Repository.

To summarize,
Class -> Page
Member Variable -> Web Element
Methods -> perform actions on Web Elements.

Also, the Page Object Model classes are defined independently of the test scripts which make them reusable and reduces code duplicacy.

Suppose we were to test Login Page of a website named FB then we would define the pages and test scripts in the following way:

Consider the following folder structure :
src -> pages -> FBLoginPage.java //POM Class
src -> tests -> FBLoginTest.java //Test Class

In the below code,
FBLoginPage.java defines the Login page, its web elements, and operations that can be performed on the web elements.

And FBLoginTest.java defines the test script that will be executed for testing the login page.

FBLoginPage.java

 
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
class FBLoginPage{  
      By email = By.id("email");  
      By password = By.id("password");  
      By loginBtn = By.id("btn-login");  
      Webdriver driver;  
      public FBLoginPage(WebDriver driver){  
           this.driver = driver;  
      }  
      public WebElement getEmail(){  
           return driver.find(email);  
      }  
      public WebElement getPassword(){  
           return driver.find(password);  
      }   
      public WebElement getLoginBtn(){  
           return driver.find(loginBtn);  
      }  
      public void setEmail(String email){  
           getEmail().sendKeys(email);  
      }  
      public void setPassword(String passwprd){  
           getPassword().sendKeys(password);  
      }  
      public void clickLoginButton(){  
           getLoginBtn().click();  
      }  
 }

FBLoginTest.java

 
import org.openqa.selenium.WebDriver;
import org.testng.annotations.*;
class FBLoginTest{  
      WebDriver driver;  
      @BeforeClass  
      public void setup(){  
           System.setProperty("webdriver.chrome.driver","c://drivers/chrome.exe");  
           driver = new ChromeDriver();            
      }  
      @Test  
      public void runLoginTest(){  
           FBLoginPage loginPage = new FBLoginPage(driver);  
           loginPage.setEmail("");  
           loginPage.setPassword("");  
           loginPage.clickLoginButton();  
      }  
 }

Page Factory

Page Factory is an inbuilt mechanism of the Selenium Webdriver which is used to define classes in Page Object Model. It uses @FindBy annotation to find Web Elements inside the web page. You can replace this with the traditional approach of defining Page Object Model classes.

Consider the following code which can be replaced with the above FBLoginPage.java

 
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;

class FBLoginPage{  
      @FindBy(id="email")  //finds web element
      WebElement email;  
      @FindBy(id="password")  
      WebElement password;  
      @FindBy(id="btn-login")  
      WebElement loginBtn;       
      Webdriver driver;  
      public FBLoginPage(WebDriver driver){  
           this.driver = driver; 
           PageFactory.initElements(driver,this); //initializing web elements 
      }  
      public WebElement getEmail(){  
           return email;  
      }  
      public WebElement getPassword(){  
           return password;  
      }   
      public WebElement getLoginBtn(){  
           return loginBtn;  
      }  
      public void setEmail(String email){  
           this.getEmail().sendKeys(email);  
      }  
      public void setPassword(String passwprd){  
           this.getPassword().sendKeys(password);  
      }  
      public void clickLoginButton(){  
           this.getLoginBtn().click();  
      }  
 }

Waits in Selenium

2020-05-16T07:46:00.006+05:30

Waits in Selenium

Hi All! in this article will walk you through to Waits in Selenium, different types of waits in Selenium Webdriver, and how to implement them.

Waits in Selenium are used to handle sync issues on a webpage. Whenever you open a webpage, the elements of the webpage doesn't load immediately, they take some time to load due to Ajax call. And while running Selenium scripts you have to keep that in mind and pause your code until the element which you are looking for is loaded.

So the amount of time in which you are pausing your code or waiting for the element to appear is Waits in Selenium. Waits are the most commonly asked Selenium Interview Questions if you are preparing for one.

Also, try: Selenium Quiz with Answers

Types of Waits in Selenium

Waits in Selenium is mainly of 2 types.

Implicit Wait
Explicit Wait

1) Implicit Wait :

Implicit wait is applied to all the elements within a webpage(in other words to all the elements of current Webdriver instance). It tells the Webdriver to poll the DOM for a certain amount of time if the element is not available immediately. Below code can be used to define implicit wait :

 driver.manage().timeouts().implicitlyWait(5,TimeUnit.SECONDS);

The above code while finding an element waits for 5 seconds before throwing NoSuchElementException in case the element is not found.

The default value of implicit wait is 0, meaning disabled.

One thing to remember is 5 seconds is the maximum wait time. The webdriver will not wait for the entire 5 seconds, if the element is available at the 3rd second it won't check for it further. It will give results in 3 seconds saving your 2 seconds.

2) Explicit Wait :

Explicit wait is applied to a specific web element until some expected condition is met. This means it keeps on waiting until the expected condition becomes true.

Explicit wait in selenium is of two types WebDriver Wait and Fluent Wait.

a) Webdriver Wait :

 WebDriver driver = new ChromeDriver();  
 WebDriverWait wait = new WebDriverWait(driver,10); //10 Seconds  
 wait.until(ExpectedConditions.elementToBeClickable(By locator));

Commonly used Expected Conditions

elementToBeClickable(WebElement)
visibilityOf(WebElement)
visibilityOfElementLocated(By locator)

b) Fluent Wait :

Fluent wait is a type of explicit wait and unlike Webdriver wait, we can have polling time which continuously monitors for the availability of the web element. The ExpectedConditions function is also to be provided by the user.

 WebDriver driver = new ChromeDriver();  
 Wait wait = new FluentWait<WebDriver>(driver)  
              .withTimeout(Duration.ofSeconds(10))  
              .pollingEvery(Duration.ofSeconds(2)) //checks availability every 2 secs 
              .ignoring(NoSuchElementException.class);  
 
WebElement element = wait.until(  
     new Function<WebDriver, WebElement>(){  
        public WebElement apply(WebDriver driver){  
            if(driver.find(By.id("new")).isDisplayed()){  
                return driver.find(By.id("new"));  
            }  
         }  
     }  
 )

------------------------------------------------------------------------------------------

I will be posting more advanced questions in the upcoming posts. Stay Tuned. Thanks.

Do send your comment if any doubts!

How to add tooltip to textbox in Javascript?

2020-05-14T09:20:00.002+05:30

How to add tooltip to textbox in Javascript?

Hi All,

In this article, I'll be talking about adding tooltip in Javascript.

Adding a tooltip to a textbox in Javascript is easy. You just have to set the attribute title for the HTML input tag.

setAttribute() method can be used to set title for the input.

Also Check: Disable other Checkboxes on selection of one Checkbox

Example :

 <html>  
  <body>  
   <input type="text" id="inp"/>  
   <script>  
       var el = document.getElementById("inp"); //getting input tag by id inp
       el.setAttribute("title","tooltip_text_you_want_to_set"); //setting attribute title
   </script>  
  </body>  
 </html>

**But I would suggest adding tooltip directly in the HTML input tag using title attribute.**

 <input type="text" id="inp" title="tooltip_text_you_want_to_set" />

Selenium Interview Questions - FAQs

2020-05-11T09:14:00.007+05:30

Frequently asked Selenium Interview Questions

Hi All, Welcome! This article will feature the most commonly asked questions in a Selenium interview. These questions are related to Selenium Webdriver, not the whole suite.

Also, try: Selenium Quiz with Answers

1) Maximize a window - Selenium?

 
 driver.manage().window().maximize();

Also Check this : SeleniumInterview Questions - XPath

2) Refresh a page - Selenium?

There are three ways of refreshing a page in the browser :

 
 //First  
 driver.navigate().refresh();  
 //Second  
 driver.sendKeys(Keys.F5);  
 //Third  
 driver.get(driver.getCurrentURL());

Also, Check this : SeleniumInterview Questions - 10 Basic Questions

3) Navigating forward and backward - Selenium?

navigate() function can be used to navigate between pages.

 
 driver.navigate().forward() : //Navigates forward one page  
 driver.navigate().back() : //Navigates backward one page

4) Taking Screenshot of a Web Page?

 
 File src =( (TakeScreenShot)driver).getScreenshotAs(OutputType.File);  
 FileHandler.copy(src, new File(“filepath”));

Note – FileUtils.copy() was used with previous Selenium versions.

5) Handling Alerts – Selenium?

 
 driver.switchTo().alert().accept(); //Equivalent to pressing Yes/Ok in alert  
 driver.switchTo().alert().dismiss(); //Equivalent to pressing No in alert

6) Find all links in a Web Page?

driver.findElements(By.tagName(“a”)); can be used to find all the links in a web page. It returns a list of anchor(<a>) tags present on the web page.

 
 List<WebElement> links = driver.findElements(By.tagName(“a”));

7) Difference between findElement() and findElements()?

findElement() - Finds a single element in a web page and returns NoSuchElementException when element is not found.

findElements() – Finds a list of element in a web page and returns empty list when elements are not found.

8) Find all links of a particular section in a web page.

If you want to find links in a particular section of a web page, suppose the footer section with id ‘footer’.

 
 WebElement footer = driver.findElement(By.id(“footer”));  
 List<WebElement> links = footer.findElements(By.tagName(“a”));

9) Moving to a frame - Selenium?

driver.switchTo().frame(<frameId/frameName/frameIndex>); - can be used to switch to a particular frame.

frame() takes either the frameId, frameName, or frameIndex as a parameter.

And to move focus back to the window the following code is used:

 
 driver.switchTo().defaultContent();

10) Actions Class - Selenium?

Actions class in selenium can be used to perform user actions on a web page which the user performs manually. This class can be used to execute compound user actions simultaneously. For example, if you want to move to an element and then click it or if you want to move to an element then click it and drag it to another container.

Below code drags and drops an element :

 
 Actions action = new Action(driver);  
 action.clickAndHold(sourceWebElement)  
       .moveToElement(targetWebElement)  
       .release(targetWebElement)  
       .build().perform();

------------------------------------------------------------------------------------------

I will be posting more advanced questions in the upcoming posts. Stay Tuned. Thanks.

Do send your comment if any doubts!

What is XPath in Selenium?

2020-05-10T09:01:00.009+05:30

What is XPath in Selenium?

Hi Folks! In this post, we will look at What is XPath in Selenium? and How to write XPath in Selenium? This is one of the most frequently asked topics in Selenium Interviews. I have tried to cover XPath from the interview point of view. In case you want to know more about it, you can write to me.

Also, try: Selenium Quiz with Answers

1) What is XPath in Selenium?

XPath is a language used for querying XML documents. It can be used to find web elements inside the webpages. There are basically two ways by which you can find XPaths and hence there are two types of XPath in Selenium.
1. Absolute XPath
2. Relative Xpath

Also, Check this: Selenium Interview Questions and Answers

2) What is Absolute XPath in Selenium?

An Absolute XPath is the complete path from the root element to the element you want to travel. It begins with a single slash(/) followed by the root element of the DOM(Document Object Model).

Example :

Suppose you want to travel to a <div> tag inside the body tag

Then,

 /html/body/div - would be your Absolute XPath.

3) What is Relative XPath in Selenium?

A Relative XPath is a path that finds the element directly. It begins with a double slash(//) followed by the element you want to find.

Example :

 
 //input[type="submit"] - finds a submit button directly.

4) Locating element partially in Selenium - XPath?

contains() can be used to locate elements partially.

Suppose you have the following tag in HTML :

 <input type="text" id="username" />

Then,

 //*[contains(@id,"user")] - can be used to locate element partially.

5) Locating element using text in Selenium - XPath?

text() can be used to locate elements using the value of a tag.

Suppose you have the following tag in HTML :

 <p id="user">Dave</p>

Then,

 //p[text()='Dave'] - can be used to locate element using text.

6) Moving to parent element in Selenium - XPath?

Consider the following HTML code :

 
 <div>  
  <p id="child">Hello World!</p>  
 </div>

Then,

 
//p[@id='child']/parent::div - can be used to move to parent(div).

Alternatively :

 
//p[@id='child']/.. - can also be used.

7) Moving to nth-child in Selenium - XPath?

Consider the following HTML code :

 
 <ul>  
  <li>Item1</li>  
  <li>Item2</li>  
 </ul>

Then,

 
//ul/li[2] - can be used to move to second child which is Item2.

Alternatively :

 
//ul/li[position()=2]/.. - can also be used.

8) Moving to Sibling in Selenium - XPath?

You can use this scenario when only one sibling is static or only one sibling can be identified uniquely.

Consider the following HTML code :


 <ul>  
  <li>Item1</li>  
  <li id="item">Item2</li>  
  <li>Item3</li>  
 </ul>

Then,

 
//ul/li[@id='item']/following-sibling::li[1] - selects the first <li> which is Item1.

--------------------------------------------------------------------------------------------------------------

I will be coming up with more questions in the upcoming posts. Stay Tuned. Thanks.

Do send your comment if any doubts!

Selenium Interview Questions and Answers

2020-05-09T15:18:00.011+05:30

Selenium Interview Questions and Answers

Hello Friends! this post is related to the basic Selenium Interview Questions that one should not forget to look before attending automation testing interview questions for Selenium. This article will list out 10 such basic selenium interview questions and answers.

Disclaimer : This post is related to Java Selenium Interview question and not any outher programming language.

1) What is Selenium Webdriver?

Selenium Webdriver is a free and open source set of APIs(Classes and Methods) used for the automation of browser's user interface(UI). This is one of the basic selenium interview question you will get and most of the people get it wrong by answering Selenium as a tool. But it is not a tool it is an API(Application Programming Interface).

Also, try: Selenium Quiz with Answers

2) How do you create objects of different web browsers in Selenium ?

Different web browsers in the market implement the WebDriver interface in their own way.

For creating objects of these browsers you have to assign object of the browsers to WebDriver interface.

This also helps in achieving Dynamic Polymorphism(a Java concept) i.e., you can pass the browser name at run time from some configuration files or from Testng or Jenkins.

Example :

 
 WebDriver driver = new ChromeDriver(); //For Chrome Browser  
 WebDriver driver = new FirefoxDriver(); //For Firefox Browser

3) Launch specific browser for running you Selenium Scripts?

The most important thing for running your scripts in different browser is setting the system properties with driver executable.

You can download driver executable from the respective browser's site.


 System.setProperty("driverName","executablePath"); //Syntax  
 System.setProperty("webdriver.chrome.driver","C://drivers/chrome.exe"); //Example

4) Finding a WebElement in Selenium?

findElement() is used for finding a web element in Selenium Webdriver. This method is present in the WebDriver interface and takes a locator as an argument.

Locator locates an Element with the help of By class.

Suppose you have below textbox in webpage :

 <input type="text" id="username" />

Below code can be used to find the above WebElement :

 
 driver.findElement(locator); //Syntax  
 driver.findElement(By.id("username")); //Example  
 //username is the id of webelement

5) Different ways of locating an element in Selenium?
Locators are basic building blocks for getting expert in Selenium. You need to know all the locators listed below to be a good Selenium Automation Tester.

There are 8 ways of locating an element in Selenium :
1.   Id
2.   Name
3.   Class Name
4.   CSS Selector
5.   XPath
6.   Tag Name
7.   Link Text
8.   Partial Link Text

The easiest technique for locating elements is by using Id. But most of the times developers generate IDs dynamically, making it of no use.

Apparently, XPath is the best technique for locating elements. You can check questions on XPath below:

Also Check this: Selenium Interview Questions - XPath

6) Difference between close() and quit() in Selenium?

close and quit are basic WebDriver commands for working with Windows in Selenium.

close(): closes the currently opened window.

quit(): closes all the opened windows.

7) Opening a URL in Selenium?

Below code can be used for opening a URL :


 driver.get("url of page"); //Syntax  
 driver.get("https://www.google.com"); //Example  
 //OR   
 driver.navigate().to("url of page"); //Syntax  
 driver.navigate().to("https://www.google.com"); //Example

8) Difference between driver.get() and driver.navigate().to()?

driver.get() navigates to a specified URL. It refreshes the page and doesn't allow moving forward and backward in browser history.

driver.navigate().to() navigates to a specified URL. In SPA(Single Page Applications) it doesn't refresh the page and allows moving forward and backward in browser history.

9) Entering text in a textbox - Selenium?

In Selenium Webdriver, sendKeys() can be used for entering text in a textbox. It is one of the methods of WebDriver interface which the other driver classes implement.

Suppose you have below textbox in webpage :

 <input type="text" id="username" />

Then, you have to find the input tag and enter your text using sendkeys().


 driver.findElement(By.id("username")).sendKeys("Dave"); //can be used to enter text.

10) How to Check and Uncheck a Checkbox - Selenium?

It can be done by just clicking on the checkbox.
Suppose you have below checkbox on the webpage :

 <input type="checkbox" id="city" value="mumbai" />

Then,

 driver.findElement(By.id("city")).click(); //can be used to check/uncheck a checkbox.

------------------------------------------------------------------------------------------

I will be posting more advanced questions in the upcoming posts. Stay Tuned. Thanks.

Do send your comment if any doubts!

ProgrammingDomain - All at one place

Mastering CSS Selectors in Selenium Webdriver[Java]

CSS Selectors in Selenium

How to Test/Validate CSS Selector Query

CSS Selector : ID

CSS Selector : Class

CSS Selector: Multiple Classes

CSS Selector: Selecting element using attributes

CSS Selector: Accessing Children

CSS Selector: Selecting the First Child

CSS Selector: Selecting the Last Child

CSS Selector : Selecting nth-child

CSS Selector: Finding Next Sibling

CSS Selector : Regular Expression(contains)

CSS Selector : Regular Expression(starts with)

CSS Selector : Regular Expression(ends with)

More on Selenium

What is Programming?[Basics]

What is Programming?

Agenda for today :

Programming Definition

What is a Program?

What is a Programming Language?

Types of Programming Languages

Low-Level Language :

High-Level Language :

Why Should one learn Programming?

So that’s it from my side on What is Programming. Hope you understood everything from this since I have covered things in a way that will be helpful for a beginner to understand.

You can also tell me what next you want.

If you still have any doubts you can comment down below.

Rest Assured Framework(Java, TestNG, Maven) | Test Automation Framework

Rest Assured Framework | Test Automation Framework

What is Rest API and how do we test it?

Why Rest Assured?

RestAssured Dependency

TestNG Dependency

Java Hamcrest Library

Methods used in Rest Assured

Clear? Yes?

Setting Config files for different environments

Starting up with our coding part

That is it! I want you to try out this Rest Assured Framework once.

Selenium 4 Features - 2020

Selenium 4 Features

If you want to download Selenium 4, you can directly go to the Selenium Website.

Or, download it from the Maven Repository.

Take Screenshot of Web Elements

Capturing Screenshot of a section in a web page

Opening a new tab on the browser.

Opening a new window on the browser.

Relative/Friendly Locators

getRect() for finding dimensions and position.

Selenium 3.x

Selenium 4.x

Chrome Devtools API

Selenium 3.x

Selenium 4.x

**End of Selenium 4 Features**

If you like this article please comment down below and show your support. If you want information on any other topic, comment down and let us know. Thank You!

More on Selenium

Print A to Z in Javascript

Print A to Z in Javascript

How to convert int to char in C?

How to convert int to char in C?

Also Check : How to get Ascii value of char in C?

Checkout the below code :

Output :

How to get Ascii value of char in C?

How to get Ascii value of char in C?

Checkout the below code :

Output :

Uncheck other Checkboxes on selection of one Checkbox in Javascript

Javascript Disable Checkbox when another Checkbox is checked

Also Check: How to add tooltip to textbox in Javascript?

Page Object Model in Selenium

Page Object Model in Selenium

What is Page Object Model in Selenium?

Page Factory

Waits in Selenium

Waits in Selenium

End of Selenium 4 Features

**But I would suggest adding tooltip directly in the HTML input tag using title attribute.**