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

Question

我有一个页面使用基于基本引导程序的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
}

Answer 1

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

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

源：cypress documentation

Answer 2

似乎我需要做的就是：

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

并且Assertion有效！

由于

Answer 3

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

如果您想获取该值并在某个地方使用它，则只需：

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

Answer 4

如果attr对您不起作用，请尝试prop：

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