Typescript 在滚动到视图中后，如何单击具有相同名称的元素

我试图点击“用户”子菜单下的“用户”

我尝试使用不同的标识符，如“dx item dx treeview item”，并将其命名为不同的元素，但cypress无法找到它

我的测试

 describe('CanGoToUsers' , function() {
    it('GoToUsers', function(){
         const dashboard = new DashBoardPage;
         cy.visit('/');
         cy.login();
         dashboard.Users().scrollIntoView()
         dashboard.UsersClick().click();

         
    });

仪表板页面

Users(){
    return cy.contains('Users')
}

UsersClick(){
    return cy.get('dx-item dx-treeview-item')
}

html元素

<ul class="dx-treeview-node-container dx-treeview-node-container-opened" role="group">
   <li class="dx-treeview-node dx-treeview-item-without-checkbox dx-state-selected dx-treeview-node-is-leaf" data-item-id="/Users" role="treeitem" aria-label="Users" aria-expanded="false" aria-level="2" aria-selected="true">
      <div class="dx-item dx-treeview-item">
         <div class="dx-item-content dx-treeview-item-content"><span>Users</span></div>
      </div>
   </li>
   <li class="dx-treeview-node dx-treeview-item-without-checkbox dx-treeview-node-is-leaf" data-item-id="/settings/roles" role="treeitem" aria-label="Roles" aria-expanded="false" aria-level="2" aria-selected="false">
      <div class="dx-item dx-treeview-item">
         <div class="dx-item-content dx-treeview-item-content"><span>Roles</span></div>
      </div>
   </li>
   <li class="dx-treeview-node dx-treeview-item-without-checkbox dx-treeview-node-is-leaf" data-item-id="/settings/permissions" role="treeitem" aria-label="Permissions" aria-expanded="false" aria-level="2" aria-selected="false">
      <div class="dx-item dx-treeview-item">
         <div class="dx-item-content dx-treeview-item-content"><span>Permissions</span></div>
      </div>
   </li>
</ul>

使用者


角色


权限

您可以使用

数据项id

属性查找要单击的元素

cy.get('li[data-item-id="/Users"]').click()

//In case the above doesn't work you can try this
cy.get('li[data-item-id="/Users"]').click({force: true})

---

添加测试元素的HTML。添加我认为很抱歉，它在一行中。我看到您正在使用页面对象模型设计模式。您可能想阅读这篇文章，其中Cypress开发人员讨论了上述模式的缺点并提供了不同的解决方案。

cy.get（'dx-item dx treeview item'）

中的选择器是类，因此您需要在它们前面加一个点

cy.get（'.dx item.dx treeview item'））

@natn2323您还应该阅读链接博客帖子的评论。这种方法充其量是“有争议的”。您还应该从选择器中删除

li

，这样您的测试就不会依赖HTML结构