如何在Cypress中获取ExtJS应用元素的属性键值对？

针对ExtJS动态ID的场景，Cypress的cy.get()返回的链式对象确实需要通过.then()回调才能操作原生DOM或ExtJS组件实例，以下是具体实现方式：

获取元素属性的键值对 #

方式一：基于jQuery对象遍历 #

Cypress封装的元素是jQuery实例，在.then()回调中可以直接遍历DOM元素的属性集合，转换成键值对：

cy.get('.x-panel') // 替换为你的ExtJS元素选择器（比如类名、自定义属性）
  .then($el => {
    const attrMap = {};
    // 遍历原生DOM属性集合
    $.each($el[0].attributes, () => {
      if (this.specified) {
        attrMap[this.name] = this.value;
      }
    });
    // 此时attrMap即为属性键值对，可用于断言或后续操作
    expect(attrMap['data-ref']).to.equal('main-panel');
  });

方式二：原生JS遍历DOM属性 #

如果更习惯原生JavaScript语法，直接取出DOM元素后遍历：

cy.get('[data-testid="ext-grid"]')
  .then($el => {
    const domElement = $el[0];
    const attrMap = {};
    for (let i = 0; i < domElement.attributes.length; i++) {
      const attribute = domElement.attributes[i];
      attrMap[attribute.name] = attribute.value;
    }
    console.log('元素属性:', attrMap);
  });

调用ExtJS组件的方法 #

要调用ExtJS组件的内置方法，需要先通过DOM元素获取组件实例，有两种常用方式：

cy.get('.x-btn')
  .should('be.visible') // 确保组件已渲染完成
  .then($el => {
    // 方式1：通过DOM元素ID获取组件（即使ID动态生成，此时能拿到当前元素的ID）
    const extBtn = Ext.getCmp($el[0].id);
    extBtn.click(); // 调用组件的click方法

    // 方式2：直接通过DOM元素获取组件实例
    const extBtn = Ext.get($el[0]);
    extBtn.disable(); // 调用组件的disable方法
  });

ExtJS元素定位技巧 #

既然ID是动态的，推荐用以下更稳定的选择器：

• ExtJS内置类名：比如.x-grid、.x-form-field，这类类名不会随渲染变化
• 自定义测试属性：给ExtJS组件配置data-testid属性，比如{ xtype: 'button', dataTestId: 'submit-btn' }，然后用cy.get('[data-testid="submit-btn"]')定位
• 组件的itemId：如果组件配置了itemId，可以结合类名定位，比如.x-panel[itemId="main-panel"]

内容的提问来源于stack exchange，提问作者im-not-you