Puppeteer 简单表单登录

Question

我的 Puppeteer 代码如下。我正在尝试登录我的 Broadbad 页面，该页面每天都会触发。我尝试了curl命令但它失败了。所以我现在正在尝试node js puppeteer。

登录.js

// example from github.com login page 
const puppeteer = require('puppeteer')
const screenshot = 'broadband.png';
(async () => {
  const browser = await puppeteer.launch({headless: true, ignoreHTTPSErrors: true})
  const page = await browser.newPage()
  await page.goto('https://server-ip-address/userportal/login.do?requesturi=http%3A%2F%2F1.254.254.254%2F%3F')
  await page.type('input[type="username"]', process.env.BB_USER)
  await page.type('input[type="password"]', process.env.BB_PWD)
  await page.click('[name="lesubmit"]')

  await page.waitForNavigation()
  await page.screenshot({ path: screenshot })
  browser.close()
  console.log('See screenshot: ' + screenshot)
})()

我运行如下

BB_USER='my_username' BB_PWD='my_password' node login.js

但它总是说

错误：找不到选择器的节点：input[type="username"]

这是我实际的宽带登录：

        <div class="formBox">
            <h2>Login to your account</h2>
            <form name="form1" action="">
                <font color="red" size="2">
                 </font>
                <label>Service Type</label>
                 <select name="type"><option value="1">Check Account Details</option>
                    <option value="2" selected="selected">Internet Access</option></select>             
                <label>User Name</label>
                <input type="text" name="username" value="">
                <label>Password</label>
                <input type="password" name="password" value=""><br />
                <input type="hidden" id="rememberme" name="rememberme"/>
                <div style="background:#f1f6f9; height:40px; margin:10px 0 0 0; padding:15px 0 0 0; border-top:1px solid #dedede;">
                    <a href='/userportal/forgotpasswd.do'>Forgot Password?</a>
                    <input type="button" name="lesubmit" id="ptype" class="btn-primary" value="Login" onclick="return savesettings();" />
                </div>
            </form>
            <div class="clear"></div>
        </div>
    </div>

老实说，我不知道在这种情况下如何选择选择器。我以为name="username"就足够了，但事实并非如此。你能提供一些提示吗？

Answer 1

欢迎来到顺丰！

目标'input[name="username"]'而不是'input[type="username"]'. 就像这样：

await page.type('input[name="username"]', process.env.BB_USER)

解释

在您的示例中，目标 HTML 是

<input type="text" name="username" value="">`

所以正确的选择器是：

input[name='username']

它name与目标 HTML 元素上存在的属性相匹配 ( <input name='username'>)

您的原始代码是input[type='username']，它将<input>与该属性匹配type='username'。然而，目标元素有type='text'，没有type='username'，所以选择器不匹配，Puppeteer 通知您它找不到匹配的元素：No node found for selector: input[type="username"]

用户名输入的原因type='text'是输入type属性决定浏览器呈现哪个表单控件（文本、数字、日期、复选框等）。由于用户名通常是文本，因此使用用户名字段type='text'