Take Screenshot of WebElement in Selenium || New Selenium 4 feature - Naveen AutomationLabs




Take Screenshot of WebElement in Selenium || New Selenium 4 feature



In this blog, I have explained how to take screenshot for a web element in Selenium 4 version. This is the new feature in Selenium 4, earlier we could only take screenshot only for web page, now you can take screenshot for elements and use them with your bug report.



Watch Full video here:



Source Code:




package WM;

import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

import io.github.bonigarcia.wdm.WebDriverManager;

public class TakeElementScreenshot {

public static void main(String[] args) throws IOException {

WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

driver.get("https://app.hubspot.com/login");

WebElement email = driver.findElement(By.id("username"));
WebElement password = driver.findElement(By.id("password"));
WebElement loginButton = driver.findElement(By.id("loginBtn"));
WebElement forgotPwd = driver.findElement(By.linkText("Forgot my password"));

email.sendKeys("naveen@gmail.com");
password.sendKeys("Test@123");
takeElementScreenshot(email, "emailElement");
takeElementScreenshot(password, "passwordElement");
takeElementScreenshot(loginButton, "loginButtonElement");
takeElementScreenshot(forgotPwd, "forgotPwdLink");

driver.quit();

}

//take screenshot using getScreenshotAs() method.

public static void takeElementScreenshot(WebElement element, String fileName) {

File srcFile = element.getScreenshotAs(OutputType.FILE);
try {
FileUtils.copyFile(srcFile, new File("./target/screenshots/" + fileName + ".png"));
} catch (IOException e) {
e.printStackTrace();
}

}

}

Executing Maven Project in windows from Command Prompt:



Executing Maven Project in windows from Command Prompt


Section-I:        
Pre-requisites:
Go to Menu Bar in Eclipse >> Window >> Preferences.     
Check if Maven is integrated with Eclipse or No.
[If you download Eclipse Neon Version, by default Maven will be integrated with Eclipse].

If Maven is integrated with Eclipse then we are good to create Maven Project.                           
If not installed go to Menu Bar >> Help >> Eclipse Market Place and Search by Maven and install required Maven Plugins shown below.










Section II:                                                                                                                                                                                    
 Steps to install Maven Jar Files and Setting Path in Environment Variables: https://maven.apache.org/download.cgi                                                                                                   
Download below highlighted Zip File.                                                                                                                                                      
Once download is completed, unzip it and keep it in any drive in your local system.                                
It is always good practice to keep it in C Drive.

Now we need to set path for Maven in Environment Variables:                                                         
Go to My Computer >> Right Click >> Properties >> Advanced System Settings.                               
 Now Go to Environment Variables and Set Pat as shown below.                                                               
[In my case i have kept Maven Jars in C Drive]                            
                                                                                 

     
Now Add Bin Path of Maven in below Path 
highlighted                                                    
  
C:\Program Files\Maven\apache-maven-3.6.1\bin
                                           
Once Path is set for Maven in Environment Variables.                                                                                              
Go to Command Prompt and type command as shown below to make sure that Maven is installed or not.
                                                                               
                                                                                                                               
If Maven is installed then we will see as highlighted above and now we are good to execute Maven Project. 
Section III:                                                                                                                                                                                           
 Now Executing Maven Project from Command Prompt.                             
                                                                   
To Execute Maven Project from Command Prompt, In pom.xml 
Maven Surefire Plugin must be added.

<build>
<plugins>
                                    <plugin>
                                                      <groupId>org.apache.maven.plugins</groupId>
                                                      <artifactId>maven-surefire-plugin</artifactId>
                                                      <version>2.18.1</version>
                                                      <configuration>
                                                                        <suiteXmlFiles>
                                                                                          <suiteXmlFile>testng_sanity.xml</suiteXmlFile>                                                                                                        </suiteXmlFiles>
                                                      </configuration>
                                    </plugin>
                  </plugins>
</build>

Now Go to Command Promp
Go to Project Folder as shown below

Now Use below commands to execute Maven Project from 
Command Prompt                          
1. mvn clean install : It will execute all test cases as well as it will generate a build. Build will be generated under target folder.                                                                                                                                                                   
2. mvn clean test : It will execute only test cases and it won’t generate build.



This blog is written by Pavan. He is an expert in Selenium Automation and currently working in Infosys as Automation QA Engineer. Also, he is helping QA community with his knowledge along with Naveen AutomationLabs!! 

