如何在Speedtest网站定位Selenium CSS选择器及相关技术咨询

一、如何找到div[data-result-id*='true']这个CSS选择器 #

这个选择器是用来判断测速是否完成的，具体查找步骤如下：

1. 打开speedtest.net，点击开始测速，等待测速完成。
2. 按下F12或右键页面选择「检查」，打开浏览器开发者工具的「Elements」面板。
3. 点击面板左上角的「选择元素」图标（箭头形状），然后点击页面上的测速结果区域（比如下载/上传速度的显示区域）。
4. 在Elements面板中，向上回溯父元素，找到带有data-result-id属性的<div>标签。你会发现测速完成后，这个属性的值里包含true字符串，所以用CSS的属性包含选择器*=来定位这个元素，以此判断测速已完成。

二、Selenium与CSS选择器的核心技术要点 #

1. 属性选择器常用语法 #

CSS属性选择器是定位动态元素的利器，常用写法：

• [attr='val']：精确匹配属性值，比如input[name='username']
• [attr*='val']：属性值包含指定字符串（就是你看到的例子用法）
• [attr^='val']：属性值以指定字符串开头，比如a[href^='https']
• [attr$='val']：属性值以指定字符串结尾，比如img[src$='.png']

2. 基础选择器 #

• 类选择器：.class-name，比如.start-button匹配所有带start-button类的元素；多个类连写.a.b匹配同时有a和b类的元素
• ID选择器：#id-name，ID唯一，优先级最高，比如#container

3. 层级选择器 #

• 后代选择器：parent child，匹配父元素下所有后代元素，比如.result-container span
• 子元素选择器：parent > child，只匹配父元素的直接子元素，比如.result-container > div
• 相邻兄弟选择器：elem + sibling，匹配元素后的第一个同级元素，比如.download-speed + .upload-speed

4. 与等待策略结合 #

永远优先用显式等待代替time.sleep()，比如：

WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div[data-result-id*='true']")))

这种方式会轮询检查元素状态，比固定等待时间更稳定，能适配不同网络速度。

5. 实用注意事项 #

• CSS选择器比自动生成的长XPath（比如你代码里的那个超长XPath）维护性更强，执行速度也更快
• 动态元素要依赖状态变化的属性定位，比如测速完成后data-result-id的变化，不要依赖固定的元素位置
• 避免用过于宽泛的选择器，比如div，要尽量缩小范围，结合类、属性等提高定位准确性

三、对你代码的小优化 #

1. 把固定等待time.sleep(5)替换为显式等待，等待开始按钮可点击：

go_button = WebDriverWait(self.driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, '.start-button a'))
)
go_button.click()

2. 去掉重复调用的bot.get_internet_speed()，避免重复执行测速
3. 代码里的长XPath可以替换为更简洁的CSS选择器，比如测速中的下载速度可以用.download-speed span（不过测速完成后用结果区域的.result-data-value更准确）

内容的提问来源于stack exchange，提问作者Anurag Jain