How to fetch the value of an attribute of an element in cypress?

在 Cypress 中，获取 DOM 元素的属性值是一个很常见的操作，它可以帮助我们验证页面上各种元素的状态。Cypress 提供了多种方式来获取属性值，其中使用 .invoke() 和 .should() 方法是最常见的方法。下面我将详细介绍这两种方法的使用及示例。

使用 .invoke() 方法获取属性值

.invoke() 方法用于调用对象的函数。当用于 jQuery 对象时，我们可以通过 .invoke('attr', 'attributeName') 来获取指定属性的值。

示例代码：

javascript
// 假设我们要获取一个按钮的 disabled 属性
cy.get('button#submit').invoke('attr', 'disabled').then(attr => {
  console.log(attr); // 输出属性值
});

在这个例子中，cy.get('button#submit') 首先获取了 ID 为 submit 的按钮，然后使用 .invoke('attr', 'disabled') 来获取其 disabled 属性的值，并在随后的 .then() 中处理这个值。

使用 .should() 方法断言属性值

除了获取属性值进行操作之外，我们通常还需要验证属性值是否符合预期，这时可以使用 .should() 方法。

示例代码：

javascript
// 验证按钮是否被禁用
cy.get('button#submit').should('have.attr', 'disabled', 'disabled');

// 验证图像的 alt 属性
cy.get('img#logo').should('have.attr', 'alt', 'Company Logo');

这里 should('have.attr', 'attributeName', 'expectedValue') 方法被用来断言 DOM 元素的属性值。在第一个例子中，我们验证按钮的 disabled 属性是否为 'disabled'。在第二个例子中，我们检查图片的 alt 属性是否为 'Company Logo'。

这两种方法都是在 Cypress 中处理 DOM 元素属性的非常有效和常用的手段。通过这样的方式，我们可以确保应用程序的 UI 元素符合业务规则和用户交互的预期。