Css selector - BNT 11

4,593 views

Published on

Selenium Automation Series - BNT 11

2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
4,593
On SlideShare
0
From Embeds
0
Number of Embeds
2,131
Actions
Shares
0
Downloads
65
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Css selector - BNT 11

  1. 1. By Dwarika Dhish Mishra Mob- 9999978609 Blog- http://abodeqa.wordpress.com
  2. 2. CSS  CSS stands for Cascading style sheet  This language is used to show the look and formatting of documents written in markup language such in HTML or XML  CSS pattern matching principles are being used to located element on webpage for further operations.  CSS pattern are known as Selector that determines which style is assigned to which element in DOM
  3. 3. Why CSS Selector in WebDriver  CSS selector are faster than Xpath.  In CSS selector we can move in forward direction while in Xpath is bidirectional. Due to this CSS selector is faster than Xpath  Selenium’s By class also provide cssSelector() method to locate element using CSS Selector
  4. 4. Some basic CSS Selector  By using Absolute path  By using relative path  By using Class Selector  By using ID selector  By using attributes selectors  By using attributes name selectors  By using Pattern matching  Nth-child
  5. 5. CSS selector by using absolute path <html> <body> <form name="loginForm"> <label for="username">UserName: </label> <input type="text" name="username" for="wow" /><br/> <label for="password">Password: </label> <input type="password" name="password" /><br/> <input name="login" type="submit" value="Login" /> </form> </body> </html>
  6. 6. Continue…  Absolute path of username text field would be $$(“html>body>form>input:nth-of-type(1)”) Then in selenium we could find the username text field by using this line of code WebElement username = driver.findElement(By.cssSelector(“html>body>form>input:nth-oftype(1)”));
  7. 7. Relative path $$(“input[name=username]”) Line of code in WebDriver to locate this element is WebElement username = driver.findElement(By.cssSelector(“input[name=usern ame]”));
  8. 8. Finding CSS selector using class selector  In general we have class as one attribute to HTML tags through which we normally reach to web-element on webpage  So CSS selector syntax would be [HTML][dot][value of class attribute] Or [dot][value of class attribute]
  9. 9. Continue  If HTML source code is <input type="text" class="username" for="wow" /><br/> Then CSS Selector should be Input.username  Line of WebDriver code used to do action on this element would be WebElement username = driver.findElement(By.cssSelector(“input.username”));
  10. 10. Finding CSS Selector using ID selector  Like Class, Id attribute is also used to find any element uniquely In this case CSS selector syntax would be [HTML tag][hash][value of attribute] Or [hash][value of attribute]
  11. 11. Continue..  If HTML source code would be <input type="text" id="username" for="wow" /><br/> Then line of WebDriver code would be WebElement username = driver.findElement(By.cssSelector(“input#username”)) ; Or WebElement username = driver.findElement(By.cssSelector(“#username”));
  12. 12. Finding CSS selector using various attributes  If HTML source code would be <input type="text" id="username" for="wow" /><br/> Then CSS selector would be Input[id=username]  Line of Webdriver code would be WebElement username = driver.findElement(By.cssSelector(“input#username”)) ;
  13. 13. Pattern Matching  Syntax for Starts with in CSS selector is ^= , CSS Selector would be written like this Input[id^=‘user’] Then it will return input tag with attribute id starting with user.
  14. 14. Continue..  Syntax for Ends with in CSS selector is $= , CSS Selector would be written like this Input[id$=‘name’] Then it will return input tag with attribute id ending with name word.
  15. 15. Continue..  Syntax for Ends with in CSS selector is *= , CSS Selector would be written like this Input[id*=‘name’] Then it will return input tag with attribute id containing name word in its value.
  16. 16. Nth-child[index] Syntax *:nth-child[index] By using this we can find any child of a parent using index of that element. There is another method used in CSS selector is :nth-oftype[index] But this not supported in selenium webdriver.
  17. 17. Topic of next session  Opening various browser and receiving URL in navigation bar of browsers.  TestNg java framework in WebDriver and use of its annotations.
  18. 18. Thank you !!!

×