Puppeteer操作Morningstar网站时无法定位#styleWeight元素的问题求助

嘿，我最近在用Puppeteer操作Morningstar的基金页面时遇到了一个棘手的问题，想请大家帮忙看看哪里出错了🤔

我要处理的页面是VTWIX基金的portfolio页面，地址是https://www.morningstar.com/funds/xnas/VTWIX/portfolio。在浏览器控制台里用document.querySelectorAll("#styleWeight")能正常找到目标元素，但用Puppeteer运行以下代码时，却一直抛出错误：Error: No element found for selector: #styleWeight

我的代码如下：

const browser = await puppeteer.launch({ headless: true });

const page = await browser.newPage();

const fundUrlOnMorningstar = `https://www.morningstar.com/funds/xnas/VTWIX/portfolio`;

await page.goto(fundUrlOnMorningstar, { waitUntil: 'domcontentloaded' });

const weightSelector = '#styleWeight';

page.waitForSelector(weightSelector);

await page.click(weightSelector);

我已经确认元素的ID确实是styleWeight，控制台能找到，但Puppeteer就是定位不到，想问问大家我是不是漏掉了什么关键步骤？

我自己初步梳理了几个可能的原因，但还没完全验证： #

• 是不是waitForSelector没有加await，导致代码还没等元素加载出来就执行了点击操作？
• 页面采用动态渲染，domcontentloaded的等待策略只完成了初始DOM加载，目标元素还没被JS渲染出来？
• 网站是否有针对headless浏览器的反爬机制，导致元素没有正常加载？

希望有经验的朋友能给点建议，谢谢大家！

备注：内容来源于stack exchange，提问作者user7331530