在 Cypress 中通过 HTML 查找元素答案

【问题标题】：Find element by HTML in Cypress在 Cypress 中通过 HTML 查找元素
【发布时间】：2018-12-10 13:46:13
【问题描述】：

我已经开始为一些回归测试实现 Cypress，并且我正在尝试在元素列表中查找特定元素。元素采用以下格式：

<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
});

其中“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 进行搜索？我一直在查看文档，但找不到任何东西。

【问题讨论】：

你应该给你的 html 数据属性，以便它们更加静态并且不太可能改变例如 data-name-it="navigiation-icon" 然后用 cy.get(' [data-name-it=navigation-icon')

标签： javascript cypress

【解决方案1】：

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

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]);
  }
});

【讨论】：

非常感谢！虽然它不是开箱即用的，但我能够弄乱它并让它做我需要的事情。我在一个单独的答案中发布了我的最终解决方案，但我接受了你的解决方案，因为它主要是你的代码。再次感谢！

【解决方案2】：

多亏了 Brendan 的回答，我才能得到一些工作：

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

Cypress.Commands.add('goTo', (place) =>
{
    cy.log(`Navigating to ${place.name}`);

    cy.get('div.navigationIcon > div > div').then(($navLinks) =>
    {
        for (let i = 0; i < $navLinks.length; i++)
        {
            let $link = Cypress.$($navLinks[i]);
            if ($link.text().trim() === place.name)
            {
                // Click the link
                cy.wrap($link).click();
                break;
            }
        }

        // Ensure the url changed
        cy.url().should('include', place.uri);
    });
});

注意：

我将一个数组传递给navigateTo 函数，如下所示：

cy.navigateTo([
    { name: 'Setup', uri: '#Setup:'},
    { name: 'Profiles', uri: '#Profiles:'},
    { name: 'Addresses', uri: '#Addresses:'}
]);

这样它会导航到页面，然后通过 URL 验证移动

【讨论】：

【解决方案3】：

这对你有用吗？

cy.get('.navigationIcon .navigationText:contains("[navigation text]")')

【讨论】：