Image shows 1 thing, but queried data shows another when loading a website

I was trying to query a website: const url = "https://personal.vanguard.com/us/FixedIncomeHome" with the hope to automate some functionality within puppeteer.

I noticed if i create a screen shot: page.screenshot("preclick.png") it will show the page data with tabs. When i try to follow it up with a query, it seems to not return the second tab (denoted by the following selector: 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()
})
///...

and i dont really know why this is the case. Ideally, i am trying to click CD and then click an empty search. I noticed that since session ids are tracked, I wanted to do this as a sort of E2E test in order to get the resulting table data.

I see that the Content of tab etc is dynamically loaded, so somehow there is an issue with the page being able to query.

I was attempting something else to see what would occur, waiting for the tag to appear, BUT it would just timeout after 30 seconds:

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

I dont know why the screenshot shows the HTML, but when attempting to query for it from within execute it fails. It doesnt make sense to me why this occurs. Ideally, I want to click CD tab, then i want to click Search, then i want to loop through the 20 results in the table.

EDIT I was noticing that evaluate was not querying the component correctly because of an iframe. If i want to develop e2e testing though, i assumed there was a way to somehow get a reference to the button and click it, or simulate a click.*