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

Css selector - BNT 11

on

  • 2,194 views

Selenium Automation Series - BNT 11

Selenium Automation Series - BNT 11

Statistics

Views

Total Views
2,194
Views on SlideShare
1,265
Embed Views
929

Actions

Likes
4
Downloads
37
Comments
2

4 Embeds 929

http://abodeqa.wordpress.com 926
http://feedly.com 1
http://plus.url.google.com 1
http://newsblur.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css selector - BNT 11 Css selector - BNT 11 Presentation Transcript

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