无法单击具有特定属性的按钮

Question

我正在使用puppeteer-sharp 获取由 AJAX 从网页加载的内容。我需要提交一个具有以下结构的表单：

<form action="" method="post" _lpchecked="1">
    <div class="item">
        <div class="title"><label for="login-username1">Username</label></div>
        <div>
            <input class="int-text" type="text" id="login-username1" name="login-username" value="" size="25" autocomplete="off" >
            <span class="required" title="required item">*</span>
        </div>
    </div>
    <div class="item">
        <div class="title"><label for="login-password1">Password</label></div>
        <div>
            <input class="int-text" type="password" id="login-password1" name="login-password" size="25" autocomplete="off">
            <span class="required" title="required item">*</span>
        </div>
    </div>
    <div class="item">
        <button type="submit" name="login-submit" class="inline-btn-2"><span><span>Login</span></span></button>
    </div>
</form>

首先，我使用以下代码填写了两个可用的输入：login-username1 和 login-password1：

using (Page page = await Browser.NewPageAsync())
{
    await page.GoToAsync("https://www.oddsportal.com/login/");
    await page.TypeAsync("#login-username1", "sfarzoso");
    await page.TypeAsync("#login-password1", "password");

    await page.ClickAsync("name=login-submit");
    await page.WaitForNavigationAsync();
    var c = await page.GetContentAsync();
}

问题是按钮没有id，而只有name 属性，所以我的代码返回：

PuppeteerSharp.EvaluationFailedException：“评估失败：DOMException：无法在“文档”上执行“querySelector”：“name=login-submit”不是有效的选择器。 在 puppeteer_evaluation_script:1:33'

这个错误发生在

await page.ClickAsync("name=login-submit");

方法ClickAsync 需要一个选择器，而按钮只有一个唯一的name，但似乎我无法点击该按钮。

注意：Browser 变量实例化如下：

Browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = true,
    ExecutablePath = Environment.GetEnvironmentVariable("CHROME_PATH"),
});

Answer 1

如果您使用CSS selector 作为定位器，那么您没有提供正确的定位器。

您可以尝试以下应该可以工作的 CSS 选择器。

使用Type 属性

await page.ClickAsync("button[type='submit']");

或使用name 属性

 await page.ClickAsync("button[name='login-submit']");

或使用class 属性

await page.ClickAsync("button.inline-btn-2");

或使用multiple attribute，例如

await page.ClickAsync("button[type='submit'][name='login-submit']");

Answer 2

"name=login-submit" 不是有效的CSS Selector。这应该适合你：

await page.ClickAsync("button[name='login-submit']");