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

Question

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

我注意到如果我创建一个屏幕截图: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，然后单击空搜索。我注意到，由于 session ID 被跟踪，我想将其作为一种 E2E 测试来执行，以便获得结果表数据。

我看到选项卡等的内容是动态加载的，所以不知何故页面无法查询出现问题。

我正在尝试其他事情看看会发生什么，等待标 checkout 现，但它会在 30 秒后超时:

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

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

编辑 我注意到，由于 iframe，评估未正确查询组件。不过，如果我想开发端到端测试，我假设有一种方法可以以某种方式获取对按钮的引用并单击它，或者模拟单击。*

Answer 1

您可以从选择器中获取 iframe。由于 iframe 具有 ID TWRIFrame，您可以等待该选择器，然后获取 contentFrame来自那个元素。
一旦你有了框架，frame class具有与页面类几乎相同的功能，例如点击。

请注意，由于该 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']");