Puppeteer 两个表单点击第二个提交按钮答案

【问题标题】：Puppeteer two forms click the second submit buttonPuppeteer 两个表单点击第二个提交按钮
【发布时间】：2018-07-04 21:08:25
【问题描述】：

我正在使用 puppeteer 完成一个简单的网络表单，但是该页面有两个表单，每个表单都有一个提交按钮：

<input type="image" img="" src="../graphics/button_search.gif" width="121" height="39" border="0">

所以基本上是以下情况：

<FORM NAME=form1 METHOD=POST ACTION="https://URI1">
    <FONT SIZE=2 FACE="verdana, arial, helvetica">
    <B>Search by E-mail Address</B> (recommended):</FONT>
    <TABLE WIDTH=574 CELLPADDING=3 CELLSPACING=2 BORDER=0>
    <TR>
        <TD WIDTH=50% BGCOLOR="#ffffcc" VALIGN=TOP><FONT SIZE=2 FACE="verdana, arial, helvetica">
        <B>Enter the E-mail Address:</B><BR></FONT> 
        <INPUT Name=vs_email value="" size=25></FONT></TD> 
    </TR>	
    </TABLE>
<TR>
     <TD ALIGN=RIGHT><INPUT type="image" IMG SRC="button_search_green.gif" WIDTH=121 HEIGHT=39 border=0 ></TD> 
</TR>
</FORM>

<FORM NAME=form2 METHOD=POST ACTION="https://URI2">
    <FONT SIZE=2 FACE="verdana, arial, helvetica">
    <B>Search by name</B> (not recommended):</FONT>
    <TABLE WIDTH=574 CELLPADDING=3 CELLSPACING=2 BORDER=0>
    <TR>
        <TD WIDTH=50% BGCOLOR="#ffffcc" VALIGN=TOP><FONT SIZE=2 FACE="verdana, arial, helvetica">
        <B>Enter the name:</B><BR></FONT> 
        <INPUT Name=vs_name value="" size=25></FONT></TD> 
    </TR>	
    </TABLE>
<TR>
     <TD ALIGN=RIGHT><INPUT type="image" IMG SRC="button_search_green.gif" WIDTH=121 HEIGHT=39 border=0 ></TD> 
</TR>
</FORM>

现在我如何确保 puppeteer 点击第二个搜索按钮。如果我使用以下代码，它会按第一个：

    const button = await page.$('input[type="image"]');
    await button.click();

有什么建议我可以对输入 type="image" 进行计数并选择第二个吗？

谢谢

马丁

【问题讨论】：

page.$('form[name=form2] input[type=image]')?
优秀的克里斯，谢谢！

标签： javascript html puppeteer

【解决方案1】：

您只需稍微扩展您的 CSS 选择器以使其独一无二。您需要做的是使用以下选择器：

const button = await page.$('form[name="form2"] > input[type="image"]');
await button.click();

这应该可以解决问题！

【讨论】：