html - 在 Cypress 中，有没有办法通过文本从 p-dropdown 中选择？

我正在尝试实现一个 Cypress 测试，我希望通过文本从 p-dropdown 中进行选择。

基本上，我想从以下下拉菜单中选择文本为 'test 1 GROUP' 的选项

这是我的 p-dropdown 的 HTML 代码：

<p-dropdown #scenarioDropdown [options]="scenarioDropdownList" [(ngModel)]="scenario" [attr.data-cy]="'scenarioDropdownList'"></p-dropdown>

“scenarioDropdownList” 被填充为以下类的数组，其中 label 字段显示在选项中：

export interface SelectItem<T = any> {
    label?: string;
    value: T;
    styleClass?: string;
    icon?: string;
    title?: string;
    disabled?: boolean;
}

我认为这应该很简单，但到目前为止我还没有任何运气。

在我的 Cypress 测试中，我可以这样获取下拉框——但是我无法找到或选择实际的选项。

cy.get('[data-cy="scenarioDropdownList"]')

有什么建议吗？

非常感谢

答案＃1

依我看，最好从网页的 HTML 入手，而不是 Angular 的源 HTML，因为网页才是 Cypress 所看到的。

Angular 会编译它的源代码，因此源代码版本和实时版本会有差异。

另外（不确定这是否适用于 Angular），在编译期间，一些框架会拒绝像 data-cy 这样的属性，因此你必须检查实时页面以查看它们是否存在以及你是否可以使用它们。

这是 p-dropdown 的实时页面

从那我可以看到测试所需的所有部分

cy.get('p-dropdown[placeholder="Select a City"]`)
  .find('div[role="button"]').click()

cy.contains('p-dropdownitem', 'London').click()

cy.get('p-dropdown[placeholder="Select a City"]`)
  .find('input')
  .should('have.value', 'London')

当然，你可以替换 day-cy 选择器，看看它们是否有效，但通常使用页面上的实际文本效果很好，而且使用仅用于测试的属性不会增加页面加载的额外负担。