有什么方法可以只检查所需的复选框吗？

Question

我只尝试 select 有限的物品，其中 DOM 如下：

<div class="checkbox-wrap">
    <div class="wb-checkbox">
    <input id="Account" name="Account" type="checkbox" value="true"><input name="Account" type="hidden" value="false">
    <label for="Account">Account</label>
    <span class="check-mark"></span>
    </div>
    </div>

对于 select 所有项目，我使用了以下代码：

it('Select all items', ()=>{
    cy.get('#WallTransportationModeId').select('Wallbee-Road')
    cy.get(':nth-child(n) > .checkbox-wrap > .wb-checkbox > label').click({ multiple: true, force: true })
    cy.get('#btn-save-transportation-layout-setup').click()
  
})

所有项目也 selected。但现在我只需要 select 10 个第一项。

Answer 1

您可以在选择（抓取多个元素）和操作之间应用过滤方法

 cy.get(<selector-that-selects-multiple-elements>)
   .filter((index, element) => index < 10)              // first 10 elements only
   .click({ multiple: true })

您可以在过滤函数中使用任何类型的 javascript 表达式，

.filter((_, element) => element.innerText.startsWith('A')) // labels beginning with "A"

选择随机元素

const totalCheckboxes = 20;
const numberToSelect = 10;

const randomIndexes = Array.from(
  {length: totalCheckboxes},                         // empty array 
  () => Math.floor(Math.random() * totalCheckboxes)  // map to random indexes
).slice(0, numberToSelect)                           // take as many as wanted

cy.get(<selector-that-selects-multiple-elements>)
   .filter((index) => randomIndexes.includes(index)) // apply randomness

你可以用这个重复一些，这可能不是你想要的。查看“非重复随机数”的 SO 并相应地调整此代码。

有什么方法可以只检查所需的复选框吗？

Is there any way to check only the required checkboxes?

checkbox

cypress