Question

我有一个UI，其中有一个项目列表（通过复选框），当您选中一个复选框时，将启用另一个按钮（“批准”）。在您未勾选复选框之前，“批准”按钮将保持禁用状态。

在选中复选框之前，请先选择以下属性：

复选框A（未选择班级）：

<tr id="row1" class>
<input type="checkbox" name="selectedItem" value="d9d8eac0-fc23-413b-a417-1f3ceb30d847" id="id001">

批准按钮（具有禁用的属性）：

<div class="small thin skip js-actionButton button disabled" id="approve-button">
<a href="#" id="ext-id002"><em class="none">&nbsp;</em>
<span class="text" automation-id="Approve-button">Approve</span></a></div>

选中复选框后，以下属性：

复选框A（已将类别设置为选中）：

<tr id="row1" class=" selected">
<input type="checkbox" name="selectedItem" value="d9d8eac0-fc23-413b-a417-1f3ceb30d847" id="id001">

批准按钮（禁用的属性消失）：

<div class="small thin skip js-actionButton button" id="approve-button">
<a href="#" id="ext-id002"><em class="none">&nbsp;</em>
<span class="text" automation-id="Approve-button">Approve</span></a></div>

这在Selenium中有效，但是由于某些原因，我不能使它在Cypress上工作（“批准”按钮保持禁用状态）。我的代码如下：

cy.get('[type="checkbox"]').check(['d9d8eac0-fc23-413b-a417-1f3ceb30d847']);
cy.get('[automation-id="Approve-button"]').click();

使用柏树的屏幕截图：With Cypress

使用手册/硒的屏幕截图：Selenium or Manual

HTML：

<div class="bridge-lower">
  <div class="action-bar" style="padding-top:4px;" id="ext-gen114">
    <div class="small thin skip js-actionButton disabled button" id="ext-gen71">
    <a href="#" onclick="CompanyN.widget.Tables.bulkUpdateToJs(this, 'ItemPrint.PrintItemsFromForm(&quot;selectedItems&quot;, false, &quot;Bill&quot;);', 'print', false, true); return false;" id="ext-gen72">
    <em class="none">&nbsp;</em>
    <span class="text" automation-id="Print-button">Print</span>
    </a>
    </div>
    <div id="ItemPay-pay-container">
      <div class="small thin skip js-actionButton disabled button" id="ItemPay-bills-button">
      <a href="#" id="ext-gen73"><em class="none">&nbsp;</em><span class="text" automation-id="Approve-button">Approve</span></a>
      </div>
    </div>
  <table class="standard" id="ext-gen79">
    <thead>
    <tr>
    <td class="thin"><input type="checkbox" id="ext-gen115"></td>
    <td class=" ">
    <a href="/Search.aspx?ItemStatus=ItemSTATUS%2fAPPROVED&amp;graphSearch=False&amp;dateWithin=any&amp;pageSize=25&amp;orderby=ItemNumber&amp;direction=ASC">Ref
    </a>
    </td>
    <td class=" selected">
    <a href="/Search.aspx?ItemStatus=ItemSTATUS%2fAPPROVED&amp;graphSearch=False&amp;dateWithin=any&amp;pageSize=25&amp;orderby=ItemDate&amp;direction=ASC">Date
    </a>
    <span class="icons descend">&nbsp;</span>
    </td>
    <td class="date ">
    <a href="/Search.aspx?ItemStatus=ItemSTATUS%2fAPPROVED&amp;graphSearch=False&amp;dateWithin=any&amp;pageSize=25&amp;orderby=PayDate&amp;direction=ASC">Pay Date
    </a>
    </td>
    </tr>
    </thead>
    <tbody>
      <tr id="row1" class="">
        <td id="ext-gen81"><input type="checkbox" name="selectedItem" value="9cd1075a-f047-46ab-82fc-ea4bd6760b0c" id="ext-gen82">
        <input type="hidden" id="reference_9cd1075a-f047-46ab-82fc-ea4bd6760b0c" value="REFERENCE/PAY"></td>
        <td id="ext-gen83">Reference 2</td>
      </tr>
      <tr id="row2" class="">
        <td id="ext-gen98"><input type="checkbox" name="selectedItem" value="08e10c45-7777-4e3d-8045-f253413fd73e" id="ext-gen99">
        <input type="hidden" id="reference_08e10c45-7777-4e3d-8045-f253413fd73e" value="REFERENCE/PAY"></td>
        <td id="ext-gen100">Reference 3</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

如果复选框ID为unique，则可以在下面尝试并尝试验证/单击cypress的promise部分内的approve-button。

cy.get('#id001').click().then(()=>{
    cy.get('#approve-button').should('be.visible');
   // or if you want to click:
    cy.get('#approve-button').click();
})

或者，如果我从问题中了解到，复选框位于<tr>元素内，那么您可以尝试以下代码：

cy.get('#row1 > input[type="checkbox"]').check().then(()=>{
        cy.get('#approve-button').should('be.visible');
         // or if you want to click on the button
        cy.get('#approve-button').click();
})

//正如您所说的，您可以单击复选框，请尝试以下情况，并让我知道，如果此方法不起作用，请发布html

cy.get('[type="checkbox"]').check(['d9d8eac0-fc23-413b-a417-1f3ceb30d847']).then(($el)=>{
    cy.wrap($el).find('#approve-button').should('be.visible');
 })

///在您的html id中，该批准按钮是automation-id，当我添加到html中时，它没有被标识为html标签。您可以尝试以下操作吗，我已经添加了等待以显示批准按钮，以防万一并抓住以下ID #ItemPay-bills-button

cy.get('table > tbody > #row1 > td > input[type="checkbox"]').check().then(()=>{
                cy.wait(3000);
                cy.get('#ItemPay-bills-button').should('be.visible');
                    // or if you want to click on the button
                cy.get('#ItemPay-bills-button').click();
            })

Answer 2

在赛普拉斯v4.6.0及更高版本中，这通过绕过脚本文件的完整性检查来实现：

{
  "experimentalSourceRewriting": true
}

在您的cypress.json文件中添加以上内容

赛普拉斯：勾选复选框时，另一个按钮未启用

2 个答案: