如何使用TestCafe断言验证复选框是否处于选中状态

TestCafe 原生提供了表单控件状态的读取能力，校验复选框是否选中不需要手动解析DOM属性，直接调用Selector的checked属性配合断言即可。

• 复选框处于选中状态时，对应Selector实例的checked属性返回布尔值true，未选中返回false
• 校验逻辑可以直接嵌在现有的点击链式调用里，不需要拆分额外的步骤
• 注意不要用hasAttribute('checked')判断选中状态，部分浏览器不会在点击复选框时实时更新DOM上的checked属性，用内置的checked状态属性稳定性最高

你标注位置的校验逻辑可以直接按下面的方式修改，完整可运行代码如下：

import { Selector } from 'testcafe';

fixture("TestCafe Example")
    .page("http://devexpress.github.io/testcafe/example");

test("Fill out and submit form", async t => {

    await t.typeText("#developer-name", "Harun Jonuzi");
    // 点击复选框后追加选中状态校验
    await t
        .click("#remote-testing")
        .expect(Selector("#remote-testing").checked).ok("远程测试选项未正常选中")
        .click("#reusing-js-code")
        .expect(Selector("#reusing-js-code").checked).ok("JS代码复用选项未正常选中")
        .click("#background-parallel-testing")
        .expect(Selector("#background-parallel-testing").checked).ok("后台并行测试选项未正常选中");


    await t.click("#macos");
    // 若需要校验macos选项的选中状态，追加下面这行断言即可
    // .expect(Selector("#macos").checked).ok("macOS选项未正常选中")

    const preferredInterface = Selector("#preferred-interface");
    await t
        .click(preferredInterface)
        .click(preferredInterface.find("option").withText("JavaScript API"));
        

    const submitButton = Selector("#submit-button");
    await t
        .expect(submitButton.hasAttribute("disabled")).notOk();

    await t.click(submitButton);

    const headerInfo = Selector("#article-header");
    await t.expect(headerInfo.innerText).eql("Thank you, Harun Jonuzi!");
})

断言里传入的第二个字符串是自定义错误提示，测试运行失败时会直接打印对应提示，方便快速定位出问题的控件。如果需要校验某个复选框未被选中，把断言改成.expect(Selector(对应选择器).checked).notOk()即可。

内容的提问来源于stack exchange，提问作者Harun