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.定义一个 ...
随机推荐
- wc 命令详解
1.wc 命令作用 统计文件里面有多少单词,多少行,多少字符. 2.wc 语法 wc [-lwm] 选项与参数:-l :仅列出行:-w :仅列出多少字(英文单字):-m :多少字符: 3.例子 使用w ...
- Leetcode#13. Roman to Integer（罗马数字转整数）
题目描述 罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即 ...
- vue构造函数（根实例化时和组件实例对象选项）参数：选项详解
实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...
- liblensfun 在 mingw 上编译时遇到的奇怪问题
ffmpeg 2018.07.15 增加 lensfun 滤镜; 这个滤镜需要 liblensfun 库; Website: http://lensfun.sourceforge.net/ Sourc ...
- php base64图片保存
function base64_image_content($base64_image_content,$path){ //匹配出图片的格式 if (preg_match('/^(data:\s*im ...
- 进入django
web应用,c/s,b/s架构 c/s: 客户端 服务端 b/s: 浏览器 服务器 HTTP协议: 超文本传输协议 四大特性: 1.基于TCP/IP作用在应用层之上的协议 2.基于请求响应 3.无状态 ...
- 饮冰三年-人工智能-Python-21 Python数据库MySql
一:下载与安装 1:下载地址:https://dev.mysql.com/downloads/mysql/ 2:安装MySql 打开下载文件解压到指定文件目录.(我这里解压目录为D:\MySql\my ...
- python 2.7 数据结构: 基础面试总结
python中基础的数据类型包括: 1 Number(数字) 2 String(字符串) 3 List(列表) 4 Tuple(元组) 5 set(集合) 6 Pictionary(字典) 按照可变数 ...
- xilinx和altera的fpga的不同之处！----如果不知道，你将为之付出代价！ --转载
本人从2004年接触fpga开始,至今已经8年了.开发过altera的flex系列和cyclone3系列:开发过xilinx的vii和v5系列.下面谈谈本人对二者的一些不同,以便引起开发者对一些细节上 ...
- [慢更]Sublime Text 快捷键及使用过的插件
整理自己常用的sublime text命令和插件 1.pretty json Json 快速格式化,免去url访问json站点的烦恼. 摘自:https://segmentfault.com/a/11 ...