1.什么是Selenium CSS选择器？

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

2. CSS选择器的好处

• 与其他选择器相比，速度更快
• 更具可读性
• 最令人反感的

3. CSS选择器的语法

CSS选择器语法

• HTML标记：这是用于表示Web元素的标记。

• #：#符号用于象征ID属性。
  使用ID属性时，必须使用#号。

• ID属性的值：是正在访问的ID属性的值。
  ID属性的值始终以#符号开头。

4.常用CSS选择器格式

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

• 标签和ID
• 标签和类别
• 标签和属性
• 标签，类和属性
• 子字符串匹配以(^)开头
• 以($)结尾
• 包含(*)
• 子元素直接子
• 子孩子
• 第n个孩子

4.1)HTML标签和ID

css=tag#id

例：

• 打开Chrome浏览器，然后导航到Gmail网络应用程序。

• 右键单击电子邮件或者电话输入框，然后选择检查。

电子邮件检查

• 下面的屏幕快照显示了电子邮件或者电话元素的标签和ID。

电子邮件标签ID

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

css=input#Email

package com.theitroad.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("theitroad"); 
     } 
}

4.2)HTML标记和类

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

语法：css = tag.class

例：

• 打开Chrome浏览器，然后导航到Facebook应用程序。

• 右键单击电子邮件或者电话输入框，然后选择检查。

电子邮件检查Facebook

• 下面的屏幕快照显示了电子邮件或者电话元素的标签和类别。

电子邮件标签类别

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

css=input.inputtext

package com.theitroad.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("theitroad"); 
    } 
}

4.3)HTML标记和属性

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

语法：

css=tag[attribute=value]

例：

• 打开Chrome浏览器，然后导航到Gmail应用程序。

• 右键单击电子邮件或者电话输入框，然后选择检查。

检查电子邮件CSS

• 下面的屏幕快照显示了电子邮件或者电话元素的标签和属性。

电子邮件标签属性

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

css=input[name=identifier]

package com.theitroad.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("theitroad"); 
    } 
}

4.4)HTML标记，类和属性

语法：

css=tag.class[attribute=value]

例：

• 打开Chrome浏览器，然后导航到Facebook应用程序。

• 右键单击电子邮件或者电话输入框，然后选择检查。

• 下面的屏幕快照显示了电子邮件或者电话元素的标签，类和属性。

电子邮件属性

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

css=input.inputtext[name=email]

package com.theitroad.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("theitroad"); 
    } 
}

5.子串匹配

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

5.1)以(^)开头

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

语法：

css=<[attribute^=string prefix]

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

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

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

package com.theitroad.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("theitroad"); 
    } 
}

5.2)以($)结尾

为了选择以某些结尾的元素，我们使用$表示"结尾为"。

语法：

css=[attribute$=attributeValue]

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

css=input[id$='100']

package com.theitroad.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("theitroad");
    } 
}

5.3)包含(*)

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

语法：

css=[attribute*=attributeValue]

例：

package com.theitroad.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("theitroad");
    } 
}

我们也可以使用contains()方法。

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

6.定位子元素(直接子元素)

语法：parentLocator> childLocator

例：

对于示例HTML：

<div id="buttonDiv" class="small">
<button id="submitButton1" type="button" class="btn">Submit</button>
</div>

CSS定位器：div#buttonDiv> button

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

7.在其他元素(子元素或者子子元素)中定位元素

语法：parentLocator> locator1 locator2

CSS定位器：div#buttonDiv按钮

说明：" div#buttonDiv按钮"将首先转到ID为" buttonDiv"的div元素，然后其中选择" button"元素(可以是其子元素或者子子元素)。

8.定位第n个孩子

例：

对于示例HTML：

<ul id="testingTypes">
<li>Load Testing</li>
<li>Security Testing</li>
<li>Manual Testing</li>
</ul>

CSS定位器：#testingTypes li：nth-child(2)

说明：："#testingTypes li：nth-child(2)"将选择ID为" testingTypes"的元素，然后找到li类型的第二个子元素，即"安全测试"列表项。