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. :)' }

puppeteer 填充基础表单的更多相关文章

  1. Bootstrap系列 -- 11. 基础表单

    表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...

  2. Chrome 自动填充的表单是淡黄色的背景

    Chrome 自动填充的表单是淡黄色的背景解决方案; input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; - ...

  3. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  4. Java 创建、填充PDF表单域

    表单域,可以按用途分为多种不同的类型,常见的有文本框.多行文本框.密码框.隐藏域.复选框.单选框和下拉选择框等,目的是用于采集用户的输入或选择的数据.下面的示例中,将分享通过Java编程在PDF中添加 ...

  5. 结合Bootbox将后台JSON数据填充Form表单

    本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...

  6. JavaScript | 基础表单验证（纯Js）

    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...

  7. bootstrap 基础表单

    表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑   LESS版本:对应源文 ...

  8. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  9. JavaScript：基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

随机推荐

  1. 使用 https://git.io 缩短 a GitHub.com URL.

    curl -i https://git.io -F 'url=https://develon2015.github.io' -F 'code=develon' 现在点击 http://git.io/d ...

  2. File Upload XSS

    A file upload is a great opportunity to XSS an application. User restricted area with an uploaded pr ...

  3. FTP主动及被动模式效果图

  4. C++ 在类里面使用多线程技术

    参考链接:   https://blog.csdn.net/jmh1996/article/details/72235232 说明:    C++的每个成员函数都会有一定转化, 而static 则不会 ...

  5. LeakCanary监测内存泄漏的原理

    监测机制利用了Java的WeakReference和ReferenceQueue,通过将Activity包装到WeakReference中,被WeakReference包装过的Activity对象如果 ...

  6. 蒸米一步一步ROP X64学习笔记

    原文地址https://segmentfault.com/a/1190000007406442,源代码地址https://github.com/zhengmin1989/ROP_STEP_BY_STE ...

  7. Linux centos系统安装后的基本配置,Linux命令

    一.centos系统安装后的基本配置 .常用软件安装 yum install -y bash-completion vim lrzsz wget expect net-tools nc nmap tr ...

  8. 【原创】大叔问题定位分享（16）spark写数据到hive外部表报错ClassCastException: org.apache.hadoop.hive.hbase.HiveHBaseTableOutputFormat cannot be cast to org.apache.hadoop.hive.ql.io.HiveOutputFormat

    spark 2.1.1 spark在写数据到hive外部表(底层数据在hbase中)时会报错 Caused by: java.lang.ClassCastException: org.apache.h ...

  9. RIDE的下载及安装

    1.本机配置 windows8.1 python3.6.5,已配置环境变量 2.安装RIDE前需要安装的依赖包(使用pip就可以直接安装) 首先必须有robotframework 例如:pip ins ...

  10. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...