Selenium WebDriver提供By.CSS_SELECTOR定位元素方法

`By.CSS_SELECTOR` 是 Selenium WebDriver 提供的一种定位元素的方法，它答应使用 CSS 选择器来定位页面上的元素。以下是常见的 CSS 选择器语法：
1. **标签选择器（Tag Selector）**：通过元素的标署名选择元素。
   - 示例：`p` 选取所有 p 标签的元素。
2. **类选择器（Class Selector）**：通过元素的类名选择元素。
   - 示例：`.container` 选取所有类名为 container 的元素。
3. **ID 选择器（ID Selector）**：通过元素的 ID 属性选择元素。
   - 示例：`#my_div` 选取 ID 属性为 my_div 的元素。
4. **属性选择器（Attribute Selector）**：根据元素的属性值选择元素。
   - 示例：`[name='username']` 选取所有 name 属性值为 username 的元素。
5. **子元素选择器（Child Selector）**：选择指定元素的直接子元素。
   - 示例：`div > p` 选取所有直接子元素为 div 的 p 元素。
6. **后代元素选择器（Descendant Selector）**：选择指定元素的后代元素。
   - 示例：`div p` 选取所有 div 元素下的 p 元素。
7. **相邻兄弟选择器（Adjacent Sibling Selector）**：选择指定元素的相邻兄弟元素。
   - 示例：`h2 + p` 选取紧跟在 h2 元素后的第一个 p 元素。
8. **通用兄弟选择器（General Sibling Selector）**：选择指定元素的所有兄弟元素。
   - 示例：`h2 ~ p` 选取紧跟在 h2 元素后的所有 p 元素。
9. **伪类选择器（Pseudo-class Selector）**：根据元素的状态或位置选择元素。
   - 示例：`:hover` 选取鼠标悬停在元素上的状态。:nth-child(n) 选取父元素的第 n 个子元素。
10. **伪元素选择器（Pseudo-element Selector）**：选择元素的特定部分。
    - 示例：`::before` 选取元素的前面生成的内容。::after 选取元素的后面生成的内容。
11. **属性存在选择器：选择具有指定属性的元素。
    - 示例：input[type] 选取所有具有 type 属性的 input 元素。
以上是一些常见的 CSS 选择器语法，结合使用它们可以实现灵活且精准的元素定位。
`By.CSS_SELECTOR` 定位元素并模拟用户与页面元素的交互的完备示例代码：

