How to use this._handleDownloads method in Cypress

Since it works when the intercept is moved up in the command order, it seems that cy.waitLoading() triggers the POST and not cy.get('[data-cy=alreadysent-button]').

The intercept must always be set up before the trigger (page visit or button click).

But the intercept varies between tests, so instead of before() I would try setting up a helper function that is called at the top of each test.

const loadAndIntercept = (apiResult) => {     
  const apiFixture = apiResult ? 'test/alreadySent-true.json' : 'test/alreadySent-false.json';
  cy.intercept('POST', '**/test/alreadySent', { fixture: apiFixture }).as('alreadySent');
  cy.waitLoading();
})

it('false test', function() {
  loadAndIntercept(false);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

it('true test', function() {
  loadAndIntercept(true);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

This should work since intercepts are cleared between tests. Ref docs - intercept

Note: all intercepts are automatically cleared before every test.

This looks like the culprit cy.get('table#return-request-list').find('tr').eq(1). You get the row you want to delete, you delete it, then you wrapping the delete row element even though it does not exist. So it will return undefined. You should instead get all rows initially.

function deleteTheNewestRequest(){
    // get all rows in table
    cy.get('table#return-request-list').find('tr').then( rows => {
        // get last row and store rowId
        cy.wrap(rows).last().find('td').first().invoke('text').as('deletedRowId')
        cy.wrap(rows).last().find('a[title="Delete"]').click()
        cy.get('button.btn-delete-return-request').click()
        // check new last row does not have same rowId
        cy.wrap(rows).last().find('td').first().should('not.have.text', this.rowId)
    })
}

I had the exact same problem and found @Richard Matsen's answer very useful, however when using the whitelist option it isn't possible to access proxy.request, which returns undefined. But if you use onRequest instead of whitelist, you can access the request and thus implement any action depending on that request's body.

So this should work:

cy.server({
  onRequest: (xhr) => {
    xhr.url = xhr.url + 
      xhr.request.body.action  == 'CARD_TRANSACTION_HISTORY' ? '?transactionHistory'
      : xhr.request.body.action  == 'CARD_BALANCE' ? '?balance'
      : xhr.request.body.action  == 'CURRENCY_RATES' ? '?currencyRates'
      : ''
  }
})

I had the same question, and couldn't quite square the accepted answer with what I saw happening (in Cypress 9.2.1).

It turns out that when a .js file is given as a fixture, cypress eval()s the content of the file (actually, it uses eval-with-parentheses), and uses whatever object this results in. So it is possible to have a file user-details.js, which looks like

[{name: "Bob", age: 30 + 5}]

or even execute some "real" code:

["Bob", "Rob", "Job"].map((name, index) => ({user: name, age: 20 + index}))

or

(() => {
    const users = ....
    return users
})()

It should be noted that it's not as flexible as you might want (e.g. you cannot import code, do asynchronous things, etc), but it's more than nothing.

The question is, should you....

Quite honestly, I think this is a great way to allow making your fixtures slightly more human readable, being able to add comments, and easy conversions. And you're not bothered by JSON's comma-stictness E.g

[
  // have a single user, because blah blah
  {name: "Bob", date_of_birth: new Date(1979, 5, 3).valueOf() / 1000},
]

(Date(1979, 5, 3) is much better human-readable than some unix timestamp (even though it means 5th of June, not 5th of May....))

I fully think that the .js fixture is a good way to do this (and would be even happier if it would just import the fixture as a module and use the default export as item or something, but eval is acceptable....), as long as the thing you're producing is constant! If you want something dynamic (or, probably, something constant that takes a bit more complexity to make), you're much better of with @seth-lutske 's suggestion (meaning that in your case, the accepted answer is what you need, however I wanted to document how .js fixtures work in case someone else came by).

Having said all this, it's questionable why cypress uses an eval() here, even though the suggested way is to use window.Function(); in addition, I wonder if you want to run the risk that down the line, some other developer (which includes future-you) decides to build a system that downloads your fixtures from some external website, which means that you created a nice security hole....

It's very informative to read the github issue on Javascript fixtures (I wish I had before I dove into all this myself); if you're looking for a good workaround, see this and this comment.

As a concrete answer to the question asked, the problem is that

eval(`data = {
  email: function () {
    const currentTimestamp = new Date().getTime();
    return \`test\${currentTimestamp}@test.com\`
  },
  firstName: 'Max',
  lastName: 'Mustermann',
  street: 'Some Street',
} `)

will return exactly that object, which should be accessible on this.userDetails. Therefore this.userDetails.data points to the data-field in this object, which is undefined.

The following would work:

user-details.js:

{
  data: {
    email: function () {
      const currentTimestamp = new Date().getTime();
      return `test${currentTimestamp}@test.com`
    },
    firstName: 'Max',
    lastName: 'Mustermann',
    street: 'Some Street',
  }
} 

(or, in case you want email to be a string rather than a function:

{
  data: {
    email: (function () {
      const currentTimestamp = new Date().getTime();
      return `test${currentTimestamp}@test.com`
    })(),
    firstName: 'Max',
    lastName: 'Mustermann',
    street: 'Some Street',
  }
} 

)

To perform the same test on all rows

• select all the rows (change [row-index="0"] to [row-index])
• use .each() to run test on all rows
• sub-select just the column you want, in case some other column also has the prefix and gives you a false-positive result
• use Array.some() method to check at least one prefix matches

const possibleProductPrefixes = ['AA', 'BB', 'CC']     // define once outside test

cy.get('div[row-index]')           // selects every row
  .each($row => {

    const $col = $row.find('[col-id="orderNumber"]')  // pick out the column
    const productId = $col.text().trim()

    const correctProductIDPrefix = possibleProductPrefixes.some(prefix => {
      return productId.startsWith(prefix)
    })

    expect(correctProductIDPrefix).to.be.true;
  });

Ref Array.prototype.some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

I think what you want to do is use cy.request() to test the link exist.

cy.visit(pasted-link-here) might be tricky if the link you need to test is outside the original domain, but cy.request() can give you a status code.

cy.window().then(win => {
  win.navigator.clipboard.readText().then(urlFromClipboard => {
    cy.request(urlFromClipboard)
      .then(response => expect(response.status).to.eq(200))
  })
})

Actually, see here

cy.request() requires that the response status code be 2xx or 3xx

so you could just use this

cy.window().then(win => {
  win.navigator.clipboard.readText().then(urlFromClipboard => {
    cy.request(urlFromClipboard)
  })
})

and the test will fail if status code is a failure code.

So, it sounds like the optionalSlash should be in the string before label or count, and if label or count is missing, we skip adding the optionalSlash for that variable. If that's true, you could do a simple ternary when constructing the string.

`http://localhost:3000/web/reserve${
  label ? optionalSlash + label : ''
  }${
  count ? optionalSlash + count : ''}`

You can also use this Cypress plugin meanwhile Cypress does not support this feature natively: https://www.npmjs.com/package/cypress-fail-fast

Add the plugin to devDependencies:

npm i --save-dev cypress-fail-fast

Inside cypress/plugins/index.js:

module.exports = (on, config) => {
  require("cypress-fail-fast/plugin")(on, config);
  return config;
};

At the top of cypress/support/index.js:

import "cypress-fail-fast";

You can read the csv file from spec file using:

cy.readFile('file.csv')
  .then((data) => {
     cy.task('csvToJson', data).then((data) => {
            //process data
        })
   })

After that you create a task in plugins/index.js

csvToJson (data) {
  var lines=data.split("\n");
  var result = [];
  var headers=lines[0].split(",");
  for(var i=1;i<lines.length;i++){

      var obj = {};
      var currentline=lines[i].split(",");

      for(var j=0;j<headers.length;j++){
          obj[headers[j]] = currentline[j];
      }
      result.push(obj);
  }
  // console.log(result)
  return result
}

This will will do the job