如何附加、查询和检查 DOM 元素

Question

与柏树一起工作。我试图将一个新元素附加到页面并检查它是否渲染正常。（我们的代码有一个错误）。我想出的测试看起来像：

it('should be able to set attributes before append', () => {
  cy.get('body').then(() => {
    const elem: any = document.createElement('ids-tag');
    elem.color = 'red';
    elem.clickable = true;
    elem.dismissible = true;
    elem.id = 'test';
    document.body.appendChild(elem);

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

然而，这是失败的，因为我认为该元素附加在不同的主体中。所以有几个问题：

1. 这是在 cypress 中测试 createElement 的好方法吗？
2. 我怎样才能去cy.get('#test')上班

没有找到太多关于如何在 cypress 中附加到 DOM 的信息。

Answer 1

我首先会问你为什么要测试createElement？我猜想您的应用程序中有些东西会阻碍此操作，但它的读取方式是您正在尝试测试本机浏览器功能。

我问这个问题只是因为答案可能会给出完全不同的测试。

document从技术角度来看，您的测试失败是因为您的测试有误。

Cypress 测试运行程序是浏览器文档（您引用的文档），并且在该页面中<iframe>包含您的实际应用程序。

使用该cy.document()命令访问应用程序的文档。

it('should be able to set attributes before append', () => {

  cy.document().then(doc => {
    const elem = doc.createElement('ids-tag');
    elem.color = 'red';
    elem.clickable = true;
    elem.dismissible = true;
    elem.id = 'test';
    doc.body.appendChild(elem);
  })

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