时间戳

首页 > 解决方案 > 在 Cypress 中通过 HTML 查找元素

javascript - 在 Cypress 中通过 HTML 查找元素

问题描述

我已经开始为一些回归测试实施赛普拉斯，我试图在元素列表中找到一个特定的元素。元素采用以下格式：

<div class="navigationIcon">
    <input>
    <div>
        <img class="navigationImage" src="[image/path]">
        <div class="navigationText">[navigation text]</div>
    </div>
</div>

在一个页面上，有几个。我想尝试通过 [navigation text] 来定位特定对象，但它们可能具有相似的文本。我的主要例子是一个带有“个人资料”的例子，第二个带有“会员资料”的例子。所以，这样做cy.contains("Profiles")会给我“会员资料”元素而不是“资料”。

请记住，这是在函数中使用的，如下所示：

Cypress.Commands.add('goTo', (places) =>
{
    // Navigate to the places
});

其中“地点”是要导航到的页面数组。所以，我不知道我在函数中要查找的确切文本来表达类似and !text === 'Membership Profiles'.

有谁知道我如何通过 html 内容获取元素？这是我想出的功能：

Cypress.Commands.add('goTo', (places) =>
{
    for (let i = 0; i < places.length; i++)
    {
        let place = places[i];
        let navLinks = Cypress.$('.navigationIcon').toArray();
        navLinks.some((link) =>
        {
            if (link.innerHTML.includes(`>${place.name}</div>`))
            {
                cy.wrap(link).click();
                return true;
            }
        });
    }
});

但这太快地移动到下一个外部 for 循环迭代，并且第二次通过navLinks变量从上一次迭代中提取相同的元素。

赛普拉斯有内置的东西可以让我通过 HTML 搜索吗？我一直在查看文档，但找不到任何东西。

标签： javascriptcypress

解决方案

我想出了这个，我没有测试过，但我相信它会做你所追求的。

Cypress.Commands.add('goTo', place => {
  cy.get("div.navigationIcon > div > div").then($navs => {
    var $desiredNav = $navs.find($nav => {
      return $nav.text() == place;
    });

    cy.wrap($desiredNav).click();
});

为了使它与您的位置数组一起工作，我会这样做，或者可以将 for 循环放在您的测试中：

Cypress.Commands.add('goToPlaces', places => {
  for (let i = 0; i < places.length; i++)
  {
    cy.goTo(places[i]);
  }
});

推荐阅读