An icon exists in all pages, how to code this without using repetitive code?

Question

I have a small chat icon shown in all web pages. How to write in Cypress?

The small chat icon has class of Widget and it should be found in all pages.

I could write something like this below, but I wonder if there is any other way to get rid of repetitive should('have','Widget') although, at this point I'm not even sure if using should('have','Widget') is a correct practice but it works.

cy.get('.pageA').should('have.value', 'Widget')
cy.get('.pageB').should('have.value', 'Widget')
cy.get('.pageC').should('have.value', 'Widget')
cy.get('.pageD').should('have.value', 'Widget')

I am using Cypress with Cucumber Preprocessor.

Answer 1

If the assertions line up within a single test, you can take a data-driven approach

['.pageA', '.pageB', '.pageC', '.pageD'].forEach(page => {

  cy.get(page).should('have.value', 'Widget')

})

or if you want individual tests

['.pageA', '.pageB', '.pageC', '.pageD'].forEach(page => {

  it(`Page ${page} has the icon`, () => {
    cy.get(page).should('have.value', 'Widget')
  })

});

A more concrete example from a Cypress tutorial,

it.only('Handles filter links', () => {
  const filters = [
    {link: 'Active', expectedLength: 3},
    {link: 'Completed', expectedLength: 1},
    {link: 'All', expectedLength: 4}
  ]
  cy.wrap(filters)
    .each(filter => {
      cy.contains(filter.link)
      .click()

      cy.get('.todo-list li')
      .should('have.length', filter.expectedLength)
    })
})

Answer 2

You can make use of custom commands to avoid writing reusable code. You can go to cypress/support/commands.js and write:

Cypress.Commands.add('checkChatIcon', (page) => {
  cy.get(page).should('have.class', 'Widget')
})

In your tests you can just write:

cy.checkChatIcon('.pageA') 
cy.checkChatIcon('.pageB')

Answer 3

You should think about the mechanism that puts the icon on all pages and just test that.

If you have to do something for each page you write to ensure the icon is present then you will need to test every page.

If you have done something so that every page you write automatically has the icon then you only need to test the thing you have done. In this case it might be easier to write a unit test to test this something, as its probably something higher up your platforms code hierarchy than the rendering a single page.

Other approaches you could consider is alternatives to testing every page are

• randomizing the page choice so each run tests a random page
• creating a @slow test that tests every page that you run infrequently
  • you could get a list of pages for this using a spider, or by other methods
  • you could combine tests for other global things using this mechanism

In general testing every page for a piece of common content is very poor practice. It creates a large run-time overhead that scales terribly and provides very little benefit.