如何使用柏树选择带有标题的svg？答案

【问题标题】：How to select a svg with title using cypress?如何使用柏树选择带有标题的svg？
【发布时间】：2021-04-20 06:46:39
【问题描述】：

我想单击 div 中名称为“name1”的元素，描述为“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-checkbox"/>
        </div>
        <div data-testid="table-cell-row-0-column-name">
            <button data-testid="expand-row"></button>
            <a class="subtle-link">name1</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-checkbox"/>
        </div>
        <div data-testid="table-cell-row-1-column-name">
            <button data-testid="expand-row"></button>
            <a class="subtle-link">name1</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-checkbox"/>
        </div>
        <div data-testid="table-cell-row-2-column-name">
            <button data-testid="expand-row"></button>
            <a class="subtle-link">name2</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 中可以看出，有两个名称为 name1 和描述 description1 的 div。但标题是“title1”，“title2”

我已经尝试如下，

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

这会选择第一个带有 name1 的元素，尽管 title 是 title2

【问题讨论】：

你得到的确切错误是什么。如果能加个截图就好了？
您的代码中是 cy.get 而不是 cy.getR？
@Dhamo：对不起，是的，它的 cy.get

标签： javascript cypress

【解决方案1】：

这很棘手，我发现最简单的方法是使用带有回调的过滤器。

row 参数是原始元素（不是 jQuery 包装的），因此使用 .textContent() 获取节点及其后代的文本 - MDN - textContent()。

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

行内的文本搜索可能有点不精确，具体取决于您要查找的文本是否出现在其他列中。

更精确的过滤器将针对每个文本的元素（此处使用 jQuery），

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

【讨论】：