Javascript 如何使用puppeteer操作所有选项

我正在创建一个使用puppeteer的机器人，需要能够从下拉菜单中 Select 一个动态选项. 但我也是新来的，所以我真的不知道这是不是可能的.

我想得到一个列表内的所有选项，然后能够 Select 任何选项使用索引像这样的page.click(optionsList[3]);然后page.click(optionsList[0]);

Html代码如下所示:

<div class="parentClass">
    <!-- Each one of this divs represent an option from the dropdown menu -->
    <div data-visualcompletion="ignore-dynamic">
        <!-- <Lot of code 1 ...></> -->
    </div>
    <div data-visualcompletion="ignore-dynamic">
        <!-- <Lot of code 0 ...></> -->
    </div>
    <div data-visualcompletion="ignore-dynamic">
        <!-- <Lot of code 0 ...></> -->
    </div>
    <div data-visualcompletion="ignore-dynamic">
        <!-- <Lot of code 1 ...></> -->
    </div>
    <div data-visualcompletion="ignore-dynamic">
        <!-- <Lot of code 0 ...></> -->
    </div>
    <div data-visualcompletion="ignore-dynamic">
        <!-- <Lot of code 0 ...></> -->
    </div>
    <!-- ...and so on -->
</div>

正如您所看到的，"parentClass"内的div中的代码可能会有所不同，只有两种类型(代码1和代码0)我没有包括完整的代码，因为很多，但如果您需要的话，我可以添加它.

是否有可能捕获列表中的所有选项(具有data-visualcompletion属性的选项)，并能够使用索引:page.click(optionsList[3]); Select 任何选项？

我还想从另一个列表中的每个选项中获取文本，因为我假设optionsList将存储某种类型的 puppeteer 操纵者对象，代表下拉菜单中的每个选项或类似的东西.所以我想我需要另一个列表optionsText来存储每个选项的文本.

我try 过(成功):

  // Fetch the parent where all categories live (must be called after click on dropdown menu)
  let parentDomCategories = await page.$(constants.cssMpCreateItemCategoryContainer);
  // Fetch all categories in a list
  let domCategories = await parentDomCategories.$$(constants.cssMpCreateItemCategoryAttr);

  // Web categories = 33 & totalCats = 33. We good to go.
  let totalCats = await page.evaluate(el => el.length, domCategories);
  console.log(`Total number of categories: ${totalCats}`);

但我不知道我还能用domCategories美元做什么 我已经在网上搜索，这应该打印的类别:

  let categoriesText = await page.evaluate(el => el.textContent, domCategories);
  console.log(`Text?: ${categoriesText}`);

我得到了undefined.

当我运行时，domCategories是什么类型的:

  console.log(`typeof domCategories: ${typeof domCategories}`);

我得到的回报是反对.

通向domCategories指甲的唯一方法是通过page.evaluate？

domCategories是ElementHandle吗？

(async () => {

  // Launch the browser and open a new blank page
  // Configuration when using StealthPlugin 
  const browser = await puppeteer.launch({
    headless: false,
    // ignoreDefaultArgs: ["--enable-automation"],
  });
  // Disable Facebook notifications
  const context = await browser.defaultBrowserContext();
  await context.overridePermissions('https://www.facebook.com', ['geolocation', 'notifications']);

  const page = await browser.newPage();

  await page.goto('https://www.facebook.com/', {waitUntil: ['domcontentloaded', 'networkidle2']});

  await page.waitForSelector('input[id="email"]', {visible: true});
  await page.type(
    'input[id="email"]', "email",
  );
  await page.type(
    'input[id="pass"]', "pass",
  );

  let nav = page.waitForNavigation();
  await page.click( 'button[name="login"]' );
  await nav;

  await page.goto(
    'https://www.facebook.com/marketplace/create/item/' , {waitUntil: ['domcontentloaded', 'networkidle2']}
  );
  // click dropdown menu
  await page.click( 'div[class="xamitd3 x1pi30zi"]' );

  // Fetch the parent where all categories live (must be called after click on dropdown menu)
  let parentDomCategories = await page.$( 'div[class="x1iz1s3 x1rife3k x2ewi1q"]' );

  // Fetch all categories in a list
  let domCategories = await parentDomCategories.$$('div[data-visualcompletion="ignore-dynamic"]');


  // Facebook categories = 33 & totalCats = 33. We good to go.
  let totalCats = await page.evaluate(el => el.length, domCategories);
  console.log(`Total number of categories: ${totalCats}`);

  // Doesn't return anything
  let categoriesText = await page.evaluate(el => el.textContent, domCategories);
  console.log(`Text?: ${categoriesText}`);

  // object
  console.log(`typeof domCategories: ${typeof domCategories}`);


  console.log('Trying loop');
  try {
    // doesn't even enter loop
    for (let index=0; index < domCategories.lengthl; index++)
    {
      const element = domCategories[index];
      const text_ = await page.evaluate(element => element.textContent, element);
      console.log(text_);
    }
    console.log('\t\tSuccessed');
  }
  catch (error){
    console.log('Error in loop');
    console.log(error.message);
  }
  console.log('Finish loop');

  /* try {
    await page.evaluate(el => el.click(), domCategories);
  }
  catch (error){
    console.log('Error in clicking categories')
    console.log(error.message);
  }

  try {
    console.log('Error in indexing domCategories')
    console.log(domCategories[0]);
  }
  catch (error){
    console.log(error.message);
  } */


  await browser.close();


})();