How to use formApplicationPath method in Cypress

Not familiar with SystemJS or your app, but if we assume you're doing some asynchronous work on load, you can set up some global property which indicates whether the app is ready or not.

// your main.js
let _appReadyResolver;
window.APP_READY = new Promise( resolve => _appReadyResolver = resolve );

// do some async setup
setTimeout(() => {

    _appReadyResolver();
});

Then, in your tests:

cy.visit("/")
    // by default will wait 4sec for APP_READY prop to exist on
    //  window object (unfortunately I don't know how to increase timeouts
    //  of `cy.its` command)
    // After that, it will wait indefinitely for your promise to resolve
    .its("APP_READY")

That being said --- if you're not doing any async setup in your app, but the main.js is simply being loaded asynchronously and it can take longer than 4sec, then I'd do this:

// index.js
<script>
  SystemJS.import('/js/main.js');
  window.APP_READY = new Promise( resolve => {
    let interval = setInterval(() => {
        if ( window.MAIN_READY ) {
            resolve();
            clearTimeout(interval);
        };
  }, 100 );
</script>

// main.js
window.MAIN_READY = true;

You'll want to strip the APP_READY logic from production build.

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 would say to.contain.keys can't be applied to the array, but only the first object within the array.

Try splitting out that first item.

const jsonData = [{  
  "Breakfast": "Cereal",
  "Lunch": "Chicken",
  "Snack": "Biscuit",
  "Dinner": "Pork",
  "Drinks": "Water"
}]

expect(jsonData).to.be.an('array')

const firstItem = jsonData[0]
expect(firstItem).to.contain.keys('Breakfast')

Syntax for chai keys assertion

Reading the docs, I'm not sure to.contain.keys is correct syntax either.

Try

expect(firstItem).to.include.any.keys('Breakfast')

Simplest method

You can assert that "Breakfast" exists by comparing it to undefined

First object:

expect(jsonData[0].Breakfast).to.not.eq(undefined)

Every object in the array

jsonData.forEach(item => {
  expect(item.Breakfast).to.not.eq(undefined)
}

You should ensure your server is running before calling cypress run using a utility like wait-on or start-server-and-test.

Cypress's check on the baseUrl is a final courtesy check just so you don't run through your whole test suite on a server that is not running.

For tips on ensuring your server is running before running Cypress, check out the Cypress docs here: https://on.cypress.io/continuous-integration#Boot-your-server

Well this seems to work, so it tells me I have some more to learn about .should()

cy.get('.check-box-sub-text').should('not.exist');

For text comparison, instead of using OR approach, I suggest using lowercase comparison by having the expected text and actual text to be compared in the lowercase version. This is a cleaner approach.

cy.get(element).invoke('text').should(text => {
  expect(text.toLowerCase()).to.contain(search_word.toLowerCase());
})

another alternative is using regex

cy.get(element).invoke('text').should('match', /(h|H)ot/);

I understand the pain. But to my best knowledge the auto-scan feature of cypress takes care of 're-run' of the tests as you update them. In other words, you launch the test only once using cypress open command and every time you update a test or tests, cypress UI will auto-refresh to fetch latest test code. If you changes made in a file that is being executed, then the active run will re-run automatically.

This feature is enabled by default, but for some reason is not working, check your env.json file and see below line points to true. For further reading refer cypress documentation

{
   watchForFileChanges: true
}

Coming to the injecting code from browser part, I don't think that is an option with cypress.

expect(lastArrayAmountValue).to.be.within(5,10)

https://docs.cypress.io/guides/references/assertions#BDD-Assertions

looks like that ability is built into cypress

This code will yield the DOM element with YOUR_BUTTON_CLASS which contains text 'Customer'. Is that what you're looking for?

cy.get('.YOUR_BUTTON_CLASS').contains('Customer');

Here the documentation for .contains cypress command.