CSS Selector Practice

unique id

unique class

element 1

element 2

unique name

unique combination of attributes : name=a id=a

unique combination of attributes : name=a id=b

unique combination of attributes : name=b id=a

unique combination of attributes : name=b id=b

class = 'apple'
class = 'apple orange'


Example of identifying elements with help of parent



Index

1 2 3 4 5 6 7 8 9 10


only-of-type

b1 b2 b3
b1
b1 b2


Difference between first child and first type

1 2 3
1 2 3
1 2 3


Xpath AXES

Xpath AXES - Inspect Me


Not logged in





Xpath Practice

unique id

unique name

unique value

element 1

element 2

unique combination of attributes : name=a id=a

unique combination of attributes : name=a id=b

unique combination of attributes : name=b id=a

unique combination of attributes : name=b id=b

Example of Elements with nothing unique : use index

When the child is unique

google link

Where the parent is unique

Using Elements as Attributes



Advance Xpath Example : Identify using lable only

::: Addmission
DOB

Not logged in






Xpath AXES

Xpath AXES - Inspect Me


Sample Table of Div

Select
Firstname
Lastname
Age
Jack
Bad
25
Tommy
Sad
26
Tom
Good
30
Jack
Bad
20
Eva
Strong
18
Sam
Cool
32
Jack
Bad
30

Sample webtable 3

Basic HTML Table

Select Firstname Lastname Age
Jack Bad 25
Tommy Sad 26
Tom Good 30
Jack Bad 20
Eva Strong 18
Sam Cool 32
Jack Bad 30




Basic HTML Table

Firstname Lastname Age Select
Jack Bad 25
Tommy Sad 26
Tom Good 30
Jack Bad 20
Eva Strong 18
Sam Cool 32
Jack Bad 30

Sample webtable 2

Basic HTML Table

Select Firstname Lastname Age
Jack Bad 25
Tommy Sad 26
Tom Good 30
Eva Strong 18
Sam Cool 32

Sample webtable 1

Basic HTML Table

Select Firstname Lastname Age
Tom Good 30
Jack Bad 25
Eva Strong 18
Sam Cool 32
Tommy Sad 26

Mix of Basic WebElements

This is an example of paragraphs

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

This is an example of paragraphs with a span inside

This is an example of labels

This is an example of link

google link

This is an example of Text box



This is an example of Radio buttons

Kindly Select your favorite color

Red
blue
green
pink

This is an example of Checkbox

Kindly Select your favorite sports

Cricket
Tennis
Football
Baseball
Badminton



The select dropdown

Select your favorite fruit:

Selected fruit is :

Basic dropdown


The select dropdown

Select one option at a time:

Select your favorite fruit:

Selected fruit is :

The Multi Select Element

The multiple attributes specify that multiple options can be selected at once:

Selected car is :

Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.