Cypress正在寻找错误对象中的属性。

Question

以下是两个测试：

it("It should now show the Send Reset Instructions link", () => {
    fsrloginpage.SendResetInstructions("Send me reset").should('exist');   
});

it("Ihe Send Reset Instructions link should be disabled if the Email is empty", () => {
    fsrloginpage.UsernameEmailField().clear();
    fsrloginpage.SendResetInstructions("Send me reset").should('have.attr','disabled','true');   
});

下面是.SendResetInstructions对象定义：

    SendResetInstructions(linklabel){
        return cy.get('button[class^="mat-focus-indicator mat-button mat-raised-button 
        mat-button-base mat-primary"]').contains(linklabel);
    }

以下是我的研究结果：

 It should now show the Send Reset Instructions linkpassed
TEST BODY
1
getbutton[class^="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary"]
2
containsSend me reset
3
assertexpected <span.mat-button-wrapper> to exist in the DOM
Ihe Send Reset Instructions link should be disabled if the Email is emptyfailed
TEST BODY
1
getinput[id="mat-input-2"]
2
clear
3
getbutton[class^="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary"]
4
containsSend me reset
5
assertexpected <span.mat-button-wrapper> to have attribute disabled
AssertionError
Timed out retrying after 4000ms: expected '<span.mat-button-wrapper>' to have attribute 'disabled'
mcare/integration/FSRLoginBVT.spec.js:68:57
  66 | it("Ihe Send Reset Instructions link should be disabled if the Email is empty", () => {
  67 |     fsrloginpage.UsernameEmailField().clear();
> 68 |     fsrloginpage.SendResetInstructions("Send me reset").should('have.attr','disabled','true');   
     |                                                         ^
  69 | });
  70 | 
  71 | it("Ihe Send Reset Instructions link should be enabled if the Email is filled", () => {

因此，它在第一个测试中找到了对象，但是有一个断言(#1)。在第二个测试中，它似乎忽略了按钮，并试图使用断言(#2)中提到的对象。我认为它这样做是因为按钮的标识符在按钮内的跨度内。下面是我正在测试的代码：

<button mat-button="" mat-raised-button="" color="primary" class="mat-focus-indicator mat-button mat-raised-button mat-button-base mat-primary mat-button-disabled" disabled="true">
<span class="mat-button-wrapper"> Send me reset password instructions </span>
<span matripple="" class="mat-ripple mat-button-ripple"></span>
<span class="mat-button-focus-overlay"></span>
</button>

对如何绕过这件事有什么想法吗？最好的解决方案是让开发人员将is放在他们的代码中，但这不太可能及时发生。

Answer 1

你真的不想在你的选择器中的那些类，他们是材料设计样式，很可能是如此常见，以至于没有区分按钮。

只要按一下按钮的标签内容就可以了

SendResetInstructions(linklabel) {
  return cy.contains('button', linklabel);
}

我会说POM方法命名也意味着固定文本，例如，您永远不会这样调用，这将是混乱的。

fsrloginpage.SendResetInstructions("Log me in")

所以您最好封装文本

SendResetInstructions() {
  return cy.contains('button', 'Send me reset');
}

最后，使用be.disabled断言而不是have.attribute断言，因为disabled属性(有时)存在或不存在，而不是真或假。be.disabled涵盖了这两种情况。

fsrloginpage.SendResetInstructions().should('be.disabled');

Answer 2

问题来自这样一个事实:您的.contains()生成它找到的span元素，而不是包装三个spans的button元素。已生成的span没有disabled=true，所以断言失败。

为了返回父元素，您可以使用一些策略，但最简单的策略是pass in the desired element type that .contains yields.

    SendResetInstructions(linklabel){
        return cy.get('button[class^="mat-focus-indicator mat-button mat-raised-button 
        mat-button-base mat-primary"]').contains('button', linklabel);
    }