how to javascript data validation by cypress?

Question

I have a list, which lists getting from javascript. How to verify the javascript data by cypress. I am trying to automate a project. Attached are the features screenshot. how-to javascript data validation by cypress?

Answer 1

The test should generally follow the way you'd manually test the page, for example on first loading "North America" is the active page, so test that link is active.

Then test the content is correct, both titles and images, after that moving on to other tabs.

An example,

cy.visit('https://my-vacation.com/home')

cy.contains('a.js-tab-links', 'North America')
  .should('have.class', 'active')                  // this link is active after loading

// Titles on the page
cy.contains('Galveston Vacation Rentals')
cy.contains('Sedona Vacation Rentals')
//  ... same for remaining titles

// Images on the page
cy.get('img[src="galveston-island-historic-pleasure-pier.jpg"]')
// ... same for other images


// Other tabs
cy.contains('a.js-tab-links', 'South America')
  .click()                                      // activate this tab
  .should('have.class', 'active')

// Titles on the page
cy.contains('Peru Vacation Rentals')
cy.contains('Argentina Vacation Rentals')
//  ... same for remaining titles

// Images on the page
cy.get('img[src="machu-pichu.jpg"]')
// ... same for other images

You can break it up so that each section has it's own test

before(() => {
  cy.visit('my-vacation.html')  // visit once before all the tests
})

it('North America', () => {
  cy.contains('a.js-tab-links', 'North America')
    .should('have.class', 'active')                  // this link is active after loading

  // Titles on the page
  cy.contains('Galveston Vacation Rentals')
  cy.contains('Sedona Vacation Rentals')
  //  ... same for remaining titles

  // Images on the page
  cy.get('img[src="galveston-island-historic-pleasure-pier.jpg"]')
  // ... same for other images
})

it('South America', () => {
  cy.contains('a.js-tab-links', 'South America')
    .click()                                      // activate this tab
    .should('have.class', 'active')

  // Titles on the page
  cy.contains('Peru Vacation Rentals')
  cy.contains('Argentina Vacation Rentals')
  //  ... same for remaining titles

  // Images on the page
  cy.get('img[src="machu-pichu.jpg"]')
  // ... same for other images
})

Answer 2

You can directly assert any of the continents directly using eq -

cy.get('.location-selector ul li a').eq(0).should('have.text', 'North America')
cy.get('.location-selector ul li a').eq(1).should('have.text', 'South America')

And if you want to assert all the continents, you can also use a each and validate -

var continents = [
  'North America',
  'South America',
  'Europe',
  'Asia',
  'Australia/NZ',
  'Middle East/Africa',
]

cy.get('.location-selector ul li a').each(($ele, index) => {
  expect($ele.text().trim()).to.equal(continents[index])
})