How to use makeUserPackageFile method in Cypress

I ran into a problem almost like yours with before.

before() runs before the next block of code.

describe("Some test", function() {
    before(function() {
        //something ...
        cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
    })

    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser doesn't exist here
    it("Should bar", function() {
    })
})

I fixed my problem moving the before() statement out from the describe scope.

before(function() {
    //something ...
    cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
})

describe("Some test", function() {     
    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser also exists here
    it("Should bar", function() {
    })
})

I hope this can help you solve your problem.

I ran into a problem almost like yours with before.

before() runs before the next block of code.

describe("Some test", function() {
    before(function() {
        //something ...
        cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
    })

    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser doesn't exist here
    it("Should bar", function() {
    })
})

I fixed my problem moving the before() statement out from the describe scope.

before(function() {
    //something ...
    cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
})

describe("Some test", function() {     
    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser also exists here
    it("Should bar", function() {
    })
})

I hope this can help you solve your problem.

Just overwrite Date alone:

cy.clock(Date.UTC(2020, 6, 23), ['Date']);

Cypress works within the browser which means your test code is evaluated inside the browser. This means that anything that is not accessible in JavaScript is also likely not accessible to Cypress - although supporting native events is on Cypress' roadmap.

When you use .type() in Cypress, Cypress triggers all of the necessary events to simulate that behavior. Using the up/down arrows of the number input is a browser specific implementation and would require native event support for Cypress to implement this correctly.

That being said, you likely just want to test the behavior of your application when the up/down arrows are clicked (afterall - you do not need to test that the numbers go up and down since this is browser implementation). When the up and down arrows are clicked, a change event is triggered, so you could essentially test your application's behavior when the up/down arrow are clicked using the .trigger() command in the following way:

cy.get('input[type="number"]').type('1000').trigger('change')

Cypress' have.css uses chai-jquery which asserts computed value.

Thus, even though you've assigned translate(0%, 0px), it gets computed as none.

Alternatively, you could use assert like this:

cy.get('.myImage').should('have.attr', 'style').should('contain', 'transform: translate(0%, 0px)')

That means there's an issue with your cy.visit() command. The page is not being loaded before the test that's why

Add .length to your if statement

cy.get('li').each(($li) => {
  if ($li.has('span.imstuck').length) {
    cy.wrap($item).find('.imstuck').should('contain', 'Something')
  }
})

But may be better to move 'span.imstuck' up a level. This way you are only getting those element with the span.

cy.get('li span.imstuck').each(($span) => {
  cy.wrap($span).should('contain', 'Something')
}

Yes, there is. Cypress is actually running in the browser, and although commands are queued asynchronously, you can queue up native JS code to be run, like so:

cy.get("html").then(() => {
    document.querySelector("div.myDiv").innerHTML = "...";
    // ...
});

If you are trying to target or modify a specific element, you can get it via Cypress to take advantage of automatic retries to wait for the element to exist before operating on it:

cy.get("div.myDiv").then(elem => {
    elem.innerHTML = "...";
    // ...
});

Your app seems to be using pointer events, so try replacing mouse with pointer in all those event names.

Also, here's a more complete abstraction around drag-and-drop:

const dragTo = (subject, to, opts) => {

  opts = Cypress._.defaults(opts, {
    // delay inbetween steps
    delay: 0,
    // interpolation between coords
    steps: 0,
    // >=10 steps
    smooth: false,
  })

  if (opts.smooth) {
    opts.steps = Math.max(opts.steps, 10)
  }

  const win = subject[0].ownerDocument.defaultView

  const elFromCoords = (coords) => win.document.elementFromPoint(coords.x, coords.y)
  const winMouseEvent = win.MouseEvent

  const send = (type, coords, el) => {

    el = el || elFromCoords(coords)

    if (type.includes('drag') || type === 'drop') {
      return el.dispatchEvent(
        new Event(type, Object.assign({}, { clientX: coords.x, clientY: coords.y }, { bubbles: true, cancelable: true }))
      )
    }

    el.dispatchEvent(
      new winMouseEvent(type, Object.assign({}, { clientX: coords.x, clientY: coords.y }, { bubbles: true, cancelable: true }))
    )
  }

  const toSel = to

  function drag (from, to, steps = 1) {

    const fromEl = elFromCoords(from)

    const _log = Cypress.log({
      $el: fromEl,
      name: 'drag to',
      message: toSel,
    })

    _log.snapshot('before', { next: 'after', at: 0 })

    _log.set({ coords: to })

    send('mouseover', from, fromEl)
    send('pointerover', from, fromEl)
    send('mousedown', from, fromEl)
    send('pointerdown', from, fromEl)
    send('dragstart', from, fromEl)

    cy.then(() => {
      return Cypress.Promise.try(() => {

        if (steps > 0) {

          const dx = (to.x - from.x) / steps
          const dy = (to.y - from.y) / steps

          return Cypress.Promise.map(Array(steps).fill(), (v, i) => {
            i = steps - 1 - i

            let _to = {
              x: from.x + dx * (i),
              y: from.y + dy * (i),
            }

            send('mousemove', _to, fromEl)

            return Cypress.Promise.delay(opts.delay)

          }, { concurrency: 1 })
        }
      })
      .then(() => {

        send('mousemove', to, fromEl)
        send('pointermove', to, fromEl)
        send('drag', to, fromEl)
        send('mouseover', to)
        send('pointerover', to)
        send('dragover', to)
        send('mousemove', to)
        send('pointermove', to)
        send('drag', to)
        send('mouseup', to)
        send('pointerup', to)
        send('dragend', to)
        send('drop', to)

        _log.snapshot('after', { at: 1 }).end()

      })

    })

  }

  const $el = subject
  const fromCoords = getCoords($el)
  const toCoords = getCoords(cy.$$(to))

  drag(fromCoords, toCoords, opts.steps)
}

const getCoords = ($el) => {
  const domRect = $el[0].getBoundingClientRect()
  const coords = { x: domRect.left + (domRect.width / 2 || 0), y: domRect.top + (domRect.height / 2 || 0) }

  return coords
}

Cypress.Commands.addAll(
  { prevSubject: 'element' },
  {
    dragTo,
  }
)

Here's how you'd use it:

describe('mxGraph "ports" example', function () {
  beforeEach(() => {
    cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/ports.html')
    cy.get('div#splash').should('not.be.visible')
  })

  // Example #1 : FAIL
  it('#1 Create new object by dragging', function () {
    cy.get('div[id="sidebarContainer"]').find('img[title="Drag this to the diagram to create a new vertex"]').first()
    .dragTo('div[id="graphContainer"]')
  })
})