如何使用cypress选择带有标题的svg？

大佬教程收集整理的这篇文章主要介绍了如何使用cypress选择带有标题的svg？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何使用cypress选择带有标题的svg？？

我想点击 div 中名称为“@R_502_6889@1”、描述为“description1”的元素 标题是使用柏树的“title1”。

下面是dom，

<div data-testID="table-body" role="rowgroup">
    <div role="row" data-testID="table-row-0">
        <div role="cell">
            <input data-testID="table-row-check@R_419_6951@"/>
        </div>
        <div data-testID="table-cell-row-0-column-@R_502_6889@">
            <button data-testID="expand-row"></button>
            <a class="subtle-link">@R_502_6889@1</a>
        </div>
        <div data-testID="table-cell-row-0-column-description">
            description1
        </div>
        <div data-testID="table-cell-row-0-column-isIcon">
            <div>
                <svg>
                    <title>title2</title>
                </svg>
            </div>
        </div>
    </div>

    <div role="row" data-testID="table-row-1">
        <div role="cell">
            <input data-testID="table-row-1-check@R_419_6951@"/>
        </div>
        <div data-testID="table-cell-row-1-column-@R_502_6889@">
            <button data-testID="expand-row"></button>
            <a class="subtle-link">@R_502_6889@1</a> //i want to click this element
        </div>
        <div data-testID="table-cell-row-column-description">
            description1
        </div>
        <div data-testID="table-cell-row-column-isIcon">
            <div>
                <svg>
                    <title>title1</title>
                </svg>
            </div>
        </div>
    </div>

    <div role="row" data-testID="table-row-2">
        <div role="cell">
            <input data-testID="table-row-check@R_419_6951@"/>
        </div>
        <div data-testID="table-cell-row-2-column-@R_502_6889@">
            <button data-testID="expand-row"></button>
            <a class="subtle-link">@R_502_6889@2</a>
        </div>
        <div data-testID="table-cell-row-1-column-description">
            description2
        </div>
        <div data-testID="table-cell-row-0-column-isIcon">
            <div>
                <svg>
                    <title>title1</title>
                </svg>
            </div>
        </div>
    </div>
</div>

从上面的dom可以看出，有两个div，名称为@R_502_6889@1，描述为description1。但标题是“title1”，“title2”

我试过如下，

cy.get('div[role="row"]')
    .find('div','@R_502_6889@1')
    .contains('svg','title1')
    .parent()
    .click();

这会选择第一个名称为 @R_502_6889@1 的元素，尽管 title 是 title2

解决方法

cy.get('div[role="row"]')                           // 3 elements found
  .filter((_,row) => {
    return row.textContent.includes('title1') &&
      row.textContent.includes('description1') &&
      row.textContent.includes('name1')             // filters to 1 element
  })
  .find('a')
  .click()

const SELEctor = 'div[role="row"]' +
  ':contains("title1")' +
  ':contains("description1")' +
  ':contains("name1")';
cy.get(SELEctor)
  .find('a')
  .click();

cy.get('div[role="row"]')
  .filter((_,row) => {
    const title = Cypress.$(row).find('title').text();
    const description = Cypress.$(row).find('div[data-testid="table-cell-row-column-description"]').text();
    const name = Cypress.$(row).find('a.subtle-link').text();
    return title === 'title1' &&
      description === 'description1' &&
      name === 'name1';
  })
  .find('a')
  .click()

大佬总结

以上是大佬教程为你收集整理的如何使用cypress选择带有标题的svg？全部内容，希望文章能够帮你解决如何使用cypress选择带有标题的svg？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。