How to use stripLeadingCyDirs method in Cypress

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)')

Maybe someone had the same issue we were facing which is that the cypress.json file was not in the root. We had it in the cypress folder. Once moved to the root folder, cypress was able to find the file and therefore also the baseUrl.

A couple of problems with the custom command

• to make sure you wait on the results of .each(), must return the promise created bt Cypress.Blob.canvasToBlob() chain.

• follow the .each() with a .then() to ensure completion, and return `bufferMap here.

Problems with .task()

• it does not like being called within the custom command, so call it after

  CypressError: cy.then() failed because you are mixing up async and sync code.

• it does not like a Map() object as a parameter, convert to a plain object

Test

describe('leaflet', () => {

  it('processes', () => {

    Cypress.Commands.add('renderCanvasMatrixToPng', {prevSubject: true}, (subjects, savePath) => {
      const bufferMap = new Map();
      cy.wrap(subjects)
        .each((canvas, i) => {
          return Cypress.Blob.canvasToBlob(canvas.get(0))   // <- add return here
            .then(blob => Cypress.Blob.blobToArrayBuffer(blob))
            .then(buff => {
              var view = new Int8Array(buff);  // not sure why this is needed
              const buffer = Buffer.from(view);

              // get coords here
              const coords = 1000 + i // for purpose of demo
              bufferMap.set(coords, buffer)
            })
        })
        .then(_ => {                           // <- wait for previous to complete
          console.log('bufferMap inside command', bufferMap)  // [[Entries]]
                                                              //  0: {0 => Uint8Array(27209)}
                                                              //  1: {1 => Uint8Array(1179)}
          return bufferMap;
        })
    });

    cy.visit('http://cartodb.github.io/Leaflet.CanvasLayer/example.html')

    cy.get('canvas').renderCanvasMatrixToPng().then(bufferMap => {
      console.log('bufferMap outside command', bufferMap)  // [[Entries]]
                                                           //    0: {1000 => Uint8Array(25218)}
                                                           //    1: {1001 => Uint8Array(1179)}
      const asObject = Object.fromEntries(bufferMap);
      cy.task('mergeImages', { buffers: asObject, savePath: 'cypress/snapshots' });
    })

  })
})

Task for demo

module.exports = (on, config) => {
  ...
  on('task', {
    mergeImages(options) {
      const { buffers, savePath } = options;

      console.log('buffers', buffers);
      /* In terminal

        buffers {
          '1000': {
            type: 'Buffer',
            data: [
              137,  80,  78,  71,  13,  10,  26,  10,   0,   0,   0,  13,
              ... 33137 more items
            ]
          },
          '1001': {
            type: 'Buffer',
            data: [
              137,  80,  78,  71,  13,  10,  26,  10,   0,   0,   0,  13,
              ... 1079 more items
            ]
          }
        }
      */

      return null;
    }
  })
}

Alternative command (my preference)

Cypress.Commands.add('renderCanvasMatrixToPng', { prevSubject: true }, (subjects, savePath) => {
  const bufferPromises = Array.from(subjects).map(canvas => {
    return Cypress.Blob.canvasToBlob(canvas)
      .then(blob => Cypress.Blob.blobToArrayBuffer(blob))
      .then(buff => {
        const view = new Int8Array(buff);
        const buffer = Buffer.from(view);
        return buffer;
      })
  })
  return Promise.all(bufferPromises).then(buffers => {
    const bufferMap = new Map();
    buffers.forEach((buffer, i) => {
      // get coords here
      const coords = 1000 + i // for purpose of demo
      bufferMap.set(coords, buffer)
    })
    return bufferMap;
  })
});

I'm not sure if this solves the issue, but the way you use the alias is not correct. You need to cy.wait('@files') to get the value of the alias. cy.get('@files') is also correct syntax but will not work here since cy.fixture() reads from the disk (so you must wait for it to complete).

Since you use the files straight after loading them, get rid of the alias and use a .then() to wait

/*
  Fixture file contains:
  { 
    "uploadFilePng": "files/cypressFileUpload.png", 
    "uploadFileDmg": "files/cypressFileUpload.dmg", 
    ...
  }
*/

cy.fixture('files/cypressFileUpload').then(files => {
  const fileNames = Object.values(files);
  cy.wrap(fileNames).each(fileName => {
    console.log(fileName); // should see "files/cypressFileUpload.png", "files/cypressFileUpload.dmg"
    ...

I have to face this today. If you are getting a raw body response (string) you have to get the link in this way:

            const links = body.split("href=http://my.url.com");
            var activation_link = links[0].match(/\bhttp?:\/\/\S+/);
            activation_link= activation_link[0].replace('"','')
            cy.visit(activation_link)

this can be done more easily than that : in your cypress.json add

"env": {
   "YourVarName":"YourVarValue"
}

And in your code you can access to your var with :

const myGolabalVar = Cypress.env("YourVarName")

That's all you need

I think there are two buttons with btn-primary class in your popup DOM (yes and cancel?). Try to access the yes confirmation button by its id or something. Or if you're sure about the order, then use .first() or .last() like you used for clicking the delete button.

Both are utility commands from cypress package, can be performed in the same way (chained off of cy or off another command) and there is no timeout period. But the difference are:

• pause() will stop the test execution to inspect the web application, the DOM, the network, whereas debug() will stop only when the developer tools are open
• pause() does not provide any debug information, whereas debug() give the details in browser console tab
• Using pause() we can find 'next' button option in the test runner, which allow us to execute the code step by step, debug() doesn't have the feature.

Thank you for the help everyone! With your suggestions, I was able to translate what I needed to write in Cypress.io to make this idea work and it came down to writing this inside of the commands.js file in the support directory:

Cypress.Commands.add('getDataE2EID', function (id) {
  return cy.get(`[data-e2e="${id}"]`)
})

cy.getDataE2EID('first-div-element') <--- will get me the first div

Now, I can have a custom cypress function that allows me to pass in whatever value I want where the key is 'data-e2e'.