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. :)' }
puppeteer 填充基础表单的更多相关文章
- Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
- Chrome 自动填充的表单是淡黄色的背景
Chrome 自动填充的表单是淡黄色的背景解决方案; input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; - ...
- bootstrap 基础表单 内联表单 横向表单
bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...
- Java 创建、填充PDF表单域
表单域,可以按用途分为多种不同的类型,常见的有文本框.多行文本框.密码框.隐藏域.复选框.单选框和下拉选择框等,目的是用于采集用户的输入或选择的数据.下面的示例中,将分享通过Java编程在PDF中添加 ...
- 结合Bootbox将后台JSON数据填充Form表单
本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...
- JavaScript | 基础表单验证（纯Js）
———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...
- bootstrap 基础表单
表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑ LESS版本:对应源文 ...
- js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
- JavaScript：基础表单验证
在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...
随机推荐
- java poi 操作ppt
java poi 操作ppt 可以参考: https://www.w3cschool.cn/apache_poi_ppt/apache_poi_ppt_installation.html http:/ ...
- cookie、LocalStorage、sessionStorage三者区别以及使用方式
cookie用来保存客户浏览器请求服务器页面的请求信息 HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储) WebStor ...
- 【转载】Jenkins安装以及邮件配置
转载:http://www.nnzhp.cn/archives/590 Jenkins介绍 Jenkins是一个java开发的.开源的.非常好用持续集成的工具,它能帮我们实现自动化部署环境.测试.打包 ...
- Notepad++崩溃后文件内容找不到问题
也许是因为Ctrl + s 摁太多太频繁,一不小心Notepad++崩溃了 重启后发现原来的文件还在,但是文件内容全部都被清空了 我没有手动备份这个文件, 如何找回??? 点击设置,首选项,里面有个备 ...
- 20175204 张湲祯 2018-2019-2《Java程序设计》第三周学习总结
20175204 张湲祯 2018-2019-2<Java程序设计>第三周学习总结 教材学习内容总结 -第四章类与对象要点: -面向对象语言三个特性:封装性:继承:多态: -类:1.类是组 ...
- 3D Slicer中文教程（二）—软件功能界面介绍
1.界面介绍 2.菜单及工具栏介绍 (1)菜单 File-文件菜单 文件菜单包含用于加载MRML场景的选项,用于从互联网下载样本数据集或各种类型的各个数据集.此处还提供了保存场景和数据的选项. Edi ...
- Win10上默认VS 2017以管理员身份运行
Win10上的UAC虽然是个好东西,但是对于使用开发工作的技术人员来说有时候也挺麻烦.这里有一个让VS2017无论如何都以管理员身份运行的方法. 1.进入VS2017的安装目录:..\Microsof ...
- 022_word中如何正确的使用正则表达式进行搜索
一.word中正则表达式详解 https://www3.ntu.edu.sg/home/ehchua/programming/howto/PowerUser_MSOffice.html 实战举例: ( ...
- 服务器资源迁移到aliyun对象存储及oss的权限管理配置
chinasoft-download增值服务的迁移和部署 需求: 增值服务网站需要从网宿迁移到阿里云,以前的增值服务历史软件存放在服务器中需要迁移到阿里云的oss中存放 需要改造程序给程序添加一个os ...
- 再见，Python！你好，Go语言
Go 语言诞生于谷歌,由计算机领域的三位宗师级大牛 Rob Pike.Ken Thompson 和 Robert Griesemer 写成.由于出身名门,Go 在诞生之初就吸引了大批开发者的关注.诞生 ...