puppeteer 填充基础表单

main.js

const pptr = require("puppeteer");
const gotoUrl = "http://127.0.0.1:5500/index.html";

(async () => {
  const browser = await pptr.launch({
    headless: false,
    slowMo: 250,
  });
  const page = await browser.newPage();

  page.on("console", msg => {
    console.log(msg.text());
  });
  await page.goto(gotoUrl);

  // 文本框
  await page.type("#username", "ajanuw", { delay: 100 });
  await page.type("#password", "@asd1234", { delay: 100 });
  const usernameValue = await page.$eval("#username", el => el.value);
  const passwordValue = await page.$eval("#password", el => el.value);

  // 单选表单
  await page.click("input[type=radio][name=gender]#female");
  const genderValue = await page.$$eval(
    "input[type='radio'][name='gender']",
    els => {
      return Array.from(els).filter(el => el.checked)[0].value;
    }
  );

  // 单选select 第二个参数为option的value
  await page.select("select#address", "1");
  const addressValue = await page.$eval("select#address", el => el.value);

  // 多选 select
  await page.select("select[name=multiple]", "1", "3");
  const multipleValues = await page.$eval(
    "select[name=multiple]",
    el => el.value
  );

  // 多选表单
  await page.click("input[type=checkbox][name=photography]");
  await page.click("input[type=checkbox][name=reading]");
  const hobby = await page.$(".hobby");
  const hobbyValues = await hobby.$$eval("input[type=checkbox]", els => {
    els = Array.from(els);
    return els.filter(el => el.checked).map(el => el.value);
  });

  // 文件
  // await page.click("input[type=file][name=avatar]#avatar");
  const fileEl = await page.$("input[type=file][name=avatar]#avatar");
  fileEl.uploadFile("./a.jpg");
  const avatarValue = await page.$eval(
    "input[type=file][name=avatar]#avatar",
    e => {
      // error: e.target.files
      return {
        value: e.value,
        name: e.files[0].name,
        size: e.files[0].size,
      };
    }
  );

  // textarea
  await page.type("textarea[name=introduction]", "0 error, 0 warning. :)", {
    delay: 10,
  });
  const selfIntroductionValue = await page.$eval(
    "textarea[name=introduction]",
    e => e.value
  );
  // await page.click(".submit");

  console.log({
    usernameValue,
    passwordValue,
    genderValue,
    multipleValues,
    addressValue,
    hobbyValues,
    avatarValue,
    selfIntroductionValue,
  });

  await browser.close();
})();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=2.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>puppeteer</title>
  </head>
  <body>
    <input type="text" id="username" /> <br />
    <input type="text" id="password" type="password" /> <br />
    <div>
      <input type="radio" name="gender" id="male" value="1" checked />
      <label for="male">男</label>

      <input type="radio" name="gender" id="female" value="2" />
      <label for="female">女</label>
    </div>
    <div>
      <h3>地址</h3>
      <select name="address" id="address">
        <option value="0">请选择...</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">成都</option>
      </select>
    </div>
    <div>
      <h3>多选</h3>
      <select name="multiple" id="multiple" multiple>
        <option value="0">请选择...</option>
        <option value="1">java</option>
        <option value="2">javascript</option>
        <option value="3">node</option>
      </select>
    </div>
    <div class="hobby">
      <h3>爱好</h3>
      足球<input type="checkbox" name="football" value="足球" checked />|
      篮球<input type="checkbox" name="basketball" value="蓝球" />| 摄影<input
        type="checkbox"
        name="photography"
        value="摄影"
      />| 看书<input type="checkbox" name="reading" value="看书" />|
    </div>
    <div>
      <h3>头像</h3>
      <input type="file" name="avatar" id="avatar" />
    </div>
    <div>
      <h3>自我介绍</h3>
      <textarea name="introduction" id="" cols="30" rows="10"></textarea>
    </div>
    <br />
    <button class="submit">提交</button>
    <script>
      const qs = s => document.querySelector(s);

      qs(".submit").addEventListener("click", () => {
        console.log(qs("#username").value);
        console.log(qs("#password").value);
        const radios = Array.from(
          document.querySelectorAll("input[type=radio][name=gender]")
        );
        const checked = radios.filter(el => el.checked)[0];
        console.log(checked.value);
        console.log(qs("#address").value);
      });

      qs("#avatar").addEventListener("change", e => {
        const files = qs("#avatar").files;
        // console.log(files);
        // console.log(qs("#avatar").value);
      });
    </script>
  </body>
</html>

run

$ node main.js
Live reload enabled.
Failed to load resource: the server responded with a status of 404 (Not Found)
{ usernameValue: 'ajanuw',
  passwordValue: '@asd1234',
  genderValue: '2',
  multipleValues: '1',
  addressValue: '1',
  hobbyValues: [ '足球', '摄影', '看书' ],
  avatarValue: { value: 'C:\\fakepath\\a.jpg', name: 'a.jpg', size: 8015 },
  selfIntroductionValue: '0 error, 0 warning. :)' }