Puppeteer.NET无法自动填充登录字段问题求助

问题背景 #

刚接触Puppeteer.NET，无法实现登录页面的用户名、密码字段自动填充及登录按钮点击。最终需求是完成登录操作、跳转至指定页面并获取该页面的HTML内容，同时想了解获取HTML文本内容的简便方法。

目标页面HTML结构 #

目标登录页面的HTML结构如下：

<div class="main-wrapper">
<div class="row">
   <div class="column section col-md-8">
    <div class="loginForm">
        <img src="images/logo.svg" width="300">
        <br /><br /><br />
        <div style="color: #454550; font-family: 'Neuzeit Grotesk'; font-size: 16px; ">
            Welcome back
        </div>
            <br />
        <form action="/login?app=LM&var=au" method="POST" name="login-form" id="login-form">
            
            <input type="hidden" name="_csrf" value="BQ2YoR3d-5P__6b5HfqlVOjv8YgTypKV92XA" />
            
            <div class="form-group text-center">
              <input type="text" name="username" id="login-form-username" placeholder="Username" class="form-control" required value="">
            </div>
            <div class="form-group text-center">
              <input type="password" name="password" id="login-form-password" placeholder="Password" class="form-control" required>
            </div>
            <div class="text-center">
              <button type="submit" class="btn btn-danger btn-lg btn-block">Login</button>
            </div>
        </form>
        <div style="color: #808083; margin-top: 30px; font-family: 'Roboto2';">
            <a href="https:">Trouble logging in?</a>
            <img src="images/grey_line.svg" width="300">
            <a href="https://">Sign up</a>
        </div>
    </div>
    <div style="text-align: center; width:400px;">
        <img src="images/logo.svg" width="300">
    </div>
  </div>  
    <div class="column section col-md-4">
        <iframe width="100%" height="100%" frameBorder="0" src="https://"></iframe>
    </div>
</div>
</div>

我编写的代码 #

var extra = new PuppeteerExtra();
var stealth = new StealthPlugin();

LaunchOptions options = new LaunchOptions
{
    Headless = false,
    ExecutablePath = "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
};

Browser browser = extra.Use(stealth).LaunchAsync(options).Result;
string content = null;
using (Page page = browser.NewPageAsync().Result)
{
    // do login screen
    page.GoToAsync(url);
    page.WaitForNavigationAsync();
    page.WaitForSelectorAsync("username");
    page.FocusAsync("username");
    page.Keyboard.TypeAsync(login);
    page.WaitForSelectorAsync("password");
    page.FocusAsync("password");
    page.Keyboard.TypeAsync(password);
    page.ClickAsync("submit");
    page.WaitForNavigationAsync();
    content = page.GetContentAsync().Result;
}

尝试过将选择器改为#username等多种形式，但始终无法填充字段。

解决方案 #

1. 修正选择器错误 #

从HTML结构可以明确元素的正确定位方式：

• 用户名输入框ID为login-form-username，正确选择器：#login-form-username
• 密码输入框ID为login-form-password，正确选择器：#login-form-password
• 登录按钮是type="submit"的按钮，可用选择器：button[type='submit'] 或 .btn-danger（类选择器）

2. 修复异步操作逻辑 #

原代码直接使用.Result阻塞调用异步方法，容易导致元素未加载完成就执行后续操作，建议改用await关键字（需将方法标记为异步），确保操作顺序和等待逻辑正确。

3. 优化后的完整代码 #

var extra = new PuppeteerExtra();
var stealth = new StealthPlugin();

LaunchOptions options = new LaunchOptions
{
    Headless = false,
    ExecutablePath = @"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
};

// 方法需标记为async
Browser browser = await extra.Use(stealth).LaunchAsync(options);
string content = null;
using (Page page = await browser.NewPageAsync())
{
    // 等待页面完全加载
    await page.GoToAsync(url, new NavigationOptions { WaitUntil = WaitUntilNavigation.Networkidle2 });
    
    // 填充用户名
    await page.WaitForSelectorAsync("#login-form-username");
    await page.TypeAsync("#login-form-username", login);
    
    // 填充密码
    await page.WaitForSelectorAsync("#login-form-password");
    await page.TypeAsync("#login-form-password", password);
    
    // 点击登录并等待跳转完成
    await page.ClickAsync("button[type='submit']");
    await page.WaitForNavigationAsync(new NavigationOptions { WaitUntil = WaitUntilNavigation.Networkidle2 });
    
    // 获取页面完整HTML内容
    content = await page.GetContentAsync();
}

4. 获取HTML/文本内容的简便方法 #

• 获取完整HTML：使用page.GetContentAsync()即可，这是Puppeteer.NET提供的标准方法
• 获取纯文本内容：使用page.GetTextContentAsync()，可直接提取页面的所有可见文本

内容的提问来源于stack exchange，提问作者tony