Как выбрать SVG с заголовком в Cypress?

Вопрос или проблема

<div class="Some-sc Container">
    <div data-testid='item'>
        <svg data-color="green">
            <title>alarm</title>
        </svg>
    </div>
</div>
<div class="Some-sc Container">
    <div data-testid='item'>
        <svg data-color="yellow">
            <title>major</title>
        </svg>
    </div>
</div>

cy.get('svg').contains('alarm').click() // не работает
cy.getByTestId('item').contains('svg', 'alarm').click() // не работает

Ответ или решение

Для выбора SVG с определенным заголовком в Cypress, вам нужно учитывать, что метод contains() не работает на элементах внутри SVG в прямом смысле, как это происходит с обычными DOM-элементами. Вместо этого, вам следует использовать комбинацию методов для достижения нужного результата.

Ваша структура DOM выглядит следующим образом:

<div class="Some-sc Container">
    <div data-testid='item'>
        <svg data-color="green">
            <title>alarm</title>
        </svg>
    </div>
</div>
<div class="Some-sc Container">
    <div data-testid='item'>
        <svg data-color="yellow">
            <title>major</title>
        </svg>
    </div>
</div>

Для выбора SVG с заголовком "alarm", выполните следующие шаги:

1. Сначала выберите все элементы svg.
2. Затем проверьте содержимое элемента title внутри выбранного svg.
3. Наконец, кликайте по нужному элементу.

Вот как это можно реализовать в коде Cypress:

cy.get('svg').each(($svg) => {
    cy.wrap($svg).find('title').then(($title) => {
        if ($title.text() === 'alarm') {
            cy.wrap($svg).click();
        }
    });
});

В этом коде:

• cy.get('svg') выбирает все элементы SVG.
• Метод each() итеративно проходит по каждому элементу SVG.
• cy.wrap($svg) позволяет работать с текущим SVG в цепочке команд.
• find('title') выбирает элемент title внутри текущего SVG.
• Затем мы проверяем текст внутри заголовка с помощью text(). Если он равен ‘alarm’, мы выполняем клик по соответствующему SVG с помощью click().

Таким образом, вы сможете успешно выбрать и кликнуть на нужный SVG элемент с заголовком "alarm".