如何在Cypress中获取HTML元素的for属性值

你的两种方法失败的原因及对应解决方案如下：

方法一失败原因及修正 #

直接将Cypress链式命令赋值给变量时，得到的是Cypress的命令对象（而非实际属性值），因为Cypress所有命令都是异步执行的。必须通过.then()回调来获取异步返回的实际值：

cy.get('[data-test="user-test"]')
  .invoke('attr', 'for')
  .then((forValue) => {
    cy.log(forValue); // 此时会输出aboqo_46
    // 若需在其他逻辑中使用该值，可在此回调内处理
  });

方法二失败原因及修正 #

.its('for')用于访问JavaScript对象的属性，但DOM元素对应的for属性在JS中实际是htmlFor（HTML属性名和DOM属性名有差异），且直接用.its()无法获取DOM元素的HTML属性。你可以改用以下两种方式：

方式1：通过attr获取HTML属性 #

cy.get('[data-test="user-test"]')
  .invoke('attr', 'for')
  .then((forValue) => {
    cy.log(forValue);
  });

方式2：通过prop获取DOM属性 #

cy.get('[data-test="user-test"]')
  .invoke('prop', 'htmlFor')
  .then((htmlForValue) => {
    cy.log(htmlForValue); // 同样输出aboqo_46
  });

进阶：将属性值存为别名复用 #

如果需要在多个地方复用该属性值，可以使用Cypress的别名功能：

// 存储别名
cy.get('[data-test="user-test"]')
  .invoke('attr', 'for')
  .as('labelForValue');

// 后续使用别名
cy.get('@labelForValue').then((value) => {
  cy.log(value);
  // 这里可以加入依赖该值的其他测试逻辑
});

内容的提问来源于stack exchange，提问作者user