How to use setConfigEnv method in Cypress

By default, Cypress plugins file is run in the Node that's bundled alongside with Cypress's Electron app.

Youcan work around this in two ways:

1. Auto-compile files imported into the plugins file, by using @babel/register plugin. Remember, this workaround won't work for the plugins file itself.

   First, install it:

   npm install -D @babel/register @babel/plugin-proposal-object-rest-spread
   

   Then, on top of your plugins/index.js, do (babel@7):

   require("@babel/register")({
       plugins: [ "@babel/plugin-proposal-object-rest-spread" ]
   });
   

   https://babeljs.io/docs/en/next/babel-register.html

2. Run the plugins file using your system's Node executable.

   Cypress allows you to set nodeVersion configuration, which controls this behavior.

   E.g., set in cypress.json:

   {
       "nodeVersion": "system"
   }
   

   Note: this of course works only if your system's Node already supports that feature.

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

As far as I know, this would be the "Cypress" way to access data stored in a json file.

ref: https://docs.cypress.io/api/commands/fixture.html#Accessing-Fixture-Data

cy.fixture('user').then((user)  => {
    var name = user.name
    var pass = user.password
})

Where 'user' is /fixtures/user.json

{
    "name": "username",
    "password": "password1234"
}

Cypress commands work the same way as Promises. You need to return a Promise when inside a then() callback. See doc here.

You may use cy.wrap($text).invoke('text') inside your then() callback instead of returning a string. But then, your click() would not work because your then() would yield a text value that cannot be clicked.

I suggest not using the within() and working directly with the elements. You'll end up with the same result, but with less complexity. I use the within() command when I need to perform several actions on several elements within a div container for example.

You can perform what you need with default commands instead of a function:

let mixLocator = listLocator + ' ' + elementLocator;
cy.get(mixLocator).its('length').then(elementCount => {
    let selected = Cypress._.random(elementCount - 1); // lower = 0 is default
    cy.get(mixLocator).eq(selected).click().invoke('text').as('selectedText'); // saving the text as an alias to be used later
});

Here, the invoke('text') should still work even if it is after the click(), but it is impossible to do the opposite invoke('text').click() because the invoke('text') command yields a string. If it doesn't, call it once to get the text and again to click it:

cy.get(mixLocator).eq(selected).invoke('text').as('selectedText');
cy.get(mixLocator).eq(selected).click();

or:

cy.get(mixLocator).eq(selected).then(selectedElement => {
    cy.wrap(selectedElement).invoke('text').as('selectedText');
    cy.wrap(selectedElement).click();
});

You may then use your saved alias later:

cy.get('@selectedText').then(selectedText => {
    // use selectedText here
});

I often prefer to chose random elements in our tests to have a better coverage. I came up with a custom commands:

commands.js

Cypress.Commands.add('any', { prevSubject: 'element' }, (subject, size = 1) => {
  cy.wrap(subject).then(elementList => {
    elementList = (elementList.jquery) ? elementList.get() : elementList;
    elementList = Cypress._.sampleSize(elementList, size);
    elementList = (elementList.length > 1) ? elementList : elementList[0];
    cy.wrap(elementList);
  });
});

I use it like this:

cy.get(elementLocator).any().click();

or

cy.get(elementLocator).any(5).each(randomElement => {
    cy.wrap(randomElement).click();
});

Under the hood cy.clear() is using cy.type('{selectall}{del}'), so you can avoid the wait on clearing by checking for that text.

Cypress.Commands.overwrite("type", (originalFn, subject, text, options) => {
    if (text === '{selectall}{del}') {
      console.log('clearing')
      return originalFn(subject,text,options)   // explicit return required
    } else {
      cy.wait(0).then(() => originalFn(subject,text,options))  // return value is queued
    }
  }
)

Tested with

<html>
<body>
  <input value="something"/> 
</body>
</html>

cy.get('input')
  .clear()
  .then(input => { 
    expect(input.val()).to.equal('')
    return input
  })
  .type('name')
  .then(input => { 
    expect(input.val()).to.equal('name')
    return input
  })
  .type('{selectall}{del}')
  .then(input => { 
    expect(input.val()).to.equal('')
  })

Are you sure that this line is correct? Otherwise the cy.wait won't function as you want.

cy.route('POST','/ajax.php').as('request');

I expect something like

cy.route('GET','/endpoint').as('request');

You can lookup what route is it via developer tools (F12 in Chrome). Go to network to monitor what kind of XHRs load when you open your page.

Find out request URL and Method - example with bing.com

Also: I prefer to include the cy.server() and cy.route() command in the beforeEach. Then you only need the cy.wait() in the test itself. See https://docs.cypress.io/guides/references/best-practices.html#2-Run-shared-code-before-each-test for more information about that.

You should be able to find an <input> within the <div>.

Not sure exactly what selectors you used, but this would be an example:

cy.get('div.mat-form-field-infix')
  .find('input')
  .type('21-10-2022')

For the record, I found a great example here

Cypress examples (v9.4.1) - Form validation

<form id="form-validation" action="/action_page.php">
  <div>
    <label for="item">Item:</label>
    <input id="item" type="text" name="item" required />
  </div>

cy.get('#item:invalid')
  .invoke('prop', 'validationMessage')
  .should('equal', 'Please fill out this field.')

Seems you're importing app variable on the test directly. This object is a different one than the one on your browser. You should make a global variable (or method) for getting your app variable directly from your browser

cy.window().its('app').then((app) => { 
   // your test with app var
})

Also you might want to use then() condition to ensure it checks it after. But this may not be necessary.

.click({ force: true }).then(() => {
   expect(displayMovieInfo).to.be.called;
});