使用Selenium开发Instagram机器人时无法定位后续元素的问题

问题描述 #

我用Selenium开发Instagram机器人，目标是点击顶部[+]创建按钮，选择下拉菜单里的Post或Story选项。但遇到以下问题：

• 开启开发者工具（Inspect）时，代码点击创建按钮后程序卡住，无法定位后续的Post/Story元素，且无报错；
• 手动点击创建按钮后，再用代码点击Post对应的XPath，能正常打开文件选择对话框。

相关HTML代码 #

<div aria-hidden="false" class="_ad8j _aa5x _aa5-"><div class="_aa61"><div class="_abm4" aria-disabled="false" role="button" tabindex="0" style="cursor: pointer;"><div aria-labelledby="f164fa7b8b81fb f25b63fbbbaab04 fa96d5b7069bd8 f8578df4b0a8" class="_ab8w  _ab94 _ab97 _ab9f _ab9k _ab9p  _ab9- _aba8 _abcm"><div class="_ab8w  _ab94 _ab99 _ab9h _ab9m _ab9o _abcm"><div class="_ab8w  _ab94 _ab99 _ab9f _ab9m _ab9p _abcm" id="f25b63fbbbaab04"><div class="_aacl _aaco _aacu _aacx _aada"><div class="_ab8w  _ab94 _ab99 _ab9h _ab9m _ab9p  _abbi _abcm" style="height: 28px;"><div class="_aacl _aaco _aacu _aacx _aada">Post</div></div></div></div></div><div class="_ab8w  _ab94 _ab99 _ab9f _ab9m _ab9p  _abb1 _abcm"><svg aria-label="Post" class="_ab6-" color="#fafafa" fill="#fafafa" height="16" role="img" viewBox="0 0 24 24" width="16"><rect fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="18" x="3" y="3"></rect><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9.015" x2="9.015" y1="3" y2="21"></line><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.985" x2="14.985" y1="3" y2="21"></line><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21" x2="3" y1="9.015" y2="9.015"></line><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21" x2="3" y1="14.985" y2="14.985"></line></svg></div></div></div><div class="_abm4" aria-disabled="false" role="button" tabindex="0" style="cursor: pointer;"><div aria-labelledby="f4f45cbdcdfb08 f38d9baa8e9f58 f151c2901bc3fe4 ff0e85333e79a8" class="_ab8w  _ab94 _ab97 _ab9f _ab9k _ab9p  _ab9- _aba8 _abcm"><div class="_ab8w  _ab94 _ab99 _ab9h _ab9m _ab9o _abcm"><div class="_ab8w  _ab94 _ab99 _ab9f _ab9m _ab9p _abcm" id="f38d9baa8e9f58"><div class="_aacl _aaco _aacu _aacx _aada"><div class="_ab8w  _ab94 _ab99 _ab9h _ab9m _ab9p  _abbi _abcm" style="height: 28px;"><div class="_aacl _aaco _aacu _aacx _aada">Story</div></div></div></div></div><div class="_ab8w  _ab94 _ab99 _ab9f _ab9m _ab9p  _abb1 _abcm"><svg aria-label="Story" class="_ab6-" color="#fafafa" fill="#fafafa" height="16" role="img" viewBox="0 0 24 24" width="16"><path d="M3.914 5.32q.338-.406.714-.778m-3.122 7.855a9.903 9.903 0 0 1-.007-.386 10.49 10.49 0 0 1 .517-3.265m3.242 11.337a10.568 10.568 0 0 1-2.89-3.864m14.482 5.109a10.535 10.535 0 0 1-8.162.649M12.001 1.51a10.505 10.505 0 0 1 7.926 17.392" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8.006" y2="16.006"></line><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="16" x2="8" y1="12.006" y2="12.006"></line></svg></div></div></div></div><div class="_aa62"></div></div>

我的Python代码 #

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import time

chrome_options = Options()
chrome_options.add_experimental_option("detach", True)
chrome_options.add_argument("--auto-open-devtools-for-tabs")
chrome_options.add_argument("user-data-dir=/Users/smitty/Library/Application Support/Google/Chrome")
chrome_options.add_argument("--profile-directory=Profile 3")

driver = webdriver.Chrome(executable_path="/Users/smitty/Downloads/chromedriver_mac64/chromedriver", options=chrome_options)

driver.get("https://www.instagram.com/")
driver.refresh()

time.sleep(10)
create = driver.find_element("xpath", '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div[2]/section/div[1]/nav/div/header/div/div/div[1]/div[1]/div[2]/a/div')
create.click()
create.click()

#### It works but not when I have the create enabled
time.sleep(5)
Post = driver.find_element("xpath", '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div[2]/section/div[1]/nav/div/header/div/div/div[1]/div[1]/div[1]/div/div/div[1]/div[1]/div')
Post.click()

# time.sleep(10)
# Story = driver.find_element("xpath", '/html/body/div[2]/div/div/div/div[1]/div/div/div/div[1]/div[1]/div[2]/section/div[1]/nav/div/header/div/div/div[1]/div[1]/div[1]/div/div/div[1]/div[2]/div')
# Story.click()

# time.sleep(10)
# driver.quit()

解决方案 #

问题根源 #

1. 开启开发者工具时，页面布局会因DevTools占用空间发生变化，导致绝对XPath失效；
2. 绝对XPath本身稳定性极差，页面结构稍有变动就会定位失败；
3. 固定时长的time.sleep()无法适配元素加载延迟，可能导致元素未渲染完成就执行定位操作。

修复步骤 #

1. 替换绝对XPath为相对定位，基于元素文本、属性或层级关系定位，提升稳定性；
2. 使用显式等待替代time.sleep()，等待元素可点击后再操作，避免加载延迟问题；
3. 固定浏览器窗口大小，减少DevTools对布局的干扰。

修改后的代码 #

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

chrome_options = Options()
chrome_options.add_experimental_option("detach", True)
chrome_options.add_argument("--auto-open-devtools-for-tabs")
chrome_options.add_argument("user-data-dir=/Users/smitty/Library/Application Support/Google/Chrome")
chrome_options.add_argument("--profile-directory=Profile 3")
# 固定窗口大小，避免DevTools影响布局
chrome_options.add_argument("--window-size=1920,1080")

driver = webdriver.Chrome(executable_path="/Users/smitty/Downloads/chromedriver_mac64/chromedriver", options=chrome_options)
# 设置最长等待时间20秒
wait = WebDriverWait(driver, 20)

driver.get("https://www.instagram.com/")

# 等待创建按钮加载完成并点击
create_btn = wait.until(EC.element_to_be_clickable((By.XPATH, "//a[contains(@aria-label, '创建')]//div")))
create_btn.click()

# 等待Post选项加载完成并点击
post_option = wait.until(EC.element_to_be_clickable((By.XPATH, "//div[text()='Post']/ancestor::div[@role='button']")))
post_option.click()

# 如需点击Story，替换为以下代码
# story_option = wait.until(EC.element_to_be_clickable((By.XPATH, "//div[text()='Story']/ancestor::div[@role='button']")))
# story_option.click()

# driver.quit()

关键改进点 #

• 用WebDriverWait显式等待元素状态，比固定时长等待更可靠；
• 相对XPath基于元素文本和角色定位，不受页面小结构变动影响；
• 固定窗口大小，降低DevTools对元素布局的干扰；
• 移除重复的create.click()，一次点击即可弹出菜单。

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