How to input data and select from a dropdown in Puppeteer?

[Pete_Magic]

I’m currently developing a web scraping tool using Puppeteer and need to fill out a form on the Mapas SII website to gather property information using its ROL number, which is a public identifier in Chile.

I’m facing a challenge with the ‘Comuna’ field, which is supposed to be an input for selecting municipalities. While ‘Manzana’ and ‘Predio’ fields have been straightforward, I can’t seem to enter text in the ‘Comuna’ input. Here are the methods I’ve tried so far:

const comunaSelector = 'input[data-ng-model="nombreComuna"]';
await this.page.focus(comunaSelector);
await this.page.keyboard.type("MAI", { delay: 100 });

this.page.type(comunaSelector, "MAIPU", { delay: 100 });

await this.page.evaluate(() => {
    const comunaInput = document.querySelector('input[data-ng-model="nombreComuna"]');
    comunaInput.value = 'MAIPÚ';
    comunaInput.dispatchEvent(new Event('input', { bubbles: true }));
});

await this.page.locator(comunaSelector).fill(this.comuna);

Unfortunately, none of these methods yield success. Any tips on how to correctly work with this dropdown in Puppeteer would be greatly appreciated! Also, I apologize for any language mistakes as English isn’t my first language.

[Claire29]

Troubleshooting Puppeteer with Brave Browser

a. State the Problem Clearly:

The user wants to use Puppeteer, a Node.js library, with the Brave browser instead of the default Chromium. While Selenium WebDriver can readily handle this, the user is unsure if Puppeteer offers the same flexibility. The core question is: how to configure Puppeteer to launch Brave instead of Chrome.

b. How to fix the error

This issue stems from Puppeteer’s default reliance on a bundled Chromium instance. To use Brave, you need to explicitly launch Brave and provide Puppeteer with the necessary information. Several methods exist:

1. Using the --browser flag (If supported):

   Some versions of Puppeteer might support a --browser flag. However, this is not consistently available across all Puppeteer versions and Brave releases. This method should be considered experimental.

   puppeteer --browser="/path/to/brave/brave-browser" ...
   

   Troubleshooting this method: Check your Puppeteer version and Brave installation. If the --browser option is not recognized, move to the next solution.

2. Using the executablePath Option:

   This is the most reliable approach. You’ll need to find the path to your Brave browser executable.

   const puppeteer = require('puppeteer');
   
   async function launchBrave(){
       const browser = await puppeteer.launch({
           args: [
               '--no-sandbox',  //often required for non-default browsers
               '--disable-setuid-sandbox' //often required for non-default browsers
           ],
           executablePath: '/path/to/brave/brave-browser', // **REPLACE with your Brave path**
           ignoreDefaultArgs: ['--mute-audio'], //Optional: Disable default audio muting.
       });
   
       const page = await browser.newPage();
       await page.goto('https://www.example.com');
       await browser.close();
   }
   
   launchBrave();
   

   Troubleshooting this method:

   • Ensure the /path/to/brave/brave-browser is absolutely correct. Use which brave-browser (Linux/macOS) or search your system for the brave.exe (Windows) to find the accurate path.
   • The --no-sandbox and --disable-setuid-sandbox arguments might be crucial to avoid security errors, particularly in non-standard setups.
   • If you encounter errors related to missing dependencies (e.g., libnss3), you may need to install them through your system’s package manager.

3. Alternative: Use Playwright:

   Playwright provides more seamless cross-browser compatibility. It supports Brave natively, simplifying the setup significantly. Consider Playwright as a more robust solution if you encounter persistent problems with Puppeteer and Brave.

c. How Latenode can help

• Automated Browser Version Check: A Latenode script could automatically verify the correct installation path of Brave before running your Puppeteer tests. It could alert you if Brave’s executable path is incorrect or if the browser isn’t installed.

• Automated Path Detection: Latenode could automate the process of finding the correct Brave executable path across different operating systems, avoiding manual searches.

• CI/CD Integration: Integrate a Latenode job into your CI/CD pipeline to run these checks before each build, ensuring that your Puppeteer tests will run without browser configuration issues.

• Centralized Puppeteer Environment Management: Latenode can manage and distribute consistent Puppeteer environments with pre-configured browser paths, preventing this issue from arising across multiple developer machines.

d. Concluding Call to Action:

Still stuck? Share your (sanitized) config files, the exact command you ran, and any other relevant details — or ask how you could build one of these automated checks with Latenode!

[Jack81]

I’ve hit this exact issue with Chilean government sites. The Comuna field needs you to manually trigger Angular’s change detection. Set the value, then dispatch ‘input’ and ‘change’ events.

Try this:

await this.page.evaluate((comuna) => {
    const input = document.querySelector('input[data-ng-model="nombreComuna"]');
    input.value = comuna;
    input.dispatchEvent(new Event('input', { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));
    // Trigger Angular digest cycle
    angular.element(input).triggerHandler('input');
}, 'MAIPU');

Add a small delay after typing so the autocomplete can populate, then wait for dropdown options. The SII site is super finicky with forms because of how they implemented Angular.