Is there a way to verify if the content shown for each child is distinct from the others?

Question

Is there a way to verify if the content shown for each child is distinct from the others?

it('features', () => {
      home.featuresMainTitle("What you'll learn")
      cy.get('.grid').children().each(($el, index, $list) =>{
        const currentText = $el.find('h3').text()
        const nextText = $el.next().find('h3').text()
        expect(currentText).to.not.equal(nextText)
      })

I'm extracting a grid element from the DOM and verifying that the text of each child within the grid is different from the others.

The code functions as expected, but I feel there may be a more elegant solution to achieve the same result without using additional JavaScript variables (currentText and nextText). Perhaps there is a feature in Cypress that could streamline these lines of code and make it cleaner at first glance.

javascript variables cypress equality children

Answer 1

Answer №1

While the code may not be shorter, it does provide a more robust test:

By utilizing a Set, you can validate the lengths of .children() and the length of the set.

A Set object allows for storing unique values of any type

This method enables comparison across all children rather than just between next and current elements.

cy.get(".grid").children()
  .then($els => {
    const setOfTexts = new Set();
    [...$els].forEach(el => setOfTexts.add(el.innerText)); // stores only unique values
    return setOfTexts;
  })
  .then(setOfTexts => {
     cy.get(".grid").children().its('length')
       .should('eq', setOfTexts.size)
  })

Alternatively, with a reducer function:

cy.get(".grid").children()
  .then($els => [...$els].reduce((acc, el) => {
    acc.add(el.innerText)
  }, new Set()))
  .then(setOfTexts => {
     cy.get(".grid").children().its('length')
       .should('eq', setOfTexts.size)
  })

Answer 2

While the code may not be shorter, it does provide a more robust test:

By utilizing a Set, you can validate the lengths of .children() and the length of the set.

A Set object allows for storing unique values of any type

This method enables comparison across all children rather than just between next and current elements.

cy.get(".grid").children()
  .then($els => {
    const setOfTexts = new Set();
    [...$els].forEach(el => setOfTexts.add(el.innerText)); // stores only unique values
    return setOfTexts;
  })
  .then(setOfTexts => {
     cy.get(".grid").children().its('length')
       .should('eq', setOfTexts.size)
  })

Alternatively, with a reducer function:

cy.get(".grid").children()
  .then($els => [...$els].reduce((acc, el) => {
    acc.add(el.innerText)
  }, new Set()))
  .then(setOfTexts => {
     cy.get(".grid").children().its('length')
       .should('eq', setOfTexts.size)
  })

Answer 3

Answer №2

To enhance the process of counting unique values, consider implementing the Lodash uniqBy() method

cy.get('.grid')
  .children()
  .should($els => {
    const unique = Cypress._.uniqBy($els, (el) => el.innerText)
    expect(unique.length).to.eq($els.length)
  })

If all texts in the grid are distinct, this test will pass successfully.

Taking into account the <h3>

Assuming you are using a .find() within the .each() function, the same logic should apply unless there are specific <h3> elements in the grid that need to be excluded.

cy.get('.grid')
  .find('h3')
  .should($els => {
    const unique = Cypress._.uniqBy($els, (el) => el.innerText)
    expect(unique.length).to.eq($els.length)
  })

Answer 4

To enhance the process of counting unique values, consider implementing the Lodash uniqBy() method

cy.get('.grid')
  .children()
  .should($els => {
    const unique = Cypress._.uniqBy($els, (el) => el.innerText)
    expect(unique.length).to.eq($els.length)
  })

If all texts in the grid are distinct, this test will pass successfully.

Taking into account the <h3>

Assuming you are using a .find() within the .each() function, the same logic should apply unless there are specific <h3> elements in the grid that need to be excluded.

cy.get('.grid')
  .find('h3')
  .should($els => {
    const unique = Cypress._.uniqBy($els, (el) => el.innerText)
    expect(unique.length).to.eq($els.length)
  })

Answer 5

Answer №3

If you want to approach it differently, one way is to gather all the child elements, extract their text content, convert it into an array of unique values, and then compare it with the original array.

cy.get(".grid")
  .children()
  // retrieve innerText of each child element
  .then(($el) => Cypress._.map($el, (el) => el.innerText))
  .then((childrenText) => {
    // create new array with unique values only
    const uniqueText = Array.from(new Set(childrenText));
    expect(childrenText).to.deep.equal(uniqueText);
  })

Check out this example for a demonstration.

Answer 6

If you want to approach it differently, one way is to gather all the child elements, extract their text content, convert it into an array of unique values, and then compare it with the original array.

cy.get(".grid")
  .children()
  // retrieve innerText of each child element
  .then(($el) => Cypress._.map($el, (el) => el.innerText))
  .then((childrenText) => {
    // create new array with unique values only
    const uniqueText = Array.from(new Set(childrenText));
    expect(childrenText).to.deep.equal(uniqueText);
  })

Check out this example for a demonstration.

Is there a way to verify if the content shown for each child is distinct from the others?

Answer №1

Answer №2

Answer №3

Similar questions

Store fresh JSON information in a newly created JSON document

Gather information from users using Node.js and integrate it with Stripe

Separate text by the number of letters in each word while ensuring that words are not split in half

What is the best way to add portfolio projects into a React application?

Adding a personalized service into a separate service within Angular 2

Guide to utilizing exact matching functionality in ExpressJs router

The initial res.body object in NodeJS is enclosed in quotation marks

Instructions on setting up a custom HTTPS server using the Alexa ask-cli

A more effective method for restricting the properties of a field in an aggregate query

Looking to place a global filter outside the primeNG table component?

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

Guide for displaying d3.js chart using a vue.js method and specifying the target div

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

What is the best way to trigger a function in the parent component using an event from the child component?

I prefer to avoid using the "#" sign in URLs

Using this functionality on a ReactJS Functional Component

The ReactJS code encountered an error when attempting to access the 'location' property of an undefined or null reference

simulate the act of clicking on a download link by utilizing a secondary click

Methods for establishing state within a React Native render function

Aggregating documents in MongoDB based on specific criteria shared by all members of the group