图像显示 1 件事，但查询的数据在加载网站时显示另一件事

Question

我试图查询一个网站：const url = "https://personal.vanguard.com/us/FixedIncomeHome"，希望自动化木偶师中的某些功能。

我注意到如果我创建一个屏幕截图：page.screenshot("preclick.png")它将显示带有选项卡的页面数据。 当我尝试跟进查询时，它似乎没有返回第二个选项卡(由以下选择器表示：a[container="CD"]

const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(url, {waitUntil: 'networkidle2'})
page.screenshot("start.png")
page.evaluate( () => {
document.querySelectorAll("a[container='CD']")[0].click()
})
///...

我真的不知道为什么会这样。 理想情况下，我正在尝试单击 CD，然后单击空搜索。 我注意到，由于会话 ID 被跟踪，我想将其作为一种 E2E 测试来获取生成的表数据。

我看到选项卡等的内容是动态加载的，因此页面无法查询存在问题。

我正在尝试其他事情来查看会发生什么，等待标签出现，但它会在 30 秒后超时：

await page.waitForSelector("a[container='CD']").then( async resolve => {
page.execute( () => document.querySelector("a[container='CD']").click() );
});

我不知道为什么屏幕截图显示 HTML，但是当尝试从执行中查询它时，它会失败。 为什么会发生这种情况对我来说是没有意义的。 理想情况下，我想单击 CD 选项卡，然后我想单击搜索，然后我想循环浏览表中的 20 个结果。

编辑我注意到由于 iframe 的原因，评估没有正确查询组件。 如果我想开发 e2e 测试，我认为有一种方法可以以某种方式获取对按钮的引用并单击它，或者模拟单击。

Answer 1

您可以从选择器获取iframe。由于iframe具有 IDTWRIFrame，因此您可以等待该选择器，然后从该元素获取 contentFrame。
一旦你有了框架，框架类就具有与页面类几乎相同的功能，例如click.

请注意，由于该 iframe 来自其他域，因此带有--disable-features=site-per-process标志。

const browser = await puppeteer.launch({headless: false, args: ['--disable-features=site-per-process']});
const page = await browser.newPage();
await page.goto('https://personal.vanguard.com/us/FixedIncomeHome', {waitUntil: 'networkidle2'});
await page.screenshot("start.png");
await page.waitForSelector('#TWRIFrame');
const frameElement = await page.$('#TWRIFrame');
const frame = await frameElement.contentFrame();
await frame.click("a[container='CD']");