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. :)' }