Locators
----------
Addressing Webelements in WebDriver
WD will identify webelements in a page using locator values
Locators are the html propeties/attributes values of a webelement
Syntax:
driver.findElement(By.LocatorName("Locator value"));
WD Supports 8 types of locators:
1. id
2. name
3. className
4. tagName
5. linkText
6. partialLinkText
7. xpath
8. cssSelector
1. id:
It is most commonly used locator to address webelement
Syntax:
driver.findElement(By.id(id value));
NOTE:
i. click():
Click method is used to perform mouse click on specifed webElement
Syntax:
webelement.click();
ii. sendKeys():
SendKeys method is used to enter data in input objects
Syntax:
webelement.sendKeys(data);
/*Exercise:
Launch FireFox Browser
Open salesforce login Page
Maximize the browser window
Enter Username
Enter Password
Click on Login Button
Close browser*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("https://login.salesforce.com");
//To maximize the browser window
driver.manage().window().maximize();
//To enter Username (Invalid Username)
driver.findElement(By.id("username")).sendKeys("SeleniumClass");
//To enter Password (Invalid Password)
driver.findElement(By.id("password")).sendKeys("Password123");
//To click on Login Button
driver.findElement(By.id("Login")).click();
//To close browser
driver.close();
2. name:
Name is also used as a locator to address webelements
Syntax:
driver.findElement(By.name(name value));
/*Exercise:
Launch FireFox Browser
Open ("http://newtours.demoaut.com")
Maximize the browser window
Enter Username
Enter Password
Click on Login Button
Close browser*/a
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://newtours.demoaut.com");
//To maximize the browser window
driver.manage().window().maximize();
//To enter Username (Valid Username)
driver.findElement(By.name("userName")).sendKeys("mercury");
//To enter Password (Valid Password)
driver.findElement(By.name("password")).sendKeys("mercury");
//To click on Login Button
driver.findElement(By.name("login")).click();
//To close browser
driver.close();
3. className:
className is also used as a locator to address webelements
However, className may not be unique to identify webelements
Syntax:
driver.findElement(By.className(className value));
/*Exercise:
Launch FireFox Browser
Open ("http://facebook.com")
Maximize the browser window
Enter value in password edit box using "className" as a locator*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://facebook.com");
//To maximize the browser window
driver.manage().window().maximize();
//To enter value in password edit box
driver.findElement(By.className("inputtext")).sendKeys("Password");
NOTE: It will enter value in Email edit box because className"inputtext" not unique,
Email edit box className is also "inputtext" Plz check using Firebug
If similar attribute values exist for webelements on a page, WD will identify fist webelement from
the root tag, in this case, Email edit box is the first element from the root tag
4. linkText:
Used to locate Hyperlinks on a webpage
Hyperlinks tab will always starts with "a" (Anchor tag)
Syntax:
driver.findElement(By.linkText(visible text of link));
/*Exercise:
Launch FireFox Browser
Open ("http://facebook.com")
Maximize the browser window
Click on "forgotten account?" using linkText locator*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://facebook.com");
//To maximize the browser window
driver.manage().window().maximize();
//To click on "forgotten account" link
driver.findElement(By.linkText("Forgotten account?")).click();
5. partialLinkText():
this locator also used to address hyperlinks
syntax:
driver.findElement(By.partialLinkText(partial visible text of link));
/*Exercise:
Launch FireFox Browser
Open ("http://facebook.com")
Maximize the browser window
Click on "account?" link using partialLinkText locator*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://facebook.com");
//To maximize the browser window
driver.manage().window().maximize();
//To click on link
driver.findElement(By.partialLinkText(" account?")).click();
NOTE:
In general, partialLinkText locator is preferred for dynamic links that constantly change
Exp:
Your order no. 110150 (the number may change time to time)
6. tagName:
This locator is used to address similar type of objects on a page
Syntax:
driver.findElements(By.tagname(value));
7. xpath:
xpath ("x" stands for XML, extendable markup language)
using expath we can address webelements based on hierarchy of tag names in a page
In General, xpath is used when a webelement doesnt have any proper attribute values,
so as cssSelector
Finding xpath on a webpage:
i. Using "firepath"
firepath is an add-on to firefox browser
download and install firepath from firefox browser
once installed, right click on any element on the webpage
click on "Inspect in Firepath"
you will be able to see xpath correctly
NOTE: Precondition for firepath, Ensure Firebug is already installed in your machine
in order for firth path to work
There are two types of xpath:
a. Absolute xpath:
b. Relative xpath:
a. Absolute xpath:
addressing webelement from root tag in a page
absolute xpath can be prefixed with "/"
Exp: Html code in a webpage
html...
header
body
div...
input...
li...
li...
input...
input id="abcd"
Absolute xpath:
/html/body/input/li[2]/input[2]
Exp:
Find Absolute xpath for "Email" edit box on yahoomail homepage
Manually written xpath: /html/body/div[2]/div/div/form/div/input
or
Firepath Generated xpath: html/body/div[2]/div[1]/div[1]/form/div/input
Finding Absolute xpath for a webelement using Firepath
Right click on any element
Click on "Inspect in FirePath"
Ensure "Generate Absolute Xpath" is cheked under FirePath Dropdown
Absolute xpath is generated successfully
NOTE: Checked "Generate Absolute Xpath" option is used for "Absolute Xpath"
Exp:
Find Absolute xpath for "Next" button on yahoomail homepage
Manually written xpath: /html/body/div[2]/div/div/form/input[3]
or
Firepath Generated xpath: html/body/div[2]/div[1]/div[1]/form/input[3]
Exp:
Find absolute xpath for "sign in" object in www.amazon.in
Manually written xpath: /html/body/div/div[3]/div/div/div/div[3]/div/a/span
or
Firepath Generated xpath: html/body/div[1]/div[3]/div/div[1]/div/div[2]/div[1]/a/span
NOTE: The Absolute xpath in above example has changed between Manually written and Firepath generated
that is becuase there is two days difference between manually written xpath and
Firepath generated xpath, amazon has made some changes on the webpage in last two days.
Everytime, there is a change on webpage, the absolute xpath changes,
this is the reason why absolute xpath is NOT a preferred locator
Exp:
Find absolute xpath for "Next" button in Gmail-home page using Firepath
Firepath Generated xpath: html/body/div[1]/div[1]/div[2]/div[2]/div/div/div[2]/div/div[2]/div/div[1]/div/content/span
b. Relative xpath:
Relative xpath is prefered more than Absolute xpath
Relative xpath is a combination of tagname and anyone of the
attribute value of a webelement
Syntax:
//tagname[@attributename='value']
Exp: Write relative xpath for "Email" edit box in Gmail-home page
//input[@id='identifierId']
or
//input[@name='identifier']
or
//input[@type='email']
Different options in Relative xpath:
i. using "*" in Relative xpath
syntax:
//*[@attribute='value']
here "*" represents any tagname
ex:
//*[@name='identifier']
Finding Relative xpath for a webelement using Firepath
Right click on any element
Click on "Inspect in FirePath"
Ensure "Generate Absolute Xpath" is uncheked under FirePath Dropdown
Relative xpath is generated successfully
NOTE: Unchecked "Generate Absolute Xpath" is used to Generate "Relative Xpath"
ii. Providing multiple attribute values using Relative xpath
we can also give more than one attribute values to address a webelement
syntax:
//tagname[@attribute1='value'][@attribute2='value']
Exp:
//input[@name='identifier'][@type='email']
or
//*[@name='identifier'][@type='email']
iii. Using text():
Used to identify a webelement through visibletext
syntax:
//tagname[text()='visibletext']
Exp:
//span[text()='Forgot email?']
iv. **traversing xpath:
It is a combination of relative xpath and absolute xpath
In following scenarios Traversing xpath is prefered
a. When there are similar objects exist in a page
b. When webelement properties are changing during runtime (i.e. Dynamic objects)
Exp: Finding traversing xpath for "signin" object in www.amazon.in"
//div[@id='rhf-container']/div/div[3]/div/a/span
Exp: Finding traversing xpath for "6E senior citizen" webelement in www.goindigo.in
//div[@id='oneWay']/form/div/div/div/ul/li[3]/div/label
Exp: Finding traversing xpath for "New pwd" edit box based on create account section
in a FB-home page
//div[@id='reg_form_box']/div[5]/div/div/input
8. cssSelector:
Cascading Style Sheet
Used to identify the webelements which doesn't have proper attribute values
Syntax:
driver.findElement(By.cssSelector(value));
cssSelector syntax:
tagname[attribute='value']
Exp:
input[id='identifierId']
or
tagname[text()='visibletext']
Exp:
span[text()='Next'] //for "Next" button in "Gmail-home page"
NOTE: CssSelector identification is much faster than xpath during Runtime,
but xpath is prefered locator
Exp: Writing script to perform login operation on Salesforce application using xpath
/*Exercise:
Launch FireFox Browser
Open ("https://login.salesforce.com")
Maximize the browser window
Enter username using xpath
Enter password using xpath
Click on Login using xpath*/
//To launch firefox browser
WebDriver driver= new FirefoxDriver();
//To Open salesforce Login Page
driver.get("https://login.salesforce.com");
//To maximize the browser window
driver.manage().window().maximize();
//To Enter username using xpath
driver.findElement(By.xpath("//input[@id='username']")).sendKeys("SeleniumClass");
//To Enter password using xpath
driver.findElement(By.xpath("//input[@id='password']")).sendKeys("Password");
//To Click on Login Button using xpath
driver.findElement(By.xpath("//input[@id='Login']")).click();
Exp: Writing script to perform login operation on mercury tours application using cssSelector
/*Exercise:
Launch FireFox Browser
Open ("https://login.salesforce.com")
Maximize the browser window
Enter username using cssSelector
Enter password using cssSelector
Click on Login using cssSelector*/
//To launch firefox browser
WebDriver driver= new FirefoxDriver();
//To Open salesforce Login Page
driver.get("https://login.salesforce.com");
//To maximize the browser window
driver.manage().window().maximize();
//To Enter username using cssSelector
driver.findElement(By.cssSelector("input[name='username']")).sendKeys("SeleniumClass");
//To Enter password using cssSelector
driver.findElement(By.cssSelector("input[name='password']")).sendKeys("Password");
//To Click on Login Button using cssSelector
driver.findElement(By.cssSelector("input[name='Login']")).click();
----------
Addressing Webelements in WebDriver
WD will identify webelements in a page using locator values
Locators are the html propeties/attributes values of a webelement
Syntax:
driver.findElement(By.LocatorName("Locator value"));
WD Supports 8 types of locators:
1. id
2. name
3. className
4. tagName
5. linkText
6. partialLinkText
7. xpath
8. cssSelector
1. id:
It is most commonly used locator to address webelement
Syntax:
driver.findElement(By.id(id value));
NOTE:
i. click():
Click method is used to perform mouse click on specifed webElement
Syntax:
webelement.click();
ii. sendKeys():
SendKeys method is used to enter data in input objects
Syntax:
webelement.sendKeys(data);
/*Exercise:
Launch FireFox Browser
Open salesforce login Page
Maximize the browser window
Enter Username
Enter Password
Click on Login Button
Close browser*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("https://login.salesforce.com");
//To maximize the browser window
driver.manage().window().maximize();
//To enter Username (Invalid Username)
driver.findElement(By.id("username")).sendKeys("SeleniumClass");
//To enter Password (Invalid Password)
driver.findElement(By.id("password")).sendKeys("Password123");
//To click on Login Button
driver.findElement(By.id("Login")).click();
//To close browser
driver.close();
2. name:
Name is also used as a locator to address webelements
Syntax:
driver.findElement(By.name(name value));
/*Exercise:
Launch FireFox Browser
Open ("http://newtours.demoaut.com")
Maximize the browser window
Enter Username
Enter Password
Click on Login Button
Close browser*/a
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://newtours.demoaut.com");
//To maximize the browser window
driver.manage().window().maximize();
//To enter Username (Valid Username)
driver.findElement(By.name("userName")).sendKeys("mercury");
//To enter Password (Valid Password)
driver.findElement(By.name("password")).sendKeys("mercury");
//To click on Login Button
driver.findElement(By.name("login")).click();
//To close browser
driver.close();
3. className:
className is also used as a locator to address webelements
However, className may not be unique to identify webelements
Syntax:
driver.findElement(By.className(className value));
/*Exercise:
Launch FireFox Browser
Open ("http://facebook.com")
Maximize the browser window
Enter value in password edit box using "className" as a locator*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://facebook.com");
//To maximize the browser window
driver.manage().window().maximize();
//To enter value in password edit box
driver.findElement(By.className("inputtext")).sendKeys("Password");
NOTE: It will enter value in Email edit box because className"inputtext" not unique,
Email edit box className is also "inputtext" Plz check using Firebug
If similar attribute values exist for webelements on a page, WD will identify fist webelement from
the root tag, in this case, Email edit box is the first element from the root tag
4. linkText:
Used to locate Hyperlinks on a webpage
Hyperlinks tab will always starts with "a" (Anchor tag)
Syntax:
driver.findElement(By.linkText(visible text of link));
/*Exercise:
Launch FireFox Browser
Open ("http://facebook.com")
Maximize the browser window
Click on "forgotten account?" using linkText locator*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://facebook.com");
//To maximize the browser window
driver.manage().window().maximize();
//To click on "forgotten account" link
driver.findElement(By.linkText("Forgotten account?")).click();
5. partialLinkText():
this locator also used to address hyperlinks
syntax:
driver.findElement(By.partialLinkText(partial visible text of link));
/*Exercise:
Launch FireFox Browser
Open ("http://facebook.com")
Maximize the browser window
Click on "account?" link using partialLinkText locator*/
//To launch firefox browser
WebDriver driver=new FirefoxDriver();
//To Open salesforce Login Page
driver.get("http://facebook.com");
//To maximize the browser window
driver.manage().window().maximize();
//To click on link
driver.findElement(By.partialLinkText(" account?")).click();
NOTE:
In general, partialLinkText locator is preferred for dynamic links that constantly change
Exp:
Your order no. 110150 (the number may change time to time)
6. tagName:
This locator is used to address similar type of objects on a page
Syntax:
driver.findElements(By.tagname(value));
7. xpath:
xpath ("x" stands for XML, extendable markup language)
using expath we can address webelements based on hierarchy of tag names in a page
In General, xpath is used when a webelement doesnt have any proper attribute values,
so as cssSelector
Finding xpath on a webpage:
i. Using "firepath"
firepath is an add-on to firefox browser
download and install firepath from firefox browser
once installed, right click on any element on the webpage
click on "Inspect in Firepath"
you will be able to see xpath correctly
NOTE: Precondition for firepath, Ensure Firebug is already installed in your machine
in order for firth path to work
There are two types of xpath:
a. Absolute xpath:
b. Relative xpath:
a. Absolute xpath:
addressing webelement from root tag in a page
absolute xpath can be prefixed with "/"
Exp: Html code in a webpage
html...
header
body
div...
input...
li...
li...
input...
input id="abcd"
Absolute xpath:
/html/body/input/li[2]/input[2]
Exp:
Find Absolute xpath for "Email" edit box on yahoomail homepage
Manually written xpath: /html/body/div[2]/div/div/form/div/input
or
Firepath Generated xpath: html/body/div[2]/div[1]/div[1]/form/div/input
Finding Absolute xpath for a webelement using Firepath
Right click on any element
Click on "Inspect in FirePath"
Ensure "Generate Absolute Xpath" is cheked under FirePath Dropdown
Absolute xpath is generated successfully
NOTE: Checked "Generate Absolute Xpath" option is used for "Absolute Xpath"
Exp:
Find Absolute xpath for "Next" button on yahoomail homepage
Manually written xpath: /html/body/div[2]/div/div/form/input[3]
or
Firepath Generated xpath: html/body/div[2]/div[1]/div[1]/form/input[3]
Exp:
Find absolute xpath for "sign in" object in www.amazon.in
Manually written xpath: /html/body/div/div[3]/div/div/div/div[3]/div/a/span
or
Firepath Generated xpath: html/body/div[1]/div[3]/div/div[1]/div/div[2]/div[1]/a/span
NOTE: The Absolute xpath in above example has changed between Manually written and Firepath generated
that is becuase there is two days difference between manually written xpath and
Firepath generated xpath, amazon has made some changes on the webpage in last two days.
Everytime, there is a change on webpage, the absolute xpath changes,
this is the reason why absolute xpath is NOT a preferred locator
Exp:
Find absolute xpath for "Next" button in Gmail-home page using Firepath
Firepath Generated xpath: html/body/div[1]/div[1]/div[2]/div[2]/div/div/div[2]/div/div[2]/div/div[1]/div/content/span
b. Relative xpath:
Relative xpath is prefered more than Absolute xpath
Relative xpath is a combination of tagname and anyone of the
attribute value of a webelement
Syntax:
//tagname[@attributename='value']
Exp: Write relative xpath for "Email" edit box in Gmail-home page
//input[@id='identifierId']
or
//input[@name='identifier']
or
//input[@type='email']
Different options in Relative xpath:
i. using "*" in Relative xpath
syntax:
//*[@attribute='value']
here "*" represents any tagname
ex:
//*[@name='identifier']
Finding Relative xpath for a webelement using Firepath
Right click on any element
Click on "Inspect in FirePath"
Ensure "Generate Absolute Xpath" is uncheked under FirePath Dropdown
Relative xpath is generated successfully
NOTE: Unchecked "Generate Absolute Xpath" is used to Generate "Relative Xpath"
ii. Providing multiple attribute values using Relative xpath
we can also give more than one attribute values to address a webelement
syntax:
//tagname[@attribute1='value'][@attribute2='value']
Exp:
//input[@name='identifier'][@type='email']
or
//*[@name='identifier'][@type='email']
iii. Using text():
Used to identify a webelement through visibletext
syntax:
//tagname[text()='visibletext']
Exp:
//span[text()='Forgot email?']
iv. **traversing xpath:
It is a combination of relative xpath and absolute xpath
In following scenarios Traversing xpath is prefered
a. When there are similar objects exist in a page
b. When webelement properties are changing during runtime (i.e. Dynamic objects)
Exp: Finding traversing xpath for "signin" object in www.amazon.in"
//div[@id='rhf-container']/div/div[3]/div/a/span
Exp: Finding traversing xpath for "6E senior citizen" webelement in www.goindigo.in
//div[@id='oneWay']/form/div/div/div/ul/li[3]/div/label
Exp: Finding traversing xpath for "New pwd" edit box based on create account section
in a FB-home page
//div[@id='reg_form_box']/div[5]/div/div/input
8. cssSelector:
Cascading Style Sheet
Used to identify the webelements which doesn't have proper attribute values
Syntax:
driver.findElement(By.cssSelector(value));
cssSelector syntax:
tagname[attribute='value']
Exp:
input[id='identifierId']
or
tagname[text()='visibletext']
Exp:
span[text()='Next'] //for "Next" button in "Gmail-home page"
NOTE: CssSelector identification is much faster than xpath during Runtime,
but xpath is prefered locator
Exp: Writing script to perform login operation on Salesforce application using xpath
/*Exercise:
Launch FireFox Browser
Open ("https://login.salesforce.com")
Maximize the browser window
Enter username using xpath
Enter password using xpath
Click on Login using xpath*/
//To launch firefox browser
WebDriver driver= new FirefoxDriver();
//To Open salesforce Login Page
driver.get("https://login.salesforce.com");
//To maximize the browser window
driver.manage().window().maximize();
//To Enter username using xpath
driver.findElement(By.xpath("//input[@id='username']")).sendKeys("SeleniumClass");
//To Enter password using xpath
driver.findElement(By.xpath("//input[@id='password']")).sendKeys("Password");
//To Click on Login Button using xpath
driver.findElement(By.xpath("//input[@id='Login']")).click();
Exp: Writing script to perform login operation on mercury tours application using cssSelector
/*Exercise:
Launch FireFox Browser
Open ("https://login.salesforce.com")
Maximize the browser window
Enter username using cssSelector
Enter password using cssSelector
Click on Login using cssSelector*/
//To launch firefox browser
WebDriver driver= new FirefoxDriver();
//To Open salesforce Login Page
driver.get("https://login.salesforce.com");
//To maximize the browser window
driver.manage().window().maximize();
//To Enter username using cssSelector
driver.findElement(By.cssSelector("input[name='username']")).sendKeys("SeleniumClass");
//To Enter password using cssSelector
driver.findElement(By.cssSelector("input[name='password']")).sendKeys("Password");
//To Click on Login Button using cssSelector
driver.findElement(By.cssSelector("input[name='Login']")).click();
No comments:
Post a Comment