CODEWITHSUNDEEP
javascriptcypress
Nico
Nico

Reputation: 319

How to properly add a class inside Cypress code

I am learning Cypress along with JavaScript. I am running into a problem that I am not certain how to search it into documentation. The site I started testing has the typical wait issues so I encountered a very good solution here.

Now my test is looking in this way

/// <reference types="Cypress" /> 

let appHasStarted
function spyOnAddEventListener (win) {
  // win = window object in our application
  const addListener = win.EventTarget.prototype.addEventListener
  win.EventTarget.prototype.addEventListener = function (name) {
    if (name === 'change') {
      // web app added an event listener to the input box -
      // that means the web application has started
      appHasStarted = true
      // restore the original event listener
      win.EventTarget.prototype.addEventListener = addListener
    }
    return addListener.apply(this, arguments)
  }
}

function waitForAppStart() {
    // keeps rechecking "appHasStarted" variable
    return new Cypress.Promise((resolve, reject) => {
      const isReady = () => {
        if (appHasStarted) {
          return resolve()
        }
        setTimeout(isReady, 0)
      }
      isReady()
    })
}


describe('Main test suite', () => {
    beforeEach(() => {
        cy.visit('http://mercadolibre.com.ar',{
             onBeforeLoad: spyOnAddEventListener
        }).then({ timeout: 10000 }, waitForAppStart)
    })

    it('search first scanner', () => {
        cy.contains('nav-search-input').type("scanner bluetooth para auto")
    })
})

The problem with this is, I should replicate spyOnAddEventListener, waitForAppStart and variable appHasStarted at the beginning of every source file but I want to avoid this. How could properly extend this functions as a part of the internal source project without replicating in every test source? I have tried to make a simple source JavaScript file at the root of the project but when I import it, Cypress clients give an unrelated plug error like this one:

enter image description here

Upvotes: 1

Views: 1256

Answers (1)

user9161752
user9161752

Reputation:

It looks like you've added the code to /cypress/plugins/index.js, but that is for task extensions (code that requires NodeJS access).

The two functions can be added to a file, ideally in the /cypress/support folder

wait-for-app-utils.js

let appHasStarted
function spyOnAddEventListener (win) {
  ...
}

function waitForAppStart() {
  ...
}

module.exports = {
  spyOnAddEventListener,
  waitForAppStart
}

test

import {spyOnAddEventListener, waitForAppStart} from '../support/wait-for-app-utils.js'

describe('Main test suite', () => {
  beforeEach(() => {
    cy.visit('http://mercadolibre.com.ar', {
       onBeforeLoad: spyOnAddEventListener
    }).then({ timeout: 10000 }, waitForAppStart)
  })

Another approach is to wrap it all up (including the visit) into a custom command. Now there's no need to export and import, the command will be available globally.

/cypress/support/commands.js

let appHasStarted
function spyOnAddEventListener (win) {
  ...
}

function waitForAppStart() {
  ...
}

Cypress.Commands.add('visitAndWait', (url) => 
  cy.visit(url, { onBeforeLoad: spyOnAddEventListener })
    .then({ timeout: 10000 }, waitForAppStart)
)

test

describe('Main test suite', () => {
  beforeEach(() => {
    cy.visitAndWait('http://mercadolibre.com.ar')
  })

Upvotes: 2

Related Questions