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. HDU 1049(蠕虫爬井 **)

    题意是一只虫子在深度为 n 的井中,每分钟向上爬 u 单位,下一分钟会下滑 d 单位,问几分钟能爬出井. 本人是直接模拟的,这篇博客的分析比较好一些,应当学习这种分析问题的思路:http://www. ...

  2. input全选和取消全选

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  3. HDU - 1013

    wa了两遍: (1)没有弄清楚输入数据的范围,实际上是字符串输入,数字很大. (2)此题太水,没有标数据范围. #include<iostream> #include<cstdio& ...

  4. 【原创】Java基础之Session机制

    Session机制 JSESSIONID是Session的标识,当客户端请求服务器端的时候,服务器端会检查是否已经给这个客户端创建过Session,也就是看客户端的请求中的header是否有Cooki ...

  5. 解构声明(Destructuring Declarations)

    解构声明的概念和作用 把一个对象成员解构(destructure)成多个变量,称为解构声明(destructuring declaration). component1(),component2()等 ...

  6. H - 栀子花开

    这是一个栀子花开的季节,也是一个离别的季节,四年一千多个日日夜夜,那校园的角角落落,留下了我们沉思的身影:那上百次的成绩排名表,印证了我们深深浅浅不断进步的轨迹,但是这些进步都离不开老师的谆谆教诲. ...

  7. 【自然语言处理】LDA

    飞机票 飞机票 步骤: 1. 离线求的模型 2. 用模型对新文本预测topic,取topic概率带到阈值(例如0.2)且topN个topic,例如doc1 :topic1:0.5, topic2:0. ...

  8. pl/sql学习(5): 触发器trigger/事务和锁

    (一)触发器简单介绍 触发器是由数据库的特定时间来触发的, 特定事件主要包括以下几种类型: (1)DML: insert, update,delete 增删改 (2)DDL: create, alte ...

  9. 基于Python+Django重定向的例子

    Django源码, 这里HttpResponseRedirect和HttpResponsePermanentRedirect没有太大差别,前者是返回302临时重定向,后者返回301永久重定向 clas ...

  10. Gerapy框架的使用

    Gerapy 基于Scrapy,Scrapyd,Scrapyd-Client,Scrapyd-API,Django和Vue.js的分布式爬虫管理框架. 支持 Gerapy是在Python 3.x上开发 ...