How to use loadClientCertificateConfig method in Cypress

This is the basic structure of the dynamic test case creation spec. It is populated by a combination of environment variables and a file. The elements in the environment variable ids specify the key for the individual test cases' parameters which are provided in a separate file (also specified via an environment variable)). The ids are serialised and delimited through an outside script.

Call this script via:

$(npm bin)/cypress run --config-file cypress.json --headless --env ids=foo@bar@blah,paramsFile=myParamfile.json

features/test_xyz.js

let paramsFile = Cypress.env('paramsFile');
let ids = Cypress.env('ids');


describe('My test', () => {
  let params;

  before(() => {
    cy.task('readFileMaybe', paramsFile).then(fileContent => {
      if (fileContent === null) {
        throw new Error(`Could not find file ${paramsFile}.`);
      }
      // params = {id1: testcaseParam2, id2: testcaseParam2, ...}
      // `testcaseParamX` are objects or arrays and can therefore not be passed
      // easily into the test case via environment variables.
      params = JSON.parse(fileContent);
    });
  });

  // `ids` is a string -> needs to be split
  // e.g. `ids.split(delim).forEach(...)` to actually run.
  ids.forEach(id => {
    // Create test case.
    it(`test case for ${id}`, () => {
      let param = params[id];

      // run assertions here...
    });
  });
});

plugins/index.js (reference)

module.exports = (on, config) => {
  on('task', {
    // Needs to be done through a task, as we can't access `fs` in test case
    // (this task runs in Node which allows use of external libraries).
    readFileMaybe(filename) {
      // console.log('Loading ', filename);
      if (fs.existsSync(filename)) {
        return fs.readFileSync(filename, 'utf8');
      }
      // console.log('Could not find ', filename);
      return null;
    }
  });
};

This was extremely painful to get working. However, the ability to run commands outside of the Cypress context directly in Node is very powerful and can be used for similar problems, too. I hope others find this useful.

The trick to suppressing the verbiage in the log is to pre-test the condition,

cy.request('http://example.com')
  .its('body')
  .then(body => body.includes('Example'))    // map to a boolean
  .should(result => expect(result, 'Body contains "Example"').to.be.true)

results in

assert    Body contains "Example": expected true to be true

I tried the following command on my Mac and it worked:

npx cypress open

So both, the use across several steps of the same scenario, as well as scenario overlapping are possible with Cypress using Cucumber Preprocessor.

1. Use of values across multiple steps of the same scenario

Referring to the example from the question, the Order_Id can be defined outside the steps and is thus accessible in the global scope from all steps. If I understood the code correctly, it would be something like this (probably unnecessary code commented out):

let Order_id;

Then("Get Data from page", () => {
  cy.get(".os-order-number").invoke("text").then(($Oid) => {
    let Order = $Oid.text();
    Order_id = Order.replace(/[^0-9]/g, "");
    // cy.wrap(Order_id).as("Orderinfo");
  });
});


Given("Go to Login", () => {
  cy.visit("https://dev.simplifyshopping.com/register/");
});

When("Paste variable here", () => {
  cy.wait(2000);
  // cy.wait("@Orderinfo")
  // cy.get("@Orderinfo")).then((Orderinfo) => {
  //  console.log(Orderinfo);
  //  cy.get("#id_email").type(Orderinfo);
  // });

  console.log(Order_id);
  cy.get("#id_email").type(Order_id);
});

2. Use of values across scenarios (hold state across tests)

To make certain values accessible across the execution of different scenarios, for example, a helper.js file can be created containing the following code:

export const stateStore = {};

Inside your step definition files, you can then import the stateStore and fill it with values as you like:

import { Given, When } from 'cypress-cucumber-preprocessor/steps';
import { stateStore } from '../helpers';

// step used in first scenario
Given('some value is made available in scenario 1', () => {
  stateStore.someValue = 'this is a value';
});

// step used in second scenario
When('this value can be used in another step of scneario 2', () => {
  console.log(`Print some value: ${stateStore.someValue}`);
});

While investigating to post the question, I came up with a simple solution to this problem. The subject is an object which has a selector, so you can use that selector with cy.get(subject.selector) to get the Dom Element:

Cypress.Commands.add('fillInput', {prevSubject: 'element'}, (subject, value) => {
  cy.get(subject.selector).clear().type(value);
});

I think this is not a lot of clear and more people may have this issue, so I leave my solution here.

You can write something like:

cy.request({
  body: {},
  failOnStatusCode: false,
}).then((res) => {
  if (res.status == 404) {
    cy.log(JSON.stringify(res.body)) //prints the response body
    cy.log(res.body.name) //prints name
    cy.log(res.body.message) //prints message
  } else {
    //Do Something else
  }
})

The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.

cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {

  const $body = $element.contents().find('body')

  let stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(1).click().type('4242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(2).click().type('424')
})

However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):

Big Thanks to @Vedelopment @brian-mann !

I tested with react-stripe-checkout component and it works.

Just add some solution details so it may save others some time.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951

// /plugins/index.js

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");
      return args;
    }
  });
};

You can achieve aliases/variables and get. The trick is that get, invoke, or similar are effectively async and you can't really effectively await cypress operations. Instead you can get the first number, parse it, get the second number, parse it, add the numbers and assert/expect:

const expectedTotal = 42;

// get element with id #num-1
cy.get('#num-1').then(($num1) => {
  // parse text to int/number
  const num1 = parseInt($num1.text());

  // get element id #num2
  cy.get('#num-2').then(($num2) => {
    // parse text to int/number
    const num2 = parseInt($num2.text());
    
    // expect/assert number total equal to some expected total
    expect(num1 + num2).toEqual(expectedTotal);
  });
});

Hopefully that helps!

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',
  }
} 

)