1. from selenium import webdriver
2. from selenium.webdriver.common.by import By
3. import time
4. # 启动 Chrome 浏览器
5. driver = webdriver.Chrome()
7. # 打开页面
8. driver.get("data:text/html;charset=utf-8," + """
9. <div id="my_div" class="container">
10.     <H4>type、press 和 check 方法来模拟用户与页面元素的交互操作</H4>
11.     <p>Paragraph 1</p>
12.     <p>Paragraph 2</p>
13.     <p>Paragraph 3</p>
14.     <label for="my_input">my_input :<input type="text" id="my_input"></label><BR><BR>
15.     <button id="my_button">Click Me</button>
16.     <input type="checkbox" id="my_checkbox">
17.     <form action="/submit">
18.         <!-- 复选框 -->
19.         <label for="checkbox1">选项1:</label>
20.         <input type="checkbox" id="checkbox1" name="option1" value="Option 1">
21.         
22.         <label for="checkbox2">选项2:</label>
23.         <input type="checkbox" id="checkbox2" name="option2" value="Option 2">
24.         
25.         <!-- 下拉框 -->
26.         <label for="dropdown">选择一项:</label>
27.         <select id="dropdown" name="dropdown">
28.             <option value="option1">选项1</option>
29.             <option value="option2">选项2</option>
30.             <option value="option3">选项3</option>
31.         </select>
32.         
33.         <input type="submit" value="提交">
34.     </form>
35. </div>
36. """)
38. # 使用 CSS 选择器定位元素并模拟用户与页面元素的交互
39. # 输入文本
40. driver.find_element(By.CSS_SELECTOR, "input#my_input").send_keys("Hello, World!")
42. # 点击按钮
43. driver.find_element(By.CSS_SELECTOR, "button#my_button").click()
45. # 勾选复选框
46. driver.find_element(By.CSS_SELECTOR, "input#my_checkbox").click()
48. # 选择下拉框选项
49. driver.find_element(By.CSS_SELECTOR, "select#dropdown option[value='option2']").click()
51. # 提交表单
52. driver.find_element(By.CSS_SELECTOR, "input[type='submit']").click()
54. time.sleep(5)
55. # 关闭浏览器
56. driver.quit()
58. # find_element(by, value) 方法是 WebDriver 类对象中用于查找单个页面元素的方法。它接受两个参数：
59. # by: 指定定位元素的方法，可以是以下之一：
60. # By.ID: 使用元素的 id 属性来定位。
61. # By.NAME: 使用元素的 name 属性来定位。
62. # By.XPATH: 使用 XPath 表达式来定位。
63. # By.LINK_TEXT: 使用链接文本来定位 <a> 元素。
64. # By.PARTIAL_LINK_TEXT: 使用部分链接文本来定位 <a> 元素。
65. # By.TAG_NAME: 使用标签名称来定位。
66. # By.CLASS_NAME: 使用 class 属性来定位。
67. # By.CSS_SELECTOR: 使用 CSS 选择器来定位。
68. # value: 定位方法对应的值，即要定位的元素的具体标识信息。
69. # 该方法会返回匹配的第一个元素，如果找不到匹配的元素，会抛出 NoSuchElementException 异常。
71. # `By.CSS_SELECTOR` 是 Selenium WebDriver 提供的一种定位元素的方法，它允许使用 CSS 选择器来定位页面上的元素。
72. # 以下是常见的 CSS 选择器语法：
73. # 1. **标签选择器（Tag Selector）**：通过元素的标签名选择元素。
74. #    - 示例：`p` 选取所有 p 标签的元素。
75. # 2. **类选择器（Class Selector）**：通过元素的类名选择元素。
76. #    - 示例：`.container` 选取所有类名为 container 的元素。
77. # 3. **ID 选择器（ID Selector）**：通过元素的 ID 属性选择元素。
78. #    - 示例：`#my_div` 选取 ID 属性为 my_div 的元素。
79. # 4. **属性选择器（Attribute Selector）**：根据元素的属性值选择元素。
80. #    - 示例：`[name='username']` 选取所有 name 属性值为 username 的元素。
81. # 5. **子元素选择器（Child Selector）**：选择指定元素的直接子元素。
82. #    - 示例：`div > p` 选取所有直接子元素为 div 的 p 元素。
83. # 6. **后代元素选择器（Descendant Selector）**：选择指定元素的后代元素。
84. #    - 示例：`div p` 选取所有 div 元素下的 p 元素。
85. # 7. **相邻兄弟选择器（Adjacent Sibling Selector）**：选择指定元素的相邻兄弟元素。
86. #    - 示例：`h2 + p` 选取紧跟在 h2 元素后的第一个 p 元素。
87. # 8. **通用兄弟选择器（General Sibling Selector）**：选择指定元素的所有兄弟元素。
88. #    - 示例：`h2 ~ p` 选取紧跟在 h2 元素后的所有 p 元素。
89. # 9. **伪类选择器（Pseudo-class Selector）**：根据元素的状态或位置选择元素。
90. #    - 示例：`:hover` 选取鼠标悬停在元素上的状态。:nth-child(n) 选取父元素的第 n 个子元素。
91. # 10. **伪元素选择器（Pseudo-element Selector）**：选择元素的特定部分。
92. #     - 示例：`::before` 选取元素的前面生成的内容。::after 选取元素的后面生成的内容。
93. # 11. **属性存在选择器：选择具有指定属性的元素。
94. #     - 示例：input[type] 选取所有具有 type 属性的 input 元素。
96. # 以上是一些常见的 CSS 选择器语法，结合使用它们可以实现灵活且精准的元素定位。

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。