How to Handle Dynamic File Inputs in Puppeteer

I’m working with Puppeteer and encountering an issue where I need to interact with multiple elements on a page that are dynamically loaded after clicking an anchor tag. Specifically, I need to click on the second file input after clicking the anchor tag, but it’s not available immediately.

// Click the first anchor tag to trigger content change
await page.click('.file_pm a:first-of-type');

// Wait for the page to update after clicking
await page.waitForTimeout(2500); // Adjust delay as needed

// Ensure the new file inputs are available
await page.waitForSelector('tbody input[type="file"]:nth-of-type(2)', { visible: true });

// Select and upload the first file
const imageUploadHandler1 = await page.$('tbody input[type="file"]:nth-of-type(1)');
if (imageUploadHandler1) {
    await imageUploadHandler1.uploadFile(user.images[0].src);
} else {
    console.error('First file input is not found.');
}

// Re-check for the second file input and upload the file
const imageUploadHandler2 = await page.$('tbody input[type="file"]:nth-of-type(2)');
if (imageUploadHandler2) {
    await imageUploadHandler2.uploadFile(user.images[1].src);
} else {
    console.error('Second file input is not found.');
}

// Click the anchor tag again if needed
await page.click('.file_pm a:first-of-type');

Problem:

After clicking the anchor tag, the second file input is not found immediately. Even with extended time delays, the element appears visible on the page, but my code cannot find it. I suspect this issue is due to the file inputs being loaded dynamically and not being available right after the click action.

Question:

• What’s the best approach to ensure Puppeteer waits correctly for dynamically loaded elements after an action?
• Is there a more reliable way to detect when new elements are available and interact with them?
• Are there best practices for handling dynamic content updates with Puppeteer, especially for file inputs?

Any help or suggestions would be greatly appreciated!