RameshQaAutomationPlatform

WebElements Types:
1)editbox/textbox ---type action
ex:email_editbox
password_editbox
2)button - ----click action
ex:login_button
signup_button

3)checkbox --click action
keepmeloggedin_checkbox

4)radio button --click action
female_radiobutton
male_radiobutton

5)listbox/combobox --to open the lisbox click on it -->to select an option click on that option.

rule1)editbox,button,checkbox,radiobutton and listbox/combobox is
represented in html by <input>
2)some times button is represented in html by <button>

6)Dropdown --to select an option from dropdown.
ex:month_dropdown
dropdowns are represented in html by <select>
dropdown option is represented in html by <option>
<select id="month" class="rete" title="Month" name="Birthday_Month">
<option value="1">Jan</option>
<option value="2">Feb</option>
</select>
Multiselection dropdown

7)links ---click action.
links are reprsented in html by <a>
<a href="http://google.com">Google</a>
forgot your password_link

8)images

images are represented in html by <img>

9)Static text
span/div/td tag is used for static text
<span>statictext</span>
<div>statictext</div>
10)header text
headertext is represented in html by <h1> to <h6>

11) LOGO
12)labels are represented in html by <label>
13)division is represented in html by <div>
14)forms are represented in html by <form>
15)frames are represented in html by <frame>
16)internal frames are represented in html by <iframe>
17)table is represented in html by <table>
18)table body is represented in html by <tbody>
19)table rows are represented in html by <tr>
20)table columns are represented in html <td>
21)page title is represented in html by <title>
======================
HMTL
======================
<html> --starttag
<head> --starttag
<title>page title</title>
</head>
<body>
<input id="test" name="test2" class="inputtext" type="" value="">
<a href="">linkname</a>

</body>
</html> ---endtag

=============================================
Attributes:the characterstics of an element, it gives more info about the element.

syntax:
attributename="attributevalue"

attributes are written inside the open tag, after the tag name you can find all the attributes

Attributes names:
id
name
class
value
type
title
href
src
alt
tabindex
onclick
link url will be available in href attribute
image source is avaiable in src attribute
tooltip of an element is available in title attribute

WebElementTheory&HTML Concepts Video

================================================
While writing scripts for testing a web application using any automation tools, the tool should identify the web elements or web objects appropriately to perform the desired operation like click or enter text on the corresponding web element/object. This is called object identification. Every application is made of various objects like links, button, text box, drop down selector, radio button, list boxes, sliders, etc

Accurate object identification is a very critical part of automating your application as only if you identify the right object, rest of your script runs without throwing errors.

Q)How can you identify the webpage elements in selelenium?
Ans)using locators

what are the locators in selenium?
SIDE/RC Locators
id
name
class
link
css
xpath
dom
Webdriver locators:

id("idvalue")

name("namevalue")

className("classvalue")

xpath("xpathvalue")

cssSelector("cssvalue")

tagName("tagvalue")

linkText("linkname")

partialLinkText("partiallinktext")

all above webdriver locators are static methods in By class
The most efficient and preferred way to locate web elements on a web page is by ID as ID will be unique for every element. Thus, IDs being the safest and fastest option to identify an element is the first choice for object identification.

Selenium IDE/katalonRecorder Syntax:

id=idvalue

if we want to identify username editbox in the below screenshot write idvalue in middle portion targetfiled of the katalon recorder like below
id=login1

WebDriver Syntax:
driver.findElement(By.id(“Element ID value”));

driver.findElement(By.id("login1"));

But, many cases IDs may not be mentioned in HTML codes of the webpage. In such cases you would have to go for other locators.
2)identifying the element by name
The second preferred choice if ID is not mentioned for the element. But ensure the Name attribute is unique in the webpage because like IDs, Name attribute need not be unique always. So there is a chance that there may be other elements having same Name and your script might end up selecting the wrong element.

Selenium IDE/katalonRecorder Syntax:
name=namevalue

if we want to identify password editbox in the below screenshot write nameattributevalue in middle portion targetfiled of the katalon recorder like below

WebDriver Syntax:
driver.findElement(By.name(“nameattributevalue”));

//identifying the password editbox using name locator

driver.findElement(By.name("passwd"));

3)identifying the element by class
This is yet another locator used for identifying web elements. But if you are using Class name for element identification, make sure it is unique. There may be many elements with same class name. This locator is often used in identifying a group of elements having same class and performing some operations on it.

Selenium IDE/katalonRecorder Syntax:

class=classvalue

WebDriver Syntax:
driver.findElement(By.className(“classattributevalue”));

//identifying the password editbox using name locator

driver.findElement(By.className("nav__button-secondary"));

4)how to identify the link
The link text is the visible clickable text in a hyperlink. It is the text in between the anchor tags. Here also, make sure of uniqueness. There may be multiple links with same text such as in repeated header and footer menus. If there are repeated occurrences, Selenium will perform the action on the first matching element with the link text.

link=linkname

WebDriver Syntax:
driver.findElement(By.linkText("linknametext"));
driver.findElement(By.linkText("Join now"));

You can use partial LinkTexts also same way as you use LinkTexts. This is very helpful in cases where you know part of the link text would never change in the application. So that even if remaining part of link text changes your code doesn’t break.

WebDriver Syntax:

driver.findElement(By.PartialLinkText(“PartialLink nameText”));

driver.findElement(By.PartialLinkText("Join"));

5)by css
by id

css=tagname#idvalue

css=input#username

WebDriver Syntax:
driver.findElement(By.cssSelector("input#username"));

by class attribute
css=tagname.classvalue

WebDriver Syntax:
driver.findElement(By.cssSelector("input.large-input"));

class=btn__primary--large from__button--floating
if there is a space between class value words, then replace the space with period(.)

css=button.btn__primary--large.from__button--floating

WebDriver Syntax:
driver.findElement(By.cssSelector("button.btn__primary--large.from__button--floating"));

Identifying elements with any attributes:
css=tagname[attributename='attributevalue']

Example:
css=input[name='session_password']

WebDriver Syntax:

driver.findElement(By.cssSelector("input[name='session_password']"));

Identifying the element with multiple attributes:
css=tagname[attributename1='value'][attribute2='value']
example:
css=input[name='session_password'][type='password']

WebDriver Syntax:
driver.findElement(By.cssSelector("input[name='session_password'][type='password']"));

Identifying the header text:

css=headertag

Example:
css=h1

WebDriver Syntax:
driver.findElement(By.cssSelector("h1"));

Handling dynamically changing elements using CSS:

1)contains--*
css=tagname[attributename*='partialattributevalue']

Example:
css=input[name*='btnchkavail']

WebDriver Syntax:
driver.findElement(By.cssSelector("input[name*='btnchkavail']"));

2)starts-with --^
css=tagname[attributename^='startattributevalue']

Example:
css=input[name^='btnchkavail']

WebDriver Syntax:
driver.findElement(By.cssSelector("input[name^='btnchkavail']"));

3)ends-with ---$
css=tagname[attributename$='endattributevalue']

Example:
css=input[value$='availability']

WebDriver Syntax:
driver.findElement(By.cssSelector("input[value$='availability']"));
=================================

Xpath:it provides an unique address for finding the web elements

XPath stands for XML Path Language which is a query language for selecting nodes in XML document.
XPath helps in finding direction of element through nodes/tags and its attributes.
XPath is one of the locators available in selenium Webdriver. It is very powerful and best alternative locator option
when you are not able to locate web elements using other locators
xpaths are two types:
1)absolute xpath(/)
2)relative xpath(//)
absolute xpath(/):including all the tags from root tag(html ) to till the targettag
ex:/html/head/body/......./targettag
why we shouldnot use absolute xpath for identifying the webelements?
Ans)if the developer adds/removes any tags in between root tag & targettag, then the element
identification will fail.
2)relative xpath(//):shortest distance to the target element

Syntax: //starttag[@attributename='attributevalue']/tagname1/tagname2/..../targettag

Difference between single slash (/) and double slash (//):

Single slash represents immediate child nodes/tag while double slash represents any nodes.
For example: /div/input represents immediate input nodes inside/of div node. //div//input
represents any input node inside any div node.

Absolute xpath uses single slash while relative xpath can use both single slash or double slash.

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

CSS vs XPath compared

XPath enables bidirectional flow, meaning the traversal may go both ways – from child to parent and parent to child. On the contrary, CSS enables one-directional flow, so the traversal works only from parent to child. Concerning speed and performance, XPath is slower, and CSS is a better choice in terms of speed and performance.

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

if duplicate tags are present in our navigation from start tag to target tag xpath syntax:

//starttag[@attributename='attributevalue']/tagname[index]/tagname/..../targettag

identify the facebook footer facebook lite
//div[@aria-label='Facebook site links']/ul/li[3]/a

WebDriver Syntax:
driver.findElement(By.xpath("//div[@aria-label='Facebook site links']/ul/li[3]/a"));

We will see same in Linkedin footer sections General section links and other sections also has same structure with <ul> tag as parent for that section and <li> --><a> for each link in that sections

for other sections like Browse LinkedIn,Business Solutions and Directories sections has same <ul> and <li> tags then how to identify each section elements.
if i want to identify Business solutions 'sales' link
xpath=(//ul[@class='directory__list']/li[3]/a)[3]

WebDriver Syntax:
driver.findElement(By.xpath("(//ul[@class='directory__list']/li[3]/a)[3]"));

Note:if your element starts with input,select,button,a and img tags then your start tag will be same tags respectively
//tagname[@attributename='attributevalue']
//tagname[@attributename='attributevalue' and/or @attribute2='value']
Note:if a tag is alone in the html

Examples:
//button[@id='u_0_13']
//button[@type='submit']
//button[@name='websubmit']
//select[@aria-label='Month']
//input[@name='email']
//img[@class='img']
//a[@href='https://www.facebook.com/recover/initiate?lwv=110&ars=royal_blue_bar']
//input[@data-testid='royal_login_button' or @type='submit']
-------------------------------------------------------
How can you identify dynamically changing elements?
using xpath functions-contains,starts-with,axes xpath

xpath functions:
contains()
text()
starts-with()
and
not()
last()
position()=1,2,3....
axes xpaths
1)following
2)preceding
3)ancestor
4)descendant

Identifying the links/static text/headertext using contains&text() function

//tagname[contains(text(),'partial/completetext')]

Example:
1)//h1[contains(text(),'Welcome to your professional community')]

2)//h1[contains(text(),'professional')]

//*[contains(text(),'partial/completetext')]
/*[contains(text(),'Help Center')]

//identifying the link/static/header text using text()

//tagname[text()='exacttext']

Example:
1)//td[text()='Create a Rediffmail account']

//identifying elements with attributes using contains function

//tagname[contains(@attributename,'partial/complete attributevalue')]

//*[contains(@id,'idvalue')]
//tagname[contains(@name,'namevalue')]
//tagname[contains(@class,'classvalue')]
//tagname[contains(@value,'value')]
//tagname[contains(@title,'titlevalue')]
//tagname[contains(@alt,'altvalue')]
//tagname[contains(@src,'srcvalue')]
//tagname[contains(@href,'hrefvalue')]

Example:
//input[contains(@name,'name')]
//select[contains(@name,'DOB_Month')]

//img[contains(@class,'nav-item__profile-member-photo')]

starts-with():if an element start text/attributevalue is constant and end part might be changing

identifying the links/static/header text using starts-with & text()

//tagname[starts-with(text(),'start text/completetext')]

Example:
1)//h1[starts-with(text(),'Create a Rediffmail account')]
2)//h1[starts-with(text(),'Create')]

//identify the elements with attributes using starts-with()
//tagname[starts-with(@attributename,'start/completeattributevalue')]

//tagname[starts-with(@id,'idvalue')]
//tagname[starts-with(@name,'namevalue')]
//tagname[starts-with(@class,'classvalue')]
//tagname[starts-with(@value,'value')]
//tagname[starts-with(@title,'titlevalue')]
//tagname[starts-with(@alt,'altvalue')]
//tagname[starts-with(@src,'srcvalue')]
//tagname[starts-with(@href,'hrefvalue')]

//input[starts-with(@name,'name')]

and:it is used to join two attributes in the xpath

//tagname[@attributename1='attributevalue' and @attributename2='attributevalue']

Example:
//input[@type='checkbox' and @checked='checked']

not or negative xpath:including not function before any
attribute is called negative xpath

//tagname[@attributename1='attributevalue' and not(@attributename2='attributevalue')]
(or)
//tagname[not(@attributename1='attributevalue') and @attributename2='attributevalue']

Example:

//input[@type='checkbox' and not(@checked='checked')]

last():
last element will be identified
//tagname[@attributename='attributevalue'][last()]

position():identifies the element based on position
//tagname[@attributename='attributevalue'][position()=1,2,3,4]
-----------------------------------------------------------------------------------
Normalize Space in Xpath
Normalize space matches the element on the webpage by ignoring starting and ending spaces in text,
normalize space will not have any effect if the spaces are present in between.

syntax ://tagname[normalize-space(property)='value']
<button type="button"> Strawberry </button><br><br>

//*[normalize-space()='Strawberry']

<h1 class="main-heading text-color-text-accent-2

babybear:pb-[24px]" data-test-id="hero__headline">

Welcome to your professional community

</h1>

//*[normalize-space()='Welcome to your professional community']
================================================
axes xpaths:These axes xpaths are helpful for identifying table elements

following

preceding
ancestor
descendant
following:if you are identifying any element after the base
node then use following

//tagname[text()='basenodetext']/following::targettagname
(or)
xpath/following::targettagname[index]

preceding:if you are identifying any element before the base
node then use preceding
//tagname[text()='basenodetext']/preceding::tagname[position]
(or)
xpath/preceding::tagname[position]

Ancestor:if you are identifying any element above the base
node then use ancestor
you have to go diagonally
//tagname[text()='basenodetext']/ancestor::tagname
(or)
xpath/ancestor::tagname

Descendant:if you are identifying any element below the base
node then use descendant

//tagname[text()='basenodetext']/descendant::tagname
xpath/descendant::tagname

DOM:document object model

1)ById
document.getElementById("id of the element")
2)Locating by DOM - getElementsByName
document.getElementsByName("name")[index]
name = name of the element as defined by its 'name' attribute
index = an integer that indicates which element within getElementsByName's array will be used.
================================================

Different Approach to create Xpath N CSS Selectors:

-----------------------------------------------
Xpath plugins:
1)truepath: this is chrome and firefox plugins which gives ready made xpath
2)chropath: this is chrome browser plugin: which gives readymade xpath and css
3)default xpath and css in chrome browser -->press 12 -->inspect an element-->right click on tagname-->copy-->copy css selector or copy xapth

Ramesh Insights In Automation

Automation QA Testing Course Content

WebElement Theory and HTML Concepts