无法在Cypress组件测试中访问导入的Angular组件选择器。

huangapple go评论65阅读模式
英文:

Can't address imported Angular Component's Selector in Cypress Component Test

问题

我从一个库中导入了一个Angular组件。它的选择器是<imported-component-group>

我将这个组件放在我的本地Angular组件中。

在编写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代码中只存在一次。

由于我只是为组件测试创建了这个类,我想摆脱它并直接通过标签名访问组件。

如果有人对我在这里漏掉了什么有任何想法,那就太棒了。

英文:

I import an angular component from a library. It has the selector <imported-component-group>.

I place this component inside my local angular component.

When writing a cypress component test, I can't access this imported component by its component name, but only by a class name I assign to it.

This is how I place the imported component inside my local component:

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

And from my component test, I try to address it like so:

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

and so:

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

Both approaches do not find my component, but it works, if I address it via the class instead:

cy.get('.importedComponentGroup')

The *ngIf condition should not be the problem, otherwise cy.get('.importedComponent') would not find it either. Also, this component exists only once within the HTML code.

Since I only created the class for the component test, I would like to get rid of it and directly address the component by its tag name.

It would be great if anybody has an idea about what I am missing here.

答案1

得分: 4

要说明查看DOM标签,可以查看Cypress示例cypress-component-testing-apps
/angular-standalone/
。(注意我需要安装@angular-devkit/core,因为它在package.json中缺失)

如果你查看app.component.cy.ts规范,该规范是为AppComponent编写的,其中包含/使用WelcomeComponent(仅运行第一个测试),DOM如下所示:

无法在Cypress组件测试中访问导入的Angular组件选择器。

其中显示了带有标签<app-welcome>WelcomeComponent,我可以通过将以下行添加到测试中来选择该标签:

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

但如果我运行规范welcome.component.cy.ts(只是再次运行第一个测试),DOM如下所示:

无法在Cypress组件测试中访问导入的Angular组件选择器。

现在没有<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>

我不确定在使用外部库组件时,这个示例有多么可比较,但你可以在自己的测试中检查DOM。

你不能依靠源模板,你需要通过开发工具检查DOM。

英文:

To illustrate looking at DOM tags, have a look at the Cypress sample cypress-component-testing-apps
/angular-standalone/
. (Note I needed to install @angular-devkit/core which is missing in the package.json)

If you look at the spec app.component.cy.ts which is for AppComponent which contains/uses WelcomeComponent (running only the first test), the DOM looks like this:

无法在Cypress组件测试中访问导入的Angular组件选择器。

which shows the WelcomeComponent with tag <app-welcome>, and I can select on that tag by adding this line to the test:

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

But if I run the spec welcome.component.cy.ts (just the first test again), the DOM looks like this:

无法在Cypress组件测试中访问导入的Angular组件选择器。

now there is no tag <app-welcome> available for Cypress to select on, it's just providing the raw HTML that the component template gives:

<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>

I'm not sure how comparable this example is when using and external lib component, but you can check the DOM in your own test.

You can't go by the source template, you will need to inspect the DOM via devtools.

huangapple
  • 本文由 发表于 2023年7月17日 18:43:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76703674.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定