javascript - Puppeteer 两个表单点击第二个提交按钮

Question

我正在使用 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"进行计数并选择第二个吗？

谢谢

马丁

Answer 1

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

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

这应该可以解决问题!