你如何使用 puppeteer 遍歷復選框？

Question

我有一個復選框列表，每次 puppeteer 運行測試時我需要：

如果已經選擇了一個框，則移動到下一個框和 select 它，如果選擇了下一個框，則移動到下一個復選框，依此類推

if(await page.$eval(firstcheckbox, check=>check.checked =true)) { //檢查框是否被選中 await page.waitForSelector(do something, ele=>elem.click())//如果復選框已被選中，移動到第二行和 select 一個未選中的框

}否則如果{

await page.$eval(firstcheckbox, check=>check.checked =false)){ //如果復選框沒有勾選 await 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); }

你如何使用 puppeteer 遍歷復選框？

問題描述

1 個解決方案

解決方案1
2 2021-04-28 22:22:42

你如何使用 puppeteer 遍歷復選框？

問題描述

1 個解決方案

解決方案1 2 2021-04-28 22:22:42

解決方案1
2 2021-04-28 22:22:42