在Cypress中追加DOM元素后查询失败的问题咨询与解决方法

问题1：这种测试createElement的方式在Cypress中是否合适？ #

直接使用全局document.createElement和document.body并非Cypress推荐的最佳实践，但并非完全不可行。核心问题在于上下文一致性：Cypress运行在独立的测试进程中，直接调用全局document偶尔会指向非当前测试页面的上下文（比如测试框架的内部文档），同时同步DOM操作和Cypress的异步命令队列容易出现时序不匹配的问题。

更稳妥的方式是通过Cypress提供的cy.document()或cy.window()获取当前测试页面的上下文，确保所有DOM操作都针对正确的页面文档。

问题2：如何让cy.get('#test')正常工作？ #

你的测试失败有两个核心原因：一是可能误操作了非测试页面的文档上下文，二是自定义元素的属性赋值方式不对，导致attr('color')无法获取到预期值。修改后的测试代码如下：

it('should be able to set attributes before append', () => {
  // 通过cy.document()获取当前测试页面的文档对象
  cy.document().then(doc => {
    const elem = doc.createElement('ids-tag');
    // 自定义元素优先用setAttribute设置HTML属性（确保能被attr()捕获）
    elem.setAttribute('color', 'red');
    elem.setAttribute('clickable', 'true');
    elem.setAttribute('dismissible', 'true');
    elem.setAttribute('id', 'test');
    doc.body.appendChild(elem);
  });

  // 直接在命令队列中查询元素，Cypress会自动等待元素出现
  cy.get('#test')
    .invoke('attr', 'color')
    .should('eq', 'red');
});

额外补充：

• 如果你的自定义元素是通过DOM对象属性（而非HTML属性）控制状态，断言时需要改用invoke('prop', 'color')，示例：

  cy.get('#test')
    .invoke('prop', 'color')
    .should('eq', 'red');
  

• 避免在cy.get().then()内部嵌套Cypress命令（比如原代码中在cy.get('body').then()里写cy.get('#test')），这会打乱Cypress的异步命令队列执行顺序，应该把DOM操作和查询命令分开处理。

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