Locating Nested Elements via Attribute Selectors in Puppeteer

My React app attaches ‘data-test-id’ markers to components. Puppeteer fails when using a descendant selector ([data-test-id=“TopBar”] [data-test-id=“InnerItem”]) but succeeds with a simple child selector ([data-test-id=“TopBar”] input).

const extractedText = await page.$eval('[data-test-id="TopBar"] [data-test-id="InnerItem"]', el => el.innerText);
const childText = await page.$eval('[data-test-id="TopBar"] input', el => el.innerText);

maybe the inner element isnt ready your query is run make sure try waiting for it with page.waitforselector, react sometimes updates these markers later than expected