An Overview On cssSelector
In this post, we’ll learn what is cssSelector and how to use cssSelector.
What is cssSelector?
CSS stands for Cascading Style Sheets.
HTML Code:-
<html>
<body>
UN<input type="text">
PW<input type="password">
</body>
</html>
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Demo
{
public static void main(String[] args)
{
WebDriver driver = new FirefoxDriver();
driver.get("file:///D:/Demo.html");
driver.findElement(By.cssSelector("input[type='text']")).sendKeys("admin");
driver.findElement(By.cssSelector("input[type='password']")).sendKeys("manager");
}
}
An Overview on Locators:- http://www.myautomationlab.com/2018/03/an-overview-on-locators.html
An Overview on xPath:- http://www.myautomationlab.com/2018/03/an-overview-on-xpath.html
In this post, we’ll learn what is cssSelector and how to use cssSelector.
What is cssSelector?
CSS stands for Cascading Style Sheets.
HTML Code:-
<html>
<body>
UN<input type="text">
PW<input type="password">
</body>
</html>
In the above sample page to identify the password field we can’t use id, name, className, linkText, partialLinkText because they are not present. We can use ‘tagName’ but it has duplicate user field. In this situation we can use cssSelector. CSS stands for Cascading Style Sheets.
cssSelector has following syntax:
Tag[AttributeName = 'AttributeValue']
Ex: input[type = 'password']
To check whether CSS expression is correct or not, we can use FirePath’ in Mozilla Firefox.
- To install it go to Tools>Add-Ons, search for FirePath.
- Click Install button of FirePath and restart the browser.
- Open the required web page press F12(Firebug) click on FirePath tab.
- Select CSS, type the expression and press Enter.
- It will highlight matching elements.
Checking CSS in Google Chrome:
- Press F12 in chrome browser, then press Ctr+F.
- Type the expression; it will highlight the source code of the matching element. If we place the mouse pointer on the source code, it will highlight the element on the page.
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Demo
{
public static void main(String[] args)
{
WebDriver driver = new FirefoxDriver();
driver.get("file:///D:/Demo.html");
driver.findElement(By.cssSelector("input[type='text']")).sendKeys("admin");
driver.findElement(By.cssSelector("input[type='password']")).sendKeys("manager");
}
}
An Overview on Locators:- http://www.myautomationlab.com/2018/03/an-overview-on-locators.html
An Overview on xPath:- http://www.myautomationlab.com/2018/03/an-overview-on-xpath.html
