What is the best way to choose an SVG with a title using Cypress?

Question

What is the best way to choose an SVG with a title using Cypress?

In my Cypress script, I am looking to click on an element within a div that has the name "name1", description "description1", and title "title1".

Below is the HTML structure:

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

From the above DOM, there are two divs with the name "name1" and description "description1", but the titles are "title1" and "title2".

I attempted the following approach:

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

However, this selects the first element with the name "name1" even though the title is "title2".

javascript cypress

Answer 1

Answer №1

This task can be quite challenging, but I discovered a simple solution using a filter with callback function.

The row parameter represents the raw element (not wrapped in jQuery), so you can use .textContent() to retrieve the text of the node and its descendants - check out 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()

You also have the option of using a selector that already includes the necessary filters

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

If searching for text within the row proves to be imprecise due to text appearing in other columns, a more accurate filter can target each individual element containing the text (using jQuery in this case),

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

Answer 2

This task can be quite challenging, but I discovered a simple solution using a filter with callback function.

The row parameter represents the raw element (not wrapped in jQuery), so you can use .textContent() to retrieve the text of the node and its descendants - check out 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()

You also have the option of using a selector that already includes the necessary filters

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

If searching for text within the row proves to be imprecise due to text appearing in other columns, a more accurate filter can target each individual element containing the text (using jQuery in this case),

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

What is the best way to choose an SVG with a title using Cypress?

Answer №1

Similar questions

The Organization of Event Handling in ThreeJs

The page quickly displays the splash page only if the user is logged in

Choose a particular form when the dropdown option is changed

Adding over 20,000 rows to a table can be time-consuming, causing the page to become unresponsive once the process is complete

What is the best way to enable swipe functionality for ion-items in Ionic without requiring a click?

Generate HTML table with CSS dynamically applied through jQuery

"Troubleshooting ways to resolve babel-eslint import/export issues without the need for a configuration

Improved method for managing hash URLs in AJAX-enabled websites

Using GeoJson in Leaflet for map display

Manipulating Object origin data

Optimal method for utilizing Babel to generate a unified JavaScript bundle

The localStorage is currently being updated, however there seems to be an issue with the output where false is being mistakenly interpreted

Angular - Dividing Values within Input Arrays

I am interested in utilizing Sequelize, Vue, and Node to implement a query that filters data once it is retrieved to display on my view

What steps can I take to ensure that a JavaScript function does not execute when a DOM element from an array has already been chosen?

Angular - Collaborative HTML format function

Utilizing ReactJS to Transfer States and Props within Reactable Table Rows

What is the best way to choose a random number using jQuery?

How can Angular's as-syntax be used to access the selected object?

What is the best way to utilize lodash in order to inspect every element within a collection, excluding those that do not fulfill my specified condition