Your SlideShare is downloading. ×
Css selector - BNT 11
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Css selector - BNT 11

2,489
views

Published on

Selenium Automation Series - BNT 11

Selenium Automation Series - BNT 11


2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,489
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
46
Comments
2
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. By Dwarika Dhish Mishra Mob- 9999978609 Blog- http://abodeqa.wordpress.com
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Thank you !!!