无法解决 Cypress 组件测试中导入的 Angular 组件的选择器问题

Question

我从库中导入一个角度组件。它有选择器<imported-component-group>。

我将此组件放置在本地角度组件内。

在编写 cypress 组件测试时，我无法通过组件名称访问此导入的组件，而只能通过分配给它的类名称来访问。

这就是我将导入的组件放置在本地组件中的方式：

<imported-component-group *ngIf="showImportedComponent(condition$) | async" class="importedComponentGroup">
   
   <imported-component>
   ...
   </imported-component>
   
   <imported-component>
   ...
   </imported-component>
   
</imported-component-group>

从我的组件测试中，我尝试像这样解决它：

cy.get('imported-component-group')

所以：

cy.get('<imported-component-group>')

这两种方法都找不到我的组件，但如果我通过类来解决它，它就可以工作：

cy.get('.importedComponentGroup')

条件*ngIf应该不是问题，不然cy.get('.importedComponent')也找不到。此外，该组件在 HTML 代码中仅存在一次。

由于我仅为组件测试创建了类，因此我想删除它并直接通过其标签名称来寻址组件。

如果有人知道我在这里缺少什么，那就太好了。

Answer 1

为了说明如何查看 DOM 标签，请查看 Cypress 示例cypress-component-testing-apps /angular-standalone/。（注意我需要安装@angular-devkit/core其中缺少的package.json）

如果您查看包含/使用app.component.cy.ts的规范（仅运行第一个测试），DOM 如下所示：AppComponentWelcomeComponent

它显示了WelcomeComponentwith tag <app-welcome>，我可以通过将此行添加到测试中来选择该标签：

...
cy.get('app-welcome').should('contain', 'Welcome testuser')

但是如果我运行规范welcome.component.cy.ts（再次只是第一次测试），DOM 看起来像这样：

现在没有<app-welcome>可供 Cypress 选择的标签，它只是提供组件模板提供的原始 HTML：

<div class="max-w-screen-sm p-12 mx-auto bg-gray-50 rounded-md shadow-lg">
    <h1 class="test-2xl">Welcome {{ username }}</h1>
    <app-button (onClick)="onLogout.emit()">Log Out</app-button>
</div>

我不确定这个示例在使用外部 lib 组件时有何可比性，但您可以在自己的测试中检查 DOM。

您不能使用源模板，您需要通过 devtools 检查 DOM。