Cheers!
Naveen AutomationLabs


Payment Details



Naveen AutomationLabs Online Courses:


Payment Options:


Here I'm sharing the bank account details. Please send me the screenshot of the receipt once you make the payment without fail. 

Please send the details at : naveenanimation20@gmail.com
Subject Line: Online Course Payment Receipt - Your Full Name

Please find below bank details: You can make the transaction directly to the given account or make it via Western Union Or Xoom.

Bank Details:
Name : MANALI GUPTA
To Account : 256010100095576
Bank Name : AXIS BANK
City: GUJARAT
Branch Location : PALANPUR, GUJRAT 
IFSC Code: UTIB0000256     

PayPal Payment: 

For Candidates in India:
You can also make the payment via Tez (Google Pay) OR PhonePe :
UPI to this number: +91-9902233400. 
UPI: naveenanimation20@okicici 
OR Google IDnaveenanimation20@gmail.com





Push Code to Git Repositories using Command Prompt

Steps to Push Code to Git Repositories using Command Prompt


                             
Pre-requisites:      
1. Download Git from below Link:
  https://git-scm.com/download/win/ [Git must be installed in Local System].
2. Once Git is installed >> SSH Key should be Added in Git.
Login to Github >> Go to Settings >> User should be able to see SSH and GPG Keys on Left Side Panel as per below Screenshot.                  
Click on SSH and GPG Keys >> User should be able to see as shown below in same page.
Now Click on New SSH Key and Add SSH Key.
Below are the Steps to Generate SSH Key using Git bash:          
Step1: Launch git bash.
Step2: Type ssh-keygen -t rsa -> Enter -> Enter -> Enter -> Key will be generated.

Admin@Admin-PC MINGW64 ~
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Admin/.ssh/id_rsa):
/c/Users/Admin/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Admin/.ssh/id_rsa.
Your public key has been saved in /c/Users/Admin/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:RWDx9MsZekrqrGMqKoL7tWVvjq51BSlUnzknk78RAzU Admin@Admin-PC



Now Go to Path as shown above which is highlighted.              
[Path will be changed from System to System].
Open the File which is of Publisher type and user should be able to see SSH Key which needs to be added in Git.             
    [Make sure key is starting with ssh-rsa].
Once SSH key is added, you are good to add your code to created repository in Git.

Note: We can add as many as ssh keys, if we need to give permission for someone who can contribute to our repositories.

Below are the commands to Push Code from Command Prompt:
Step 1:  Open Command Prompt.
Step 2:  Go to Folder/Workspace where your project/files stored.
In my case my project is stored in D: Drive and User should be in Project Folder.

Step 3: git init >> Command to initialise project with repository.
Step 4: git status >> To check status.
Since my project is already associated with created repository, it is showing as Reinitialized existing Git Repository.  If it is not initialized, still you can proceed and you can initialize later on.
Then I am checking status of files >> All files are highlighted in Red color because they are not ready to be committed.

Step 5: git add . Or git add Filename >> Commands to add all files or To add particular File.
Step 6: git status >> To check status. 
Now all files are highlighted in Green color because all files are ready to be Committed.
Step 7: git commit –m "Comment Message"
Step 8: git status
Now my code is ready to be pushed to Repository.

If Project is not initialised with GIT Repository  - Follow below command to initialise project with GIT Repository before pushing code to Repository. [It is a One Time Activity].
If Project is already initialzed you can ignore Step-9.

Step 9: git remote add  origin "Path of Git Repository"
Now Project will be initialised with GIT Repository and we are good to push our code.

Step 9: git push origin master [Master >> Branch Name].
If it asks for credentials >> Enter Valid Username and Password.
Code is Pushed to initialised GIT Repository.


Other git commands:
git clone “repository path“ – To download or clone complete repository from git.

git pull origin master – Once repository is cloned from git to local and we udpate any code for same repository in git. To get same code to be udpated in Local and in Eclipse we can use this command.


This blog is written by Pavan. He is an expert in Selenium Automation and currently working in Infosys as Automation QA Engineer. Also, he is helping QA community with his knowledge along with Naveen AutomationLabs!!


Cheers!
Naveen AutomationLabs



Featured Post

How to control Chromedriver using curl

How to control Chromedriver using curl Here is how to use Chromedriver without libraries like  selenium-webdriver . This can be useful ...