puppeteer：根据外部函数中的文本将下拉选项设置为选中

Question

因为我没有找到 puppeteer 的本机函数来根据文本而不是值来设置下拉选项，所以我正在尝试自己编写它

async function setSelectName(page, selector, valText) {
   return await page.evaluate((data) => {
       console.log(JSON.stringify(data));

       let options = document.querySelectorAll(data.selector);
       console.log(JSON.stringify(options));

       let optionCount = options.length;

       for (let i = 0; i < optionCount; ++i) {
           if (options[i].text === data.valText) {
               console.log('match');
                document.querySelector(data.selector).value = options[i].value;
           }
       }

   }, {selector, valText})
}

不幸的是，它不起作用，当我尝试在控制台中显示选定的选项时，它显示我：

{"0":{"0":{},"1":{},"2":{},"3":{}}}

是否了解会发生什么以及如何去做？

Answer 1

这不是最直观的工作流程。这是一个抓取页面以获取 select 节点的 name 属性的工作故障示例。

https://glitch.com/edit/#!/puppeteer-queryselector-eval-example

server.js:

const express = require('express'),
    app = express(),
    puppeteer = require('puppeteer');

app.use(express.static('public'));

app.get("/", async (request, response) => {
  try {
    const browser = await puppeteer.launch({
      args: ['--no-sandbox']
    });
    const page = await browser.newPage();
    await page.goto('https://sleet-dagger.glitch.me/cars.html');
    const selector = 'select';
    const name = await page.$eval(selector, node => node.name);
    response.send(name);
    await browser.close();
  } catch (error) {
    response.status(503).end(error.message);
  }
});

var listener = app.listen(process.env.PORT, function () {
  console.log('Your app is listening on port ' + listener.address().port);
});

cars.html:

<!DOCTYPE html>
<html>
<body>

<select name="bingo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

关键是const name = await page.$eval(selector, node => node.name)，它在页面上运行document.querySelector(selector)，然后将节点传递给第二个参数中的回调函数。另见：

我认为这应该足以让您继续前进。祝你好运！

Answer 2

您实际上并没有选择文本，请尝试以下操作

let options = Array.from(document.querySelectorAll(data.selector)).map(option => option.innerText)

Answer 3

async function selectOptionByText(page, seletctId, textWanted) {

   const optionWaned = (await page.$x(`//*[@id = "${seletctId}"]/option[text() = "${textWanted}"]`))[0];

   const opionValue = await (await optionWaned .getProperty('value')).jsonValue();

   await page.select(`#${seletctId}`', opionValue );
}

puppeteer：根据外部函数中的文本将下拉选项设置为选中

puppeteer : set a dropdown option as selected based on text in an external function

automated-tests

node.js

google-chrome-devtools

puppeteer