Hello Friends ,
In this post I am presenting how to convert Xpath to CSS Selectors.
HTML CODE:
<html>
<body>
<div>
<a id="a1" class="c1" name="n1">Sample text</a>
</div>
<div>Hello</div>
</body>
</html>
1- select link having id="a1" using Absolute XPath
XPath - /html/body/div/a[@id='a1']
CSS Selector- html>body>div>a[id='a1']
2- select link having id="a1" using Relative XPath
XPath - //a[@id='a1']
CSS Selector- a[id='a1']
XPath - //html //a[@id='a1']
CSS Selector- html a[id='a1']
3- Select All links in webpage:
XPath - //a
CSS Selector- a
4-Select all first link in webpage:
XPath - //a[1]
CSS Selector- a:nth-of-type(1)
5-Select first link out of all links using group index
XPath - ( //a)[1]
CSS Selector- css does not support group index
6- Select link by attribute ID
XPath - //a[@id='a1']
CSS Selector- a#a1
7- Select link by attribute Class Name
XPath - //a[@class='c1']
CSS Selector- a.c1
8- Select link by attribute Name
XPath - //a[@name='n1']
CSS Selector- a[name="n1"]
9-Select link by using text()
XPath - //a[@id="a1 and @name='n1']
CSS Selector- a[id="a1"][name='n1']
11-Select link by using OR Operation
XPath - //a[@id="a1 or @name='n1']
CSS Selector- a[id="a1"],[name='n1']
12-Select link by using NOT (should select the link other than a1)
XPath - //a[not(@id='a1')]
CSS Selector- a:not(id='a1')
13-Select link using contains
XPath - //a[contains(@id,'a1')]
CSS Selector- a[id *= 'a1']
14-Select parent of link having id='a1'
XPath - //a/parent::div
CSS Selector- div:has[>a]
15- Select parent of link having id='a1' using shortcut
XPath - //a/..
CSS Selector- div:has[>a]
16- Select ancestor of link having id='a1'
XPath - //a/ancestor::body
CSS Selector- body:has[ a]
17-Select following sibling of div Tag
XPath - //div/following-sibling::div
CSS Selector- div + div
If You like my post ,please share this post and give your valuable feedback to improve my post.
Thanks.
In this post I am presenting how to convert Xpath to CSS Selectors.
HTML CODE:
<html>
<body>
<div>
<a id="a1" class="c1" name="n1">Sample text</a>
</div>
<div>Hello</div>
</body>
</html>
1- select link having id="a1" using Absolute XPath
XPath - /html/body/div/a[@id='a1']
CSS Selector- html>body>div>a[id='a1']
2- select link having id="a1" using Relative XPath
XPath - //a[@id='a1']
CSS Selector- a[id='a1']
XPath - //html //a[@id='a1']
CSS Selector- html a[id='a1']
3- Select All links in webpage:
XPath - //a
CSS Selector- a
4-Select all first link in webpage:
XPath - //a[1]
CSS Selector- a:nth-of-type(1)
5-Select first link out of all links using group index
XPath - ( //a)[1]
CSS Selector- css does not support group index
6- Select link by attribute ID
XPath - //a[@id='a1']
CSS Selector- a#a1
7- Select link by attribute Class Name
XPath - //a[@class='c1']
CSS Selector- a.c1
8- Select link by attribute Name
XPath - //a[@name='n1']
CSS Selector- a[name="n1"]
9-Select link by using text()
XPath - //a[text()='Sample text']
CSS Selector- css does not support text.
10-Select link by using AND Operation
CSS Selector- css does not support text.
10-Select link by using AND Operation
XPath - //a[@id="a1 and @name='n1']
CSS Selector- a[id="a1"][name='n1']
11-Select link by using OR Operation
CSS Selector- a[id="a1"],[name='n1']
12-Select link by using NOT (should select the link other than a1)
XPath - //a[not(@id='a1')]
CSS Selector- a:not(id='a1')
13-Select link using contains
XPath - //a[contains(@id,'a1')]
CSS Selector- a[id *= 'a1']
14-Select parent of link having id='a1'
XPath - //a/parent::div
CSS Selector- div:has[>a]
15- Select parent of link having id='a1' using shortcut
XPath - //a/..
CSS Selector- div:has[>a]
16- Select ancestor of link having id='a1'
XPath - //a/ancestor::body
CSS Selector- body:has[ a]
17-Select following sibling of div Tag
XPath - //div/following-sibling::div
CSS Selector- div + div
If You like my post ,please share this post and give your valuable feedback to improve my post.
Thanks.
No comments:
Post a Comment