Cypress - 复选框

Cypress - 与复选框交互

Cypress 提供了直观的命令 .check() 和 .uncheck()，用于与复选框元素交互。HTML 中的复选框通常由 <input type="checkbox"> 标签表示。

核心复选框命令

以下是使用这些命令的方法：

勾选单个复选框（例如，通过其 ID）：

cy.get('#myCheckbox').check();

取消勾选单个复选框：

cy.get('#myCheckbox').uncheck();

勾选所有匹配选择器的复选框：

cy.get('input[type="checkbox"]').check();

根据其 value 属性勾选复选框：

cy.get('input[type="checkbox"]').check('valueToSelect');

根据其 value 属性勾选多个复选框：

cy.get('input[type="checkbox"]').check(['value1', 'value2']);

根据值取消勾选复选框（类似于勾选）：

cy.get('input[type="checkbox"]').uncheck('valueToDeselect');
cy.get('input[type="checkbox"]').uncheck(['value1', 'value2']);

使用选项，例如强制执行动作即使元素隐藏：

cy.get('.hidden-checkbox').check({ force: true });

.check() 和 .uncheck() 命令都必须链式调用在生成 DOM 元素(s) 的命令之后。你可以（并且应该）在这些命令之后链式调用断言，如 .should('be.checked') 或 .should('not.be.checked')。

常用命令选项

有几个选项可以修改 .check() 和 .uncheck() 的行为：

log (boolean, default: true): 是否在 Cypress 命令日志中显示该命令。
timeout (number, default: defaultCommandTimeout - 4000ms): 命令解析前等待的最长时间，超过则失败。
force (boolean, default: false): 强制执行操作，绕过可操作性检查（例如，元素是否被覆盖或禁用）。请谨慎使用。
scrollBehavior (‘center’ | ‘top’ | ‘bottom’ | ‘nearest’ | false, default: ‘top’): 执行前元素滚动到视口的位置。
waitForAnimations (boolean, default: waitForAnimations config - true): 是否等待动画完成再执行。
animationDistanceThreshold (number, default: animationDistanceThreshold config - 5): 元素移动多大像素距离才被视为正在动画。

实现示例

让我们通过一个常见的场景来看这些命令的实际应用：

describe('Tutorialspoint - Checkbox Interaction', () => {
    beforeEach(() => {
        // Using a stable public site for checkbox examples
        // 使用一个稳定的公共站点作为复选框示例
        cy.visit('https://the-internet.herokuapp.com/checkboxes');
    });

    it('Should check and uncheck individual checkboxes', () => {
        // The first checkbox might be initially unchecked or checked depending on the page state
        // 第一个复选框最初可能是未勾选或已勾选状态，取决于页面状态
        // Let's ensure it's checked
        // 我们来确保它被勾选
        cy.get('input[type="checkbox"]').eq(0).check().should('be.checked');

        // The second checkbox might be initially checked
        // 第二个复选框最初可能已勾选
        // Let's ensure it's unchecked
        // 我们来确保它被取消勾选
        cy.get('input[type="checkbox"]').eq(1).uncheck().should('not.be.checked');
    });

    it('Should verify initial states and then change them', () => {
        // Example: Assuming first checkbox is initially unchecked and second is checked
        // 示例：假设第一个复选框最初未勾选，第二个已勾选
        // Note: Actual initial state on the-internet.herokuapp.com/checkboxes might vary
        // 注意：the-internet.herokuapp.com/checkboxes 上的实际初始状态可能不同
        // This code demonstrates how to adapt if you know the initial state.
        // 此代码演示了如果您知道初始状态如何进行调整。

        // If the first checkbox is found unchecked, then check it.
        // 如果发现第一个复选框未勾选，则勾选它。
        cy.get('input[type="checkbox"]').first().then(($checkbox) => {
            if (!$checkbox.is(':checked')) {
                cy.wrap($checkbox).check();
            }
        });
        cy.get('input[type="checkbox"]').first().should('be.checked');

        // If the last checkbox is found checked, then uncheck it.
        // 如果发现最后一个复选框已勾选，则取消勾选它。
        cy.get('input[type="checkbox"]').last().then(($checkbox) => {
            if ($checkbox.is(':checked')) {
                cy.wrap($checkbox).uncheck();
            }
        });
        cy.get('input[type="checkbox"]').last().should('not.be.checked');
    });
});

执行分析

在 Cypress Test Runner 中：

第一个测试使用索引（.eq(0)、.eq(1)）定位复选框，勾选或取消勾选它们，并使用 .should('be.checked') 或 .should('not.be.checked') 验证它们的状态。
第二个测试演示了使用 .then() 的更具条件性的方法，在决定与复选框交互之前检查其当前状态。这对于更动态的 UI 非常有用。

使用特定选择器（如 ID、data 属性或精确的类名）通常比仅依赖 type="checkbox" 或 eq() 更健壮，尤其是在复选框数量或顺序可能发生变化的情况下。