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. 第五节：WebApi的三大过滤器

    一. 基本说明  1. 简介: WebApi下的过滤器和MVC下的过滤器有一些区别,首先我们要注意的是通常建WebApi项目时,会自动把MVC的程序集也引入进来,所以我们在使用WebApi下的过滤器的 ...

  2. JAVA第一周学习

    新学期伊始,六门专业课,课课重要,无法抉择重心,但日子还是要过的,而且要精细的过,不能得过且过 JAVA第一周任务 一:学习第一章视频 二:使用JDB调试JAVA 三:输入调试教材上代码,并把代码上传 ...

  3. HP Z620 Windows 7 系统安装（含磁盘阵列）

    由于HP Z620 做了Raid 5磁盘阵列,导致安装系统时,系统加载不了磁盘的驱动,无法将系统安装到硬盘上,正确的方法是:下载SATA驱动,在需要加载驱动的地方,利用另一个U盘,“浏览”解压好的驱动 ...

  4. 五十、进程间通信——System V IPC 之共享内存

    50.1 共享内存 50.1.1 共享内存的概念 共享内存区域是被多个进程共享的一部分物理内存 多个进程都可把该共享内存映射到自己的虚拟内存空间.所有用户空间的进程若要操作共享内存,都要将其映射到自己 ...

  5. 一、Kubernetes系列之介绍篇

      •Kubernetes介绍 1.背景介绍 云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境 2.什 ...

  6. c#管理文件系统

    using System; using System.Collections.Generic; using System.IO; using static System.Console; /*Syst ...

  7. word20161226

    1. condensed 英[kən'denst]美[kənˈdɛnst]v. (使) 变稠或变浓,浓缩( condense的过去式和过去分词 ); (使) 凝结; 简说,摘要,简述;[例句]The ...

  8. Java 线程安全LocalTime 和LocaldateTime 新的Date和Time类 -JDK8新时间类的简单使用

    不可变类且线程安全 LocalDate .java.time.LocalTime 和LocaldateTime  新的Date和Time类 DateTimeFormatter ==https://ww ...

  9. C#VS2017添加ReportViewer控件

    安装完vs2017之后我们进行添加Report Viewer控件: 1. 点击Tools -> Extensions and Updates... 2. 在新窗口搜索栏中输入rdlc后搜索,结果 ...

  10. JAVA 数组元素的反转

    package Code411;/*数组元素的反转本来[1,2,3,4]反转后[4,3,2,1]1.对称位置的元素交换2.对称位子需要两个索引3.int temp =a:a=b;b=temp;4.什么 ...