puppeteer 填充基礎表單
阿新 • • 發佈：2019-01-24
page ctype htm select click set for inpu http
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 填充基礎表單