如何使用 cypress 在嵌套 div 中单击具有某些文本的 div？答案

【问题标题】：How to click a div with certain text in a nested div using cypress?如何使用 cypress 在嵌套 div 中单击具有某些文本的 div？
【发布时间】：2020-12-23 09:47:57
【问题描述】：

下面是我的 HTML 代码：

    <div class="main">
        <div class="box">
            <div class="cell">checkbox</div>
            <div class="cell"></div>
            <div class="cell">
                <a>link1</a>
            </div>
            <div class="cell">type</div>
            <div class="cell">description</div>
        </div>
        <div class="box"> //i want to click this element
            <div class="cell">checkbox</div>
            <div class="cell"></div>
            <div class="cell">
                <a>link2</a>
            </div>
            <div class="cell">type1</div>
            <div class="cell">description1</div>
        </div>
        <div class="box">
            <div class="cell">checkbox</div>
            <div class="cell"></div>
            <div class="cell">
                <a>link3</a>
            </div>
            <div class="cell">type2</div>
            <div class="cell">description2</div>
        </div>
    </div>

我想单击包含<a>link2</a> 标记的box 类的div。

我已经试过了：

    cy.get(`.main>div`).contains('link2').click();

这会点击链接元素本身，但我希望它点击包含它的div 元素（<a>link2</a> 标记）。

有没有办法做到这一点？
我期待您提供任何提示和解决方案。
谢谢。

【问题讨论】：

标签： css cypress

【解决方案1】：

您可以尝试通过以下方式获取link2 的父元素，即您要单击的 div：

cy.get(`.main>div`).contains('link2').parent().click();

【讨论】：

【解决方案2】：

我相信您可以在“包含”本身中使用选择器，如下所示

cy.contains('.main>div', 'link2').click();

【讨论】：