Sunday, May 13, 2018

Why ChroPath ?

a small comparison between FirePath, ChroPath and Devtools selectors

comparison between FirePath, ChroPath and Devtools selectors



Tuesday, May 8, 2018

Finally ChroPath for firefox is launched.

download link ChroPath for firefox


You can use the ChroPath tool to edit, inspect and generate relative xpath, absolute xpath and CSS selectors. ChroPath makes it easy to write, edit, extract, and evaluate XPath queries on any webpage. ChroPath is the only tool which provide the unique Relative xpath and CSS selector for any web element in webpage in Firefox. ChroPath is the best relative xpath extension.

How to use ChroPath-

1. Right-click on the web page, and then click Inspect.
2. In devtools panel, click on ChroPath tab.
3. Click on inspect which is in ChroPath tab below selectors.
4. Now inspect element for which you want to generate the selectors.
5. Here in ChroPath tab you will get the unique Relative XPath, Absolute XPath and CSS selectors and you can also edit and evaluate it.
6. Please try for any website except Firefox Add-ons (https://addons.mozilla.org/en-US/firefox/addon/) because Firefox add-ons doesn't support on Firefox Add-ons.
7. To eavluate XPath/CSS, type the XPath/CSS query and press enter key.
As you enter, it will query in DOM for the relevant element/node. You can view the matching node(s) and nodes value as per their sequential occurrence. A blue colour outline appears around to highlight the matching elements in the web page.
5. If you mouse hover on any matching node in the ChroPath tab, blue dashed outline will convert into dotted orangered to highlight the corresponding element in the webpage.
6. If the found element is not in visible area on webpage then mouse hover on found node in ChroPath panel will scroll that element in the visible area with dotted orangered outline.
7. If found element is not highlighted but visible then on mouse hover on matching node on ChroPath tab it will highlight element with dotted oragered outline.
8. copy the xpath/css just by clicking on copy icon.

Note:
1- Click again on inspect to disable the inspect action.
2- Tool will add xpath/css attribute to all the matching node(s) as per their sequential occurrence. For example, a matching node appearing second in the list will have xpath=2. And if verifying CSS then it will add css=2.






Tuesday, February 6, 2018

get relative xpath just in one click - ChroPath 0.2.0

Today as per the poll and survey UI automation tester used to spend on an average 30-40% of automation script time in locators writing which now could be saved by ChroPath's relative xpath feature.
Here you go-
Just one click and copy the relative xpath. ChroPath 0.2.0
Steps to get unique relative xpath -
  • After installing ChroPath extension, reload the page for which you want to use it.
  • Right-click on the web page, and then click Inspect.
  • In the right side of Elements tab, click on ChroPath tab. Note- If ChroPath is not visible then click on the arrow icon as shown in the Screenshot. ChroPath will be shown as last tab in sidebar.
  • To generate relative xpath inspect element, it will generate the unique relative xpath for the inspected element.
  • Also you can generate relative xpath just by clicking on dom node in the element tab and it will generate the relative xpath in ChroPath tab.
  • Now you can copy this relative xpath just by clicking on copy icon.

Saturday, April 22, 2017

ChroPath. (FirePath for Chrome with advanced features.)


ChroPath. (Best XPath and CSS selector tool)
I have developed a tool ChroPath which has many advanced features missing in other XPath tools. In sort you can call it FirePath for Chrome with advanced features.

What is ChroPath- Development tool to edit, inspect and generate XPath and CSS selectors. It will give you the absolute XPath and CSS selector for inspected or selected node. You can also write the XPath/CSS selector in ChroPath accessing DOM and verify there itself in Devtools.

For sure, you will think there are so many XPath/CSS tools for chrome then why this.

Here is the reason why to use ChroPath-

1. ChroPath is the only tool for Chrome which will give you absolute XPath or CSS selector for inspected element or selected node.
2. It opens as sidebar tab in Chrome devtools where you can access DOM, inspect element in left side and get the XPath/CSS in right side and also you can edit it and evaluate there itself.
2. It will scroll the window to the 1st matching node (will scroll if 1st matching element not in visible area).
3. You can view the matching node(s) and nodes value as per their sequential occurrence. A dashed blue outline appears around to highlight all the matching elements in the web page.
4. If you mouse hover on any matching node in the ChroPath tab, blue dashed outline will convert into dotted orangered to highlight the corresponding element in the webpage.
5. If the found element is not in visible area on webpage then mouse hover on found node in ChroPath tab will scroll that element in the visible area with dotted orangered outline.
6. If found element is not highlighted but visible on webpage, on mouse hover on matching node in ChroPath tab it will highlight element with dotted orangered outline.
7. If you enter wrong XPath/CSS pattern it will highlight the input field in red color.

Download Link

How to use it-

1. Open link in Chrome browser and add the extension.
Instructions :
2. After installing this extension, reload the page for which you want to test it.
3. Right-click on the web page, and then click Inspect.
4. In the right side of Elements tab, click on ChroPath tab.
Note- If ChroPath is not visible then click on the arrow icon as shown in the Screenshot. ChroPath will be shown as last tab in sidebar.
5. Type the XPath/CSS query and press enter key.

Note-
  •  To use CSS features, first change the dropdown value from XPath to CSS in header.
  •  Tool will add xpath/css attribute to all the matching node(s) as per their sequential occurrence. For example, a matching node appearing second in the list will have xpath=2. And if verifying CSS then it will add css=2.
If you have any feedback or need any feature improvement in the tool please add your review/comment in the ChroPath download link. Thank you.






Thursday, August 20, 2015

How to login into any site if its showing any authentication popup for user name and pass ?

How to login into any site if its showing any authentication pop-up for user name and pass ?
Ans - pass the username and password with url.
Syntax- http://username:password@url
ex- http://creyate:jamesbond007@alpha.creyate.com

Saturday, August 8, 2015

How to test the mobile site or how to open mobile browser in desktop using selenium

There is 2 ways to test your website on mobile browser-
1) if your domain name in mobile open like-> m.domainName.com 
then you can directly open the mobile site on simple browser opened by WebDriver and start working.
for ex- http://m.jabong.com/,  http://m.goibibo.com/

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class MobileSite {
    public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        driver.get("http://m.goibibo.com/");
    }
}

2)  if your domain name in mobile open like--> www.domainName.com then it is required to change the user agent while opening the browser thru selenium. By changing the user agent, it will open the browser in mobile mode (same as opened in mobile).

Please find the code below-

import java.io.IOException;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxProfile;

public class MobileBrowser {
    public static void main(String[] args) throws InterruptedException, IOException {
        System.out.println("program start");
        FirefoxProfile ffprofile = new FirefoxProfile();
        ffprofile.setPreference("general.useragent.override", "iPhone"); //this will change the user agent which will open mobile browser
        WebDriver driver = new FirefoxDriver(ffprofile);
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.manage().window().setSize(new Dimension(400,800)); //just to change the window size so that it will look like mobile ;)
        driver.get("http://www.fabfurnish.com/");
       
        //lets try sign in
        driver.findElement(By.id("nav-menu")).click(); //click on right corner bar icon
        driver.findElement(By.xpath("//a[@href='/customer/login']/img")).click(); //click on login
        driver.findElement(By.id("m_log_button")).click();
        driver.findElement(By.id("LoginForm_email")).sendKeys("yourEmailId@gmail.com");
        driver.findElement(By.id("LoginForm_password")).sendKeys("yourPassword");
        driver.findElement(By.xpath("//input[@value='Login']")).click();
        System.out.println("End");
    }
}

Note- To write the xpath, you can use simply use as usual Firepath with Firebug only. Here you can find the how to change the user agent manually in firefox ?
After changing the user-agent when you will open the website, it will open as in mobile browser and now you can use firebug/firepath as usual.

How to change the user agent manually in firefox ?

The User Agent Switcher extension adds a menu inside Tools option of the toolbar menu to switch the user agent of a browser. The extension is available for Firefox and will run on any platform i.e. this browser supports including Windows, OS X, Linux and Mac. 

Please find the link below to download the user agent switcher-
user-agent-switcher

How to use- After changing the user agent, reload the page or open the url in new tab.