如何使用 puppeteer 循环遍历复选框？

Question

我有一个复选框列表，每次 puppeteer 运行测试时我都需要：

如果已经选择了一个框，则移至下一个框并选择它，如果选择了下一个，则移至下一个复选框，依此类推

if(await page.$eval(firstcheckbox, check=>check.checked =true)) { //检查该框是否被选中 wait page.waitForSelector(do some, ele=>elem.click())//如果复选框已被选中，则移动到第二行并选择一个未装饰的框

}否则如果{

await page.$eval(firstcheckbox, check=>check.checked =false)){ //如果复选框没有被勾选 wait page.$eval(clickcheckbox, elem=>elem.click);//勾选复选框

Answer 1

您可以在一个内部使用所有测试和更改

page.evaluate()

:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: false, defaultViewport: null });

const html = `
  <!doctype html>
  <html>
    <head><meta charset='UTF-8'><title>Test</title></head>
    <body>
      <input type="checkbox" id="checkbox1"><label for="checkbox1">checkbox1</label><br>
      <input type="checkbox" id="checkbox2" checked><label for="checkbox2">checkbox2</label><br>
      <input type="checkbox" id="checkbox3" checked><label for="checkbox3">checkbox3</label><br>
      <input type="checkbox" id="checkbox4"><label for="checkbox4">checkbox4</label><br>
    </body>
  </html>`;

try {
  const [page] = await browser.pages();

  await page.goto(`data:text/html,${html}`);

  await page.evaluate(() => {
    for (const checkbox of document.querySelectorAll('input')) {
      if (!checkbox.checked) checkbox.click();
    }
  });
  console.log('Done.');
} catch (err) { console.error(err); }

或者，如果您需要元素句柄上的循环，您可以尝试以下操作：

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: false, defaultViewport: null });

const html = `
  <!doctype html>
  <html>
    <head><meta charset='UTF-8'><title>Test</title></head>
    <body>
      <input type="checkbox" id="checkbox1"><label for="checkbox1">checkbox1</label><br>
      <input type="checkbox" id="checkbox2" checked><label for="checkbox2">checkbox2</label><br>
      <input type="checkbox" id="checkbox3" checked><label for="checkbox3">checkbox3</label><br>
      <input type="checkbox" id="checkbox4"><label for="checkbox4">checkbox4</label><br>
    </body>
  </html>`;

try {
  const [page] = await browser.pages();

  await page.goto(`data:text/html,${html}`);

  for (const checkbox of await page.$$('input')) {
    if (!await checkbox.evaluate(elem => elem.checked)) {
      await checkbox.click();
    }
  }
  console.log('Done.');
} catch (err) { console.error(err); }

Answer 2

// 使用 page.$eval 通过 id 与复选框交互

const isCheckboxSelected = await page.$eval('input[type="checkbox"][id="cricket"]', checkbox => checkbox.checked);

                    if (!isCheckboxSelected) {
                        await page.$eval('input[type="checkbox"][id="cricket"]', checkbox => checkbox.click());
                    }else{
                        conosle.log(`Checkbox is already selected, no need to click`);
                    }

如何使用 puppeteer 循环遍历复选框？

问题描述投票：0回答：2

2个回答

最新问题

如何使用 puppeteer 循环遍历复选框？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2