<form id="loginForm">
css: form#loginForm
2. name
<input name="username" type="text" /> "
css: input[name=email]'
3. class name
<p class="content">Site content goes here.</p>
css: p.content
4. tag name
<h1>Welcome</h1>
css: h1
5. link text/ partial link text
<a href="continue.html">Continue</a>
css: a[href="continue.html"]
6. attribute and value
element_name[<attribute_name>='<value>']
<input type="text" id="fistname" name="first_name" class="myForm">
7. xpath
<html>
<body>
<form id="loginForm">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="continue" type="submit" value="Login" />
<input name="continue" type="button" value="Clear" />
</form>
</body>
<html>
xpath: form[@id='loginForm']
xpath: //form[@id='loginForm']/input[1] //select from anywhere
xpath: //input[@name='continue'][@type='button']
<input type="radio" name="radio-choice-1">
xpath: input[type=’radio’]
xpath: input[name^=’radio’] //prefix
xpath: input[name$=’-1’] //suffix
xpath: input[name*=’choice’] //substring
8. advantage of css selector over xpath
- developers are more aware about css selector than xpath
- xpath is implemented differently among browsers
9. analyze complex web page
- in firefox, install firebug and firefinder, 'right click' on element to find element -> use 'firefind element' to visually verify result from css selector or xpath
- in firefox, enable firebug, select html panel, click 'click an element in the page to inspect' button -> move around in webpage ui -> find interested element -> right click will lock its html -> move around to inspect nearby ui.
- right click on ui element in firefox or chrome, if 'this frame' or 'view frame source' option is available, then this element is inside a frame
- in chrome developer tool 'element' tab, can search (ctrl+f) css selector or xpath, if find it will show in 'element' and ui (when hover in element)
- in chrome developer tool, the arrow icon on the left hand side is the inspector icon, it can inspect element even in mobile view
- in chrome developer tool 'console' tab, use $x(".//header") to validate xpath and use $("header") to validate css selector
- use chrome extension 'copy css selector' to get locator
- to inspect dynamic element, use setTimeout(function(){debugger;}, 5000) to freeze screen, then click the left icon in 'elements' tab (the icon's name is 'select an element in the page and inspect it' if you hover on it)
- to inspect an element that cannot be right clicked to inspect, also can click the left icon in 'element' tab
- $$ find all occurrence (), then each identified by element.all(by.css('.selector')).get(0)etc
- $ find the 1st occurrence
10. css syntax
div > p //all 'p' children whose direct parent is 'div'
div p //all 'p' inside 'div'
input //tag
.myclass //class
#id //id
[attribute='value'] //attribute
escape special char . #r1\:0\:crmodurlid => #r1\\:0\\:crmodurlid
11. (/bookstore/book[@location='US'])[1] //select 1st element with specific attribute in xpath
12. frame and iframe

Reference
1. css selector reference
2. verify css selector or xpath locator
3. css selector practice game
4. firebug: white to black belt
5. evaluate css selector and xpath in chrome developer
6. css selector with examples
7. 1st element of specific attribute in xpath
8. css selector youbube
9. freeze screen in chrome debugger / DevTools panel for popover inspection?
10. use regex in css
11. frames iframes protractor
12. handle iframe in selenium
13. find all iframes on webpage
14. protractor element.all(locator).get(index)
escape special char . #r1\:0\:crmodurlid => #r1\\:0\\:crmodurlid
11. (/bookstore/book[@location='US'])[1] //select 1st element with specific attribute in xpath
12. frame and iframe
- $$('iframe')
- show all frames under current 'frame', current 'frame' can be 'top', or can be other iframe
- when inspect iframe, right click will show 'view frame source'

- when inspect iframe, console->context dropdown will show current iframe, and all operation are under current iframe
- $("[id*='end']") //id that end with 'end'
- $("[class^='begin']") //class that begins with 'begin'
Reference
1. css selector reference
2. verify css selector or xpath locator
3. css selector practice game
4. firebug: white to black belt
5. evaluate css selector and xpath in chrome developer
6. css selector with examples
7. 1st element of specific attribute in xpath
8. css selector youbube
9. freeze screen in chrome debugger / DevTools panel for popover inspection?
10. use regex in css
11. frames iframes protractor
12. handle iframe in selenium
13. find all iframes on webpage
14. protractor element.all(locator).get(index)
No comments:
Post a Comment