英文:
How to get child element from parent element having multiple same items?
问题
我卡在了子元素的位置。子元素的属性有多个，父元素的属性也有多个。我在定位子元素时遇到了困难。元素操作 click() 不起作用。
Html：
span 标签具有多个类，div 标签具有多个相同的类。
如何在 class 上执行 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`
英文:
I am stuck at child element location. The attributes of child elements are having multiple items, also attributes of parent element are multiple items. I am finding difficulty in locating child element. Element action click() is not working.
Html:
<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 tag having multiple classes,div tag having multiple same classes.
How can I perform click() action on class ?
class="locale-selector-country-heading"
My attempt:
cy.get('.locale-selector-country-heading').contains('Hong Kong').click()
Error:
<span class="locale-selector-country-heading">Hong Kong</span>
This element <span.locale-selector-country-heading> is not visible because its parent <div.locale-selector-flag-heading-wrapper> has CSS property: visibility: hidden
答案1
得分: 5
错误提示您，一个父元素使整个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()
关于可操作性的更多信息，请参见与元素交互。
英文:
The error is telling you that a parent element is making the whole section of the DOM tree not actionable.
You can force the click, to turn off actionability checks
cy.get('.locale-selector-country-heading').contains('Hong Kong').click({force:true})
but then your test is somewhat not realistic - the user can't click something that's not visible.
However, sometimes the actionability checks are incorrect - if you can actually see the element, go ahead and use {force:true}.
Otherwise, the element may be transitioning into a visible state (via CSS animation).
In this case, you want to add a retry on the visibility with .should('be.visible')
cy.get('.locale-selector-country-heading').contains('Hong Kong')
.should('be.visible')
.click()
There's a section on actionability here Interacting with Elements
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论