如何从具有多个相同项目的父元素获取子元素？

Question

我被困在子元素位置。子元素的属性有多项，父元素的属性也有多项。我发现很难找到子元素。元素操作 click() 不起作用。

网页：

<div class="locale-selector" xpath="1">
<span class="locale-selector-heading"> Your location and language</span>
<div class="locale-selector-country-wrapper" data-metrics-section="Site_lvl1_LocLangSelector">
   <a href="#" class="locale-selector-country" aria-controls="localization-container" aria-haspopup="true" aria-expanded="false">
       <div class="locale-selector-flag-heading-wrapper">
           <span class="flag-header-global flag-hong-kong"></span>
           <span class="locale-selector-country-heading">Hong Kong</span>
       </div>
       <span class="locale-selector-chevron-arrow"></span>
   </a>
</div>
</div>

span标签有多个类，div标签有多个相同的类。

如何在类上执行 click() 操作？

class="locale-selector-country-heading"

我的尝试：

cy.get('.locale-selector-country-heading').contains('Hong Kong').click()

错误：

<span class="locale-selector-country-heading">Hong Kong</span>

该元素<span.locale-selector-country-heading>不可见，因为其父元素<div.locale-selector-flag-heading-wrapper>具有 CSS 属性：visibility: hidden

Answer 1

该错误告诉您父元素使 DOM 树的整个部分不可操作。

您可以强制单击以关闭可操作性检查

cy.get('.locale-selector-country-heading').contains('Hong Kong').click({force:true})

但是您的测试有些不现实 - 用户无法单击不可见的内容。

然而，有时可操作性检查是不正确的 - 如果您确实可以看到该元素，请继续并使用{force:true}.

否则，元素可能会转换为可见状态（通过 CSS 动画）。

在这种情况下，您想要添加对可见性的重试：.should('be.visible')

cy.get('.locale-selector-country-heading').contains('Hong Kong')
  .should('be.visible')
  .click()

这里有一个关于可操作性的部分与元素交互