puppeteer 填充基础表单
2024-10-19 04:30:23
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. :)' }
最新文章
- [C#] C# 知识回顾 - 学会使用异常
- Android Studio中JNI程序的单步调试和日志打印
- ZendStudio 解决svn导出项目乱码问题
- Asp.Net MVC中Controller与View之间传递的Model
- 自己yy的Splay
- 第一章:Javascript语言核心
- 关于BIOS的一点东西
- layerX offsetX pageX
- 谈论multistage text input(中国输入法)下一个UITextView内容长度的限制
- IDEA github的应用
- [Android]使用RecyclerView替代ListView(四:SeizeRecyclerView)
- 【转】Memory gates checking failed because the free memory***解决办法
- 机器学习周志华 pdf统计学习人工智能资料下载
- [原创] 分享我们自己搭建的微信小程序开发框架——wframe及设计思想详解
- sql server 复制表结构
- 如何提高 windows 的使用效率?--巧用运行命令
- C语言学习及应用笔记之五:C语言typedef关键字及其使用
- MySQL(五)
- 为 Html 5 和 CSS 3.0 而生——Modernizr的介绍和使用
- Python之杨辉三角算法实现
热门文章
- HEAD FILE
- Spring注解@Configuration和Java Config
- iOS app内打开safari完成google的OAuth2认证
- Vue实战笔记
- Improved dual-mode compressive tracking integrating balanced colour and texture features
- table切换jquery插件 jQuery插件写法模板 流程
- JAVA 动态代理原理和实现
- Codeforces 522D Closest Equals
- 【转】GB2312、GBK和UTF-8三种编码的简要说明
- 斯特林公式 ——Stirling公式(取N阶乘近似值)