113.md

# 9升 WebDriver –定位元素：第3a部分（由cssSelector提供）

> 原文： [https://javabeginnerstutorial.com/selenium/9l-webdriver-locating-elements-3a/](https://javabeginnerstutorial.com/selenium/9l-webdriver-locating-elements-3a/)

Hiya测试人员！ 让我们直接进入cssSelector定位策略。

如果我们没有选择使用ID，类或名称来查找元素的方法，该怎么办？ 袖子上有东西吗？ 好吧，我有一个 **cssSelectors** 。 这是一种先进而有效的策略。

##### *<u>准备点亮</u>*

*   **CSS** （级联样式表）。 根据Wikipedia的说法，“ CSS是一种样式表语言，用于描述以标记语言编写的文档的表示形式”。 它通过添加样式来更改HTML元素的外观，并定义应如何在网页上显示它们。
*   **选择器**是使用HTML标记，属性及其值构造的模式。 然后将它们用于匹配所需的Web元素。

##### *<u>使用cssSelector定位器优于XPath定位器的优点</u>*

*   速度更快，尤其是在Internet Explorer中
*   更简单
*   更具可读性
*   首选使用方式

## *<u>通过cssSelector定位</u>*

有多种使用cssSelector定位器的方式，这取决于可用的标签，属性，关键字等。要列出它们，

1.  使用标签和ID属性
2.  使用标签和类属性
3.  使用标签和名称属性
4.  使用标签和多个属性
5.  定位子元素
6.  按子字符串匹配

在这篇文章中，我们将介绍前四种方法。 是时候一步一步地完成这些工作了。

## 1.使用标签和ID属性

借助cssSelector定位策略，可以使用元素的HTML标记及其ID属性及其值来对其进行访问。

有两种方法可以实现此目的：

***语法*** *：* *driver.findElement（By.cssSelector（“ tag_name＃value_of_id”）））;*
或
*driver.findElement（By.cssSelector（“ tag_name [id ='value_of_id']”）））;;*

***说明*** *：*使用匹配的CSS选择器定位元素。 在第一种方法中，**＃**符号代表“ id”属性。

***示例*** *：*让我们在Gmail帐户登录页面上找到“电子邮件”文本框。

右键单击“输入电子邮件”文本框，然后选择检查元素以获取相应的HTML代码。 我们可以看到“输入”标签的“ id”属性为“电子邮件”。

*代码：*

```java
driver.findElement(By.cssSelector("input#Email"));
```

（要么）

```java
driver.findElement(By.cssSelector("input[id='Email']"));
```

![By cssSelector](img/ef82f235798b42892dedae6b0b8a9842.png)

## 2.使用标签和类属性

元素的HTML标签及其类属性及其值可用于访问它。 也有两种方法可以实现此目的，

***语法**：driver.findElement（By.cssSelector（“ tag_name.value_of_class”）））;*
或
*driver.findElement（By.cssSelector（“ tag_name [class ='value_of_class']”）））;;*

***说明*** *：*使用匹配的CSS选择器定位元素。 在第一种方法中，“。”符号代表“类别”属性。

***示例*** *：*让我们在使用类属性的Gmail帐户“注册”页面上找到“手机”文本框。

右键点击“手机”文本框，然后选择检查元素，以获取相应的HTML代码，如下所示，

```java
<input   tabindex="0" name="RecoveryPhoneNumber" 
id="RecoveryPhoneNumber" value="" 
class="i18n_phone_number_input-inner_input" type="tel">
```

我们可以看到“ **输入**”标签具有“ **类**”属性，名称为“ **i18n_phone_number_input-inner_input** ”。

*Code:*

```java
driver.findElement(By.cssSelector("input.i18n_phone_number_input-inner_input "));
```

(or)

```java
driver.findElement(By.cssSelector("input[class='i18n_phone_number_input-inner_input']"));
```

## 3.使用标签和名称属性

元素的HTML标记及其名称属性及其值可用于访问它。

***语法*** *：* *driver.findElement（By.cssSelector（“ tag_name [name =’value_of_name’]”）））;*

***说明*** *：*使用匹配的CSS选择器定位元素。

***示例*** *：*让我们在Gmail帐户注册页面上找到名字文本框。

右键点击“名字”文本框，然后选择检查元素，以获取相应的HTML代码，如下所示，

```java
<input value="" name="FirstName" 
id="FirstName" spellcheck="false" class="   
form-error" aria-invalid="true" type="text">
```

我们可以看到，“ input”标签的“ **name** ”属性为“ **FirstName** ”。

*Code:*

```java
driver.findElement(By.cssSelector("input[name='FirstName']"));
```

## 4.使用标签和多个属性

元素的HTML标签和一个以上的属性及其值可用于访问它。

***语法*** *：* *driver.findElement（By.cssSelector（“ tag_name [attribute1 ='value_of_attribute1'] [attribute2 ='value_of_attribute2']”））） ;*

***说明*** *：*使用匹配的CSS选择器定位元素。 以这种方式可以提到许多属性。

***示例*** *：*让我们使用ID，类型和名称属性在Gmail帐户注册页面上找到“创建密码”文本框。

右键点击“创建密码”文本框，然后选择检查元素以获取相应的HTML代码，如下所示，

```java
<input name="Passwd" id="Passwd" type="password">
```

我们可以看到，“输入”标签具有“ **名称**”和“ **id** ”属性，它们的属性分别为“ **Passwd** ”和“ **类型**” '属性作为'**密码**'。

*Code:*

```java
driver.findElement(By.cssSelector("input#Passwd[name='Passwd']"));
```

(or)

```java
driver.findElement(By.cssSelector("input[type='Password'][name='Passwd'"));
```

如果使用id，则可以用“＃”符号表示，而可以用“。”符号表示类。

*感觉都糟透了吗？* *需要一些时间练习吗？*

我知道，您急需先休息一下。 你的愿望就是我的命令！ 现在，时间全在您了。

我们的下一篇文章很快见。 祝你有美好的一天！

###### 下一篇文章

##### [9m。 WebDriver –定位元素：第3b部分（由cssSelector续）](https://javabeginnerstutorial.com/selenium/9m-webdriver-locating-elements-3b/ "9m. WebDriver – Locating elements: Part 3b (by cssSelector contd.)")