获取复选框的检查值-物料设计

Question

我有一个页面使用基于基本引导程序的Admin BSB物料设计布局

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

“已选中”示例复选框：

我看到即使没有添加data-cypress="mycheckbx"属性，赛普拉斯也无法找到复选框控件。

所以我的问题是：在这种情况下如何获取“选中”属性？

使用的样式：

[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 文档

Answer 2

看来我需要做的只是：

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

而且断言有效！

谢谢

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')