Cypress:无法与页面元素交互

Question

我正在尝试确定一个字段是否为只读。当元素处于只读状态时，html代码如下所示：

<textarea _ngcontent-njf-c545="" rows="1" cdktextareaautosize="" aria-label="Product name" matinput="" type="text" placeholder="'Enter a product name...'" required="" formcontrolname="productName" class="cdk-textarea-autosize mat-input-element mat-form-field-autofill-control ng-tns-c98-55 ng-untouched ng-pristine cdk-text-field-autofill-monitored" ng-reflect-enabled="" ng-reflect-type="text" ng-reflect-placeholder="'Enter a product name...'" ng-reflect-required="" ng-reflect-name="productName" id="mat-input-3" data-placeholder="'Enter a product name...'" aria-invalid="false" aria-required="true" disabled="" style="height: 21px;">              </textarea>

有问题的字段是产品名称字段：

​

​

我们可以看到我们的元素有一个仅当字段被禁用时才存在的‘disabled’属性，在我的测试中，我希望确定元素中是否存在disabled属性，如果存在，则可以假定元素将被禁用，如果不存在，则字段将被启用

如果我使用下面的代码，我可以选择字段并成功地确定它是否是只读的

cy.get('[formcontrolname="productName"]').should('be.disabled);

因此，虽然上面的代码可以工作，但是字段被禁用了，但是如果字段没有被禁用，代码就会中断并抛出一个错误。从我看到的例子来看，当我们像这样在测试中执行时，我们需要使用带有条件if语句的.then()函数。下面的代码选择页面上包含[formcontrolname="productName"]的元素，这是我们的产品名称字段，并将其传递到If语句中，以便我们可以使用它。然后，脚本尝试识别元素中是否存在“禁用”文本，它不起作用，尽管字段已禁用，但我在元素中找不到“禁用”文本

cy.get('[formcontrolname="productName"]').then((productName) => {
if (productName.find('disabled').length > 0) {
        cy.log('Field is disabled');
      } else {
        // do nothing
        cy.log('Field isn’t disabled');
      }
    });

因此，尽管这段代码成功地识别了字段是否为只读，但我不能使用它，因为如果不禁用该字段，测试将会中断

  cy.get('[formcontrolname="productName"]').should('be.disabled);

但是，一旦我使用.then()并将字段作为参数传入，出于某种原因，我就不能以任何方式与元素交互，我已经尝试了很多其他方法

has.class已禁用

.shoud(be.disabled) -显示错误

Has.attri，已禁用

感谢您的任何帮助

Answer 1

您可以使用:disabled jquery方法来实现此目的：

cy.get('[formcontrolname="productName"]').then(($ele) => {
  if ($ele.is(":disabled")) {
    cy.log("Field is disabled");
  } else {
    // do nothing
    cy.log("Field isn’t disabled");
  }
});

您还可以使用.attr()检查元素是否包含值为空字符串的disabled属性。

cy.get('[formcontrolname="productName"]').then(($ele) => {
  if ($ele.attr("disabled") == "") {
    cy.log("Field is disabled");
  } else {
    // do nothing
    cy.log("Field isn’t disabled");
  }
});