SELENIUM BASICS:

  • What is Automation Testing - Advantages & Types of Tools
  • What is Selenium IDE, Selenium RC, Selenium WebDriver, Selenium Grid?
  • Selenium IDE, Firebug & Firepath Installation

  • SELENIUM WEBDRIVER:

  • Selenium WebDriver Architecture
  • Selenium Installation
  • Challenges and Limitations of Selenium
  • First Selenium WebDriver Script
  • Working with Firefox Browser
  • Solution - Failed To Launch Browser Using Selenium WebDriver
  • Working with Chrome Browser
  • Working with IE Browser
  • Difference Between FindElement & FindElements
  • Install Firebug, Fire path and other add on for Selenium
  • Locators in Selenium
  • Dynamic Xpath
  • Dynamic CSS
  • Handle drop-downs
  • How to work with file upload
  • Handle Alerts & Popups
  • Handle Multiple Windows
  • Mouse Hover event in Selenium
  • Right Click
  • Double Click
  • Drag and Drop
  • Capture Screenshots in Selenium
  • Parameterization
  • Synchronization
  • Implicit Wait, Explicit Wait and Fluent Wait in Selenium
  • Implicit Waits
  • Explicit WebDriver Waits
  • Fluent Wait In Selenium
  • Apache POI
  • How To Read Data From Excel File
  • How To Write Data In Excel File
  • Database Testing Using MSSQL
  • Database Testing Using MySQL
  • Database Testing Using DB2
  • Handle Ajax Call in Selenium
  • Listeners in Selenium
  • Handling JavaScript in Selenium
  • Stale Element Reference Exception in Selenium
  • Integrate Sikuli with Selenium
  • Headless Browser Testing 
  • Headless Browser Testing using HtmlUnitDriver
  • Headless Browser Testing using PhanthomJSDriver

  • TESTNG:

  • TestNG Installation
  • TestNG Complete Tutorial

  • REPORTS:

  • Extent Reports Introduction
  • Extent Reports Generation
  • Capturing Screenshots & Including In Extent Reports
  • Extent Reports Version 4

  • BUILD & CONTINUOUS INTEGRATION TOOLS:

  • ANT Build Tool - How To Download & Install
  • Maven Build Tool - How To Download & Install
  • Creating Maven Selenium Project
  • GIT Integration with Selenium
  • Jenkins - How To Download & Install
  • Jenkins - Executing TestNG Scripts
  • Jenkins - Generating Reports After Test Execution
  • Jenkins - Executing Maven Project
  • Create build and Execute build for nightly execution
  • Send Email report based on build Status
  • Selenium Continuous Integration with Jenkins [Selenium – Maven – Git – Jenkins] – Step By Step Guide

  • CROSS BROWSER TESTING:

  • Running Selenium Tests On BrowserStack
  • Kobiton - Mobile Testing Platform with Real Devices

  • MOBILE TESTING:

  • Mobile Testing Platform with Real Devices

  • AUTOMATION FRAMEWORKS:

  • What is Framework & Types of Framework
  • Page Object Model Design Pattern
  • Data Driven Framework
  • How to explain Test Automation Framework or Selenium Automation Framework Architecture In Interview

  • API Testing:

  • Learn API Testing
  • Postman Tutorial (API Testing with Postman)

  • INTERVIEW QUESTIONS:

  • Test Automation Framework Interview Questions
  • Selenium Interview Questions
  • TestNG Interview Questions
  • Java Interview Questions
  • Python Interview Questions
  • API Testing Interview Questions

  • SAMPLE RESUME:

  • Automation Tester Resume
  • Learn CSS Selector Selenium WebDriver Tutorial [Without Using Any Tools]

    CSS Selector Selenium WebDriver Tutorial

    In the previous post, we have seen “locators in Selenium“. In this post, we see CSS Selector Selenium – How To Locate Element By CSS Selector In Selenium. Find the below links on How to find elements on a web page using different types of locators.

    1. “How To Locate Element By ID Locator
    2. “How To Locate Element By Name Locator
    3. “How To Locate Element By Class Name Locator
    4. “How To Locate Element By Tag Name Locator
    5. “How To Locate Element By Link Text/Partial Link Text Locator
    6. “How To Locate Element By XPath Locator

    Coming to the actual post..

    CSS Selectors Locator:

    There is a debate on the performance of CSS Locator and XPath locator and the debate on the performance of CSS and XPath locator is out of scope of this post. Most of the automation testers believe that using CSS selectors makes the execution of script faster compared to XPath locator. CSS Selector locator is always the best way to locate elements on the page. CSS is always same irrespective of browsers. In this post, I will show you how to find element locators using CSS without using any tools like Firebug or Firepath.

    Must Read: How To Write Dynamic XPath in Selenium WebDriver

    CSS Selector Selenium

    img: CSS Selector Selenium WebDriver Tutorial

    Following are some of the mainly used formats of CSS Selectors.

    • Tag and ID
    • Tag and Class
    • Tag and Attribute
    • Tag, Class, and Attribute
    • Sub-String Matches
      • Starts With (^)
      • Ends With ($)
      • Contains (*)
    • Child Elements
      • Direct Child
      • Sub-child
      • nth-child

    Refer to W3C CSS-Selectors for a list of generally available CSS Selectors

    Tag and ID:

    CSS ID Selector.

    Syntax:

    Open Mozilla Firefox and navigate to Gmail application.

    Open Firebug and inspect the Enter your email input box. Take a note of its Tag and ID. Follow the below screenshot to do so.

    Copy the below mentioned script and execute in your system.

    Locate Element By CSS Selector Locator Tag ID

    Value to be added in the By.cssSelector method:

    Script:

    Tag and Class:

    If multiple elements have the same HTML tag and class, then the first one will be recognized.

    Syntax:

    Open Mozilla Firefox and navigate to Facebook application.

    Open Firebug and inspect the Email input box. Take a note of its Tag and Class. Follow the below screenshot to do so.

    Copy the below mentioned script and execute in your system.

    Locate Element By CSS Selector Locator Tag Class

    Value to be added in the By.cssSelector method:

    Script:

    Tag and Attribute:

    If multiple elements have the same HTML tag and attribute, then the first one will be recognized. It acts in the same way of locating elements using CSS selectors with the same tag and class.

    Syntax:

    Open Mozilla Firefox and navigate to Gmail application.

    Open Firebug and inspect the Enter your email input box. Take a note of its Tag and Attribute. Follow the below screenshot to do so.

    Copy the below mentioned script and execute in your system.

    Locate Element By CSS Selector Locator Tag Attribute Value

    Value to be added in the By.cssSelector method:

    Script:

    Tag, Class And Attribute:

    Syntax:

    Open Mozilla Firefox and navigate to Facebook application.

    Open Firebug and inspect the Email input box. Take a note of its Tag, Class and Attribute. Follow the below screenshot to do so.

    Copy the below mentioned script and execute in your system.

    Locate Element By CSS Selector Locator Tag Class Attribute

    Value to be added in the By.cssSelector method:

    Script:

    SUB-STRING MATCHES:

    CSS in Selenium has an interesting feature of allowing partial string matches using ^, $, and *.

    Have a look on the below mentioned HTML

    Starts with (^): 

    To select the element, we would use ^ which means ‘starts with

    Syntax:

    Value to be added in the By.cssSelector method:

    Add the below step in the script to find the element and write a text as “hi”

    Ends with ($): 

    To select the element, we would use $ which means ‘ends with’

    Syntax:

    Value to be added in the By.cssSelector method:

    Add the below step in the script to find the element and write a text as “hi”

    Contains (*): 

    To select the element, we would use * which means ‘sub-string

    Syntax:

    Value to be added in the By.cssSelector method:

    Add the below step in the script to find the element and write a text as “hi”

    Also we can use ‘contains()’:

    Locating Child Elements(Direct Child):

    Syntax: parentLocator>childLocator

    CSS Locator: div#buttonDiv>button

    Explanation: ‘div#buttonDiv>button’ will first go to div element with id ‘buttonDiv’ and then select its child element – ‘button’

    Locating elements inside other elements (child or sub-child):

    Syntax: parentLocator>locator1 locator2

    CSS Locator: div#buttonDiv button

    Explanation: ‘div#buttonDiv button’ will first go to div element with id ‘buttonDiv’ and then select ‘button’ element inside it (which may be its child or sub child)

    Locating nth Child:

    To find nth-child css.

    To locate the element with text ‘QTP’, we have to use “nth-of-type”

    Similarly, To select the last child element, i.e. ‘Sikuli’, we can use

    If you have any queries by finding elements using CSS Selector Selenium, please comment below in the comment section. Like this post? Don’t forget to share it!

    Here are few hand-picked articles for you to read next:

    Get our latest blog posts delivered to your inbox

    Subscribe and get popular blog posts about software testing industry.

    Rajkumar

    1 thought on “Learn CSS Selector Selenium WebDriver Tutorial [Without Using Any Tools]”

    1. By.cssSelector(“input:contains(‘id’)”)

      please explain above line.

    Leave a Comment

    Share via
    Copy link
    Powered by Social Snap