Question

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

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

在单个页面上，有几个。我想尝试通过[导航文本]定位特定目标，但是他们可能会有相似的文本。我的主要示例是一个带有“配置文件”的示例，另一个是带有“会员配置文件”的示例。因此，执行cy.contains("Profiles")将使我获得“ Membership Profiles”元素，而不是“ 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进行搜索？我一直在浏览文档，但是什么也找不到。

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

要使其与您的places数组一起使用，我可以这样做，或者可以在您的测试中放置for循环：

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

Answer 2

多亏了布伦丹的回答，我才能够找到一些可行的方法：

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验证移动

Answer 3

这对你有用吗？

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

在Cypress中通过HTML查找元素

3 个答案: