代码之家 › 专栏 › 技术社区 › Troncoso

在Cypress中通过HTML查找元素

cypress javascript

Troncoso · 技术社区 · 6 年前

我已经开始实施柏树对于一些回归测试,我试图在元素列表中找到一个特定的元素。元素采用以下格式:

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

在一个页面上,有几个这样的页面。我想尝试通过[navigation text]来定位一个特定的目标,但它们也可能有类似的文本。我的主要示例是一个带有“Profiles”的示例,另一个带有“Membership Profiles”。那么,做什么呢 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;
            }
        });
    }
});

navLinks 变量从上一次迭代中提取相同的元素。

Cypress有内置的东西让我可以通过HTML进行搜索吗?我一直在看文档,但什么也找不到。

2 回复 | 直到 6 年前

Brendan 6 年前

我想到了这个,我还没有测试过,但我相信它会满足你的需求。

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

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

Troncoso 6 年前

多亏了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:'}
]);

John Sharp 3 年前

这对你有用吗?

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