1.什么是Selenium CSS选择器？ (1. What is Selenium CSS Selector?)

It is one of the locators in selenium using which we identify web elements on the web page. CSS stands for Cascading Style Sheets, which is used for styling the different elements of an HTML webpage. CSS Selector locator is always the best way to locate elements on the web page. CSS is always the same irrespective of browsers.

它是Selenium中的一种定位剂，通过它我们可以识别网页上的Web元素。 CSS代表级联样式表，用于样式化HTML网页的不同元素。 CSS选择器定位器始终是在网页上定位元素的最佳方法。 不论浏览器如何，CSS始终相同。

2. CSS选择器的好处 (2. Benefits of CSS Selector)

• It is faster compared to other selectors
  与其他选择器相比，速度更快
• More readable
  更具可读性
• Most offenly used
  最令人反感的

3. CSS选择器的语法 (3. Syntax of CSS Selector)

• HTML Tag: It is the tag used to denote the web element.
  HTML标记 ：这是用于表示Web元素的标记。
• #: The # sign is used to symbolize the ID attribute. It is mandatory to use the # sign when using ID attribute.
  ＃ ：＃符号用于象征ID属性。 使用ID属性时，必须使用＃号。
• Value of ID attribute: It is the value of an ID attribute which is being accessed. The value of ID attribute is always preceded by a # sign.
  ID属性的值：它是正在访问的ID属性的值。 ID属性的值始终以＃符号开头。

4.常用CSS选择器格式 (4. Commonly used CSS Selector Formats)

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

以下是一些CSS选择器主要使用的格式。

• Tag and ID
  标签和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
  子元素
  • 直子
  • 子孩子
  • 第n个孩子

4.1）HTML标记和ID (4.1) HTML Tag and ID)

css=tag#id

Example:

例：

1. Open Chrome browser and navigate to Gmail web application.
   打开Chrome浏览器 ，然后导航到Gmail Web应用程序。
2. Right-click Email or phone input box and select Inspect.
   右键单击电子邮件或电话输入框，然后选择检查。
3. 

   Email Inspect

   电子邮件检查
4. Below screenshot shows Tag and ID of Email or phone element.
   下面的屏幕快照显示了电子邮件或电话元素的标签和ID。
5. 

   Email Tag ID

   电子邮件标签ID

Value to be added in the By.cssSelector method:

要在By.cssSelector方法中添加的值：

css=input#Email

package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver;public class SeleniumCSSLocators {        public static void main (String [] args){        WebDriver driver = new ChromeDriver();        driver.get("https://www.gmail.com");        // Here Tag = input and Id = Email        driver.findElement(By.cssSelector("input#Email")).sendKeys("journaldev");        } }

4.2）HTML标记和类 (4.2) HTML Tag and Class)

If multiple elements have same HTML tag and class, then selenium will recognize first one.

如果多个元素具有相同HTML标签和类，则Selenium将识别第一个。

Syntax: css=tag.class

语法 ： css=tag.class

Example:

例：

1. Open Chrome browser and navigate to Facebook application.
   打开Chrome浏览器 ，然后导航到Facebook应用程序。
2. Right-click Email or phone input box and select Inspect.
   右键单击电子邮件或电话输入框，然后选择检查。
3. 

   Email Inspect Facebook

   电子邮件检查Facebook
4. Below screenshot shows Tag and Class of Email or phone element.
   下面的屏幕快照显示了电子邮件或电话元素的标签和类别。
5. 

   Email Tag Class

   电子邮件标签类别

Value to be added in the By.cssSelector method:

要在By.cssSelector方法中添加的值：

css=input.inputtext

package com.journaldev.selenium;import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class SeleniumCSSLocators {       public static void main (String [] args){       WebDriver driver = new ChromeDriver();       driver.get("https://www.facebook.com/");       // Here Tag = input and Class = email       driver.findElement(By.cssSelector("input.inputtext[name=email]")).sendKeys("journaldev");       } }

4.3）HTML标记和属性 (4.3) HTML Tag and Attribute)

If multiple elements have the same HTML tag and attribute, then selenium will recognize the first one.

如果多个元素具有相同HTML标签和属性，则Selenium将识别第一个元素。

Syntax:

语法 ：

css=tag[attribute=value]

Example:

例：

1. Open Chrome browser and navigate to Gmail application.
   打开Chrome浏览器 ，然后导航到Gmail应用程序。
2. Right-click Email or phone input box and select Inspect.
   右键单击电子邮件或电话输入框，然后选择检查。
3. 

   Inspect Email CSS

   检查电子邮件CSS
4. Below screenshot shows Tag and Attribute of Email or phone element.
   下面的屏幕快照显示了电子邮件或电话元素的标签和属性。
5. 

   Email Tag Attribute

   电子邮件标签属性

Value to be added in the By.cssSelector method:

要在By.cssSelector方法中添加的值：

css=input[name=identifier]

package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class SeleniumCSSLocators {       public static void main (String [] args){       WebDriver driver = new ChromeDriver();       driver.get("https://www.gmail.com");       // Here Tag = input and Id = identifier      driver.findElement(By.cssSelector("input[name=identifier]")).sendKeys("journaldev");       } }

4.4）HTML标记，类和属性 (4.4) HTML Tag, Class and Attribute)

Syntax:

句法：

css=tag.class[attribute=value]

Example:

例：

1. Open Chrome browser and navigate to Facebook application.
   打开Chrome浏览器 ，然后导航到Facebook应用程序。
2. Right-click Email or phone input box and select Inspect.
   右键单击电子邮件或电话输入框，然后选择检查。
3. Below screenshot shows Tag, Class, and Attribute of Email or phone element.
   下面的屏幕截图显示了电子邮件或电话元素的标签，类和属性。
4. 

   Email Attribute

   电子邮件属性

Value to be added in the By.cssSelector method:

要在By.cssSelector方法中添加的值：

css=input.inputtext[name=email]

package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class  SeleniumCSSLocators {       public static void main (String [] args){       WebDriver driver = new ChromeDriver();       driver.get("https://www.facebook.com/");       // Here Tag = input and Class = email       driver.findElement(By.cssSelector("input.inputtext[name=email]")).sendKeys("journaldev");       } }

5.子串匹配 (5. Substring Matches)

There are some special CSS selectors to match partial values of the attributes like ^, $, and *.

有一些特殊CSS选择器可以匹配^，$和*等属性的部分值。

5.1）以（^）开头 (5.1) Starts with (^))

In order to select the element that starts with something, we use ^ which means ‘starts with’.

为了选择以某些内容开头的元素，我们使用^表示“开头为” 。

Syntax:

句法：

css=<[attribute^=string prefix]

Value to be added in the By.cssSelector method:

要在By.cssSelector方法中添加的值：

css=input.input[id^='Em']

In the script add the below step to find the element and write a text as “journaldev”

在脚本中，添加以下步骤以查找元素并将文本写为“ journaldev”

package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class CSSLocatorsStartswith {       public static void main (String [] args){       WebDriver driver = new ChromeDriver();       driver.get("https://www.facebook.com/");       driver.findElement(By.cssSelector("input[id^='Em']")).sendKeys("journaldev");       } }

5.2）以（$）结尾 (5.2) Ends with ($))

In order to select the element that ends with something, we use $ which means ‘ends with’.

为了选择以某事物结尾的元素，我们使用$表示“以...结尾” 。

Syntax:

句法：

css=[attribute$=attributeValue]

Value to be added in the By.cssSelector method:

要在By.cssSelector方法中添加的值：

css=input[id$='100']

package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class  CSSLocatorsEndswith {       public static void main (String [] args){       WebDriver driver = new ChromeDriver();       driver.get("https://www.facebook.com/");       driver.findElement(By.cssSelector("input[id$='100']")).sendKeys("journaldev");      } }

5.3）包含（*） (5.3) Contains (*))

In order to select the element that contains a substring, we use * which means ‘sub-string’.

为了选择包含子字符串的元素，我们使用*表示'sub-string' 。

Syntax:

句法：

css=[attribute*=attributeValue]

Example:

例：

package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class  CSSLocatorsContains {       public static void main (String [] args){       WebDriver driver = new ChromeDriver();       driver.get("https://www.facebook.com/");       driver.findElement(By.cssSelector("input[id*='id']")).sendKeys("journaldev");      } }

We can also use the contains() method.

我们也可以使用contains（）方法。

driver.findElement(By.cssSelector("input:contains('id')")).sendKeys("journaldev");

6.定位子元素（直接子元素） (6. Locating Child Elements (Direct Child))

Syntax: parentLocator>childLocator

语法 ：parentLocator> childLocator

Example:

例：

For the Sample HTML:

对于示例HTML：

    
     Submit
    

CSS Locator: div#buttonDiv>button

CSS定位器 ：div＃buttonDiv> button

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

说明 ：'div＃buttonDiv> button'将首先转到ID为'buttonDiv'的div元素，然后将选择其子元素-'button'。

7.在其他元素（子元素或子子元素）中定位元素 (7. Locating elements inside other elements (child or sub-child))

Syntax: parentLocator>locator1 locator2

语法 ：parentLocator> locator1 locator2

CSS Locator: div#buttonDiv button

CSS Locator ：div＃buttonDiv按钮

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

描述 ：'div＃buttonDiv button'将首先转到ID为'buttonDiv'的div元素，然后将在其中选择'button'元素（可以是其子元素或子子元素）。

8.定位第n个孩子 (8. Locating nth Child)

Example:

例：

For the Sample HTML:

对于示例HTML：

    
     
Load Testing
     
Security Testing
     
Manual Testing
    

CSS Locator: #testingTypes li:nth-child(2)

CSS Locator ：#testingTypes li：nth-​​child（2）

Description:: ‘#testingTypes li:nth-child(2)’ will select the element with id ‘testingTypes’ and then locate the 2nd child of type li i.e. ‘Security Testing’ list item.

说明：： '#testingTypes li：nth-​​child（2）'将选择ID为'testingTypes'的元素，然后找到类型为li的第二个子元素，即“ Security Testing”列表项。

9.结论 (9. Conclusion)

Selenium CSS Selector is one of the most frequently used strategies to locate web element because of its simplified syntax.

Selenium CSS Selector是简化Web元素定位的最常用策略之一。

翻译自: