获取复选框的选中值 - Material Design答案

【问题标题】：Getting the checked value of a checkbox - Material Design获取复选框的选中值 - Material Design
【发布时间】：2018-06-12 03:44:26
【问题描述】：

我有一个页面使用基于基本引导的 Admin BSB Material Design layout

我很难从该设计中的复选框中获取值。

“选中”的示例复选框：

即使我添加了data-cypress="mycheckbx" 属性，我也看到 cypress 找不到复选框控件。

所以我的问题是：在这种情况下如何获得“已检查”属性？

使用的样式：

[type="checkbox"].filled-in:not(:checked)+label:before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 20% 40%;
    transform-origin: 100% 100%
}

[type="checkbox"].filled-in:not(:checked)+label:after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #5a5a5a;
    top: 0;
    z-index: 0
}

[type="checkbox"].filled-in:checked+label:before {
    top: 0;
    left: 1px;
    width: 8px;
    height: 13px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

[type="checkbox"].filled-in:checked+label:after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #26a69a;
    background-color: #26a69a;
    z-index: 0
}

【问题讨论】：

能否请您提供您尝试过的赛普拉斯代码，并说明您希望它做什么。我之所以这样问，是因为断言一个框已选中（或未选中）与实际将“已选中”状态存储在变量（真或假）中的方式不同，您可以在赛普拉斯规范中使用后者。跨度>

标签： cypress

【解决方案1】：

由于上述解决方案都不适合我，我这样做了：

cy.get('#element').should('be.checked')

来源：cypress documentation

相反的（未经检查的）断言是（见官方docs）：

cy.get('#element').should('not.be.checked')

【讨论】：

【解决方案2】：

看来我只需要：

cy.get('#pract-haspen').should('have.attr', 'checked')

这个断言奏效了！

谢谢

【讨论】：

【解决方案3】：

这个答案提出了一个带有断言测试的问题。

如果您想获取价值并在某处使用它，您可以简单地：

cy.get('#elementQuery').then(elem => {
   var value = elem.val()
   ...do anything you want, like if(value == 'on')...
})

【讨论】：

【解决方案4】：

如果attr 不适合您，请尝试prop：

cy.get('#pract-haspen').should('have.prop', 'checked')

【讨论】：