CSSSelector
: id,name,classname, xpath, cssselector
CSS - Cascading style Sheet
If we want to apply styles to html page ...Difference colors, back ground color etc.
CSS is used
to define the presentation of HTML elements. It's not only used for styling but
also serves as a powerful tool for locating elements on a webpage when using
Selenium.
Ref: https://www.w3schools.com/css/tryit.asp?filename=trycss_default
xpath
syntax --> // tagname [@attrname=
'attr val']
CSS syntax
--> tagname [attrname= 'attr
val'] --> remove // and @
<input
type="text" name="fname" id="fid"
class="firstclass">
CSSSelector
using 'name' for First name text box -->
input[name='fname'] 1 ele
CSS
using 'id' for 'First name' text box
--> input[id='fid'] 1 ele
CSS
using 'invalid id' for First name text box
--> input[id='fid1234'] -- 0 ele
css
using 'name' : 'Last name' text box --> input[name='lname'] 1 ele
css
using 'id' : Last name text box --> input[id='lid']
HW
css using 'class' : Last name text box :
HW
css using name : password text box :
HW
css using 'id' : Male Radio button:
HW
css using 'id' :computer checkbox :
HW
css using 'name' :Civil checkbox :
HW
css selector using id :Civil checkbox
multiple props (or) attributes :
xpath
--> //input[@id='idfirst']
[@attrName= 'attrVal'] [ ] [] [] [] .....
css -->
input[id='idfirst'] [attrName= 'attrVal'] [ ] [] [] []
.....
Write
CSSselector for 'first anme" text
box where id = 'fid' and name='fname'
-->input[name='fname'][id='fid']
1 ele
input[id='fid'] [name='fname'] -- Note :
don't write spaces between multiple attributes in CSS
-- 1 ele
bcoz space in CsS , we have Difference meaning
Write
CSSselector for "first name' text box where class='firstclass'
css :input[class='firstclass']
- 2 ele
Write
CSSselector for first anme text box where class='firstclass' and name= 'fname'
input[class='firstclass'][@name=
'fname'] - 0 ele
.. dont use @ in cSS
input[class='firstclass'][name= 'fname'] - 1 ele
HW
: Write CSs Selctor : identify 'last name text box using 'name' and 'id' and
class?
HW
Write CSs Selctor Radio buttons:male ,
Female using name, or id
HW
Write CSs Selctor - Check boxes:
Electronics, Computers, Civil,
Electrical
Handling Textbox using CSS:
package
WebelementsBasics;
import
org.openqa.selenium.By;
import
org.openqa.selenium.WebDriver;
import
org.openqa.selenium.chrome.ChromeDriver;
public
class TextboxesUsingCSSSelector {
public static void main(String[]
args) {
// open Chrome browser
// 1.
System.setProperty("webdriver.chrome.driver",
".\\Drivers\\chromedriver.exe");
//2 create obj for ChromeDriver- Class
WebDriver driver = new ChromeDriver();// open chrome browser
with empty url
driver.get("file:///C:/brahma/Practise/SelniumPractiseNew/SampleWebpage.html");
// Enter "Raju" value in 'first name' text
box using CSSSelector by using name
// input[name='fname']
driver.findElement(By.cssSelector("input[name='fname']")).sendKeys("Raju");
// enter some value
'yadhav' in 'lAST NAME' text box using CSS by using id
// input[id='lid']
driver.findElement(By.cssSelector("input[id='lid']")).sendKeys("yadhav");
//HW Enter some value in 'pwd' using CSSSelector
// Hw get the entered
value from last name text box using CSSSelector
}
}
Handling Radio button using CSS:
//HW Click 'male' Raido button
using 'CSSSelector"
//HW get radio button
'male' status selected using
"CSSSelector"
// isSelected()
//HW get radio button
'female' status using CSSSelector
HW
click checkboxes 'Electronics', Computers,
Civil use "CSS
sleector"
click
is selected
is displayed
is enabled
get attribute value name, id ....
Link:
// HW Click 'My gmail'
link using CSSSelector
//HW click Login button using Csselector ?
//
HW get url of 'My gmail'
CSS short forms:
----------------
#idvalue
#maleid or anytag [id='idfirst']
<input
id="maleid" type="radio" name="sex"
value="male">
CSS: input[id='maleid'] - ok
input#maleid
(or)
#maleid
- any tag name id=maleid
<input
type="radio"name="female" id="femaleId">
CSS
using id:
-------------
input[id='femaleId']
or
input#femaleID
or
#femaleID
ex: find the 'cars' dropdown ele using Id-->
#carid
HW CSS for the 'lastname' texbox with
"id"
HW
CSs for 'bikes' dropdown ele - using "id "
. classValue :
input[class='firstclass']
- 4 ele
or
tagname.classValue -
ex:
input.firstclass //
input where class = 'firstclass'.
.firstclass or any tag name whose class =
'firstclass' 2 ele
.
= class name
Navigate to Child Element:
In CSS selectors, the >
symbol is used to navigate to child elements directly under a parent element.
xpath- /
--> > (CSS)
xpath
-->
//select[@name='cars']/option
- /
CSS --> use
> -->
In
CSS, > can be used to navigate to
child element or tag
Navigate
to html and head --> html>head
CSS
for title --> html>head>title
CSS
for input
-->html>body>input 18
ele
HW
: CSSselector : Identify 'bikes' dropdown and navigate to child tag i.e option
tag
HW
write CSS: Navigations --> html ,
body, p tags
HW
write CSS: Navigations --> html ,
body, input where type='password' tags
HW
write CSS: Navigations --> html ,
body, child tags i.e 'a' tag
HW
write CSS: Navigations --> html ,
body, child tags i.e 'img' tag
CSS Selectors: ^, $, *:
^
: carrot (or) cap xpath
tag[attrName ^= 'attr Value' ] = // tag[starts-with(@attrname,
'attr val')]
given tag name where attribute name starts
with given attribute value
eX: all input tags where 'id' starts with given val
i.e 'mi'
css:
input[id^='mi']
CSS - all input tags where 'name' starts with
'fna' --> input[name^='fna'] --
dont give any spaces in css
CSS where all input tags id starts with 'fid' --> input[id^='fid'] 1 ele
HW
CSS : where 'id' starts with 'male'
HW
CSS : where 'id' starts with 'female'
HW
CSS: where 'name' starts with
'computers'
HW
CSS: Identify select tag , where 'id' starts with 'bike'?
--------------------
--------------------------------------------------
* =
contains(@Attrname,'Attr value')
---------------------------------------
syntax
--> tagName [attrName *= 'value']
all
given tags where attr name contains given value
ex:
Identify
input tag where name' contains 'fna'
? input[name*='fna']
HW
Identify input tag where name' contains
'lna' ?
HW
Identify input tag where name' contains
'name' ?
HW
Identify select tag where name' contains
'cars' ?
Hw
Identify select tag where 'id' contains
'car' ?
----------------------------
$
- == ends-with ()
syntax :
--------
tagName [attr Name $= 'attr Value']
all
tags where attr name 'ends' with given value
ex:
<input
type="text" name="fname" id="fid"
class="firstclass">
input[class$='class']
2 ele
input[class$='isrtclass']
input[name$='345']
input[id$='id']
CSS:
CSS : all input tags where 'id' ends with
given value i.e 'maleid'
2 ele
input[id$='maleId']
HW
:CSS where class ends with given value
'class'?
HW
CSS: Identify select tag , where id' ends with 'arid'?
HW
CSS: Identify select tag , where name ends with 'kes'?
^
= start-with()
$ = ends with () -- note :
in xpath, we dont have ends-with()
*
= contains()
FAQ
how can you handle Dynamic object/elements ?
No comments:
Post a Comment