在JS中選擇第二個提交按鈕

Question

我想使用TestCafe單擊表單中的提交按鈕。 這是按鈕的樣子：

<button type="submit" class="btn btn-lg btn-cart pull-left">
<span class="hidden-xs hidden-sm">
     <i class="fa fa-shopping-basket"></i>&nbsp;&nbsp;
</span>
     Add To Cart
</button>

此按鈕位於表單內：

<form name="product1" action="domain.tld/product" method="post" role="form">
</form>

在我的測試中，我想將產品添加到購物車：

test('add it', async t =>{
     await t
          .click(Selector('button[type="submit"]'))
});

問題是，在nabber中是另一個提交類型的按鈕。 如何使用此特定按鈕將我的產品添加到購物車？

Answer 1

您可以使用更具體的選擇器來使用此按鈕執行操作。 例如，如果此按鈕具有另一個提交按鈕沒有的類，則使用它來創建更具選擇性的選擇器。

讓我們考慮一個例子。 另一個提交按鈕沒有pull-left類。 使用以下選擇Selector('button[type="submit"].pull-left')選擇Selector('button[type="submit"].pull-left') Selector('.btn.pull-left')或Selector('.btn.pull-left') 。

如果這些按鈕之間沒有區別，您可以使用選擇器的方法nth(index) ： Selector('button[type="submit"]').nth(1) 。 在我們的文檔中查看更多

Answer 2

提交第二張表格：

$('form').eq(1).submit();

您無需找到提交按鈕並觸發單擊該按鈕。 相反，您可以在表單上調用.submit（）。