How to use firefoxUtil.collectGarbage method in Cypress

This error is caused by the presence of modern keywords like "import" and "export" when Cypress runs in the browser. Unlike Selenium or Protractor -- it actually runs inside the browser. Since browsers don't support modern JS yet, you'll need to use webpack or browserify to transpile your code.

https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

Here is a fantastic blog post on how to get Cypress to work with modern JS and Typescript using webpack: https://glebbahmutov.com/blog/use-typescript-with-cypress/

^^ The post is focused on TypeScript, but the configuration options for Javascript will be similar.

The following npm packages must be installed and in your package.json:

"@cypress/webpack-preprocessor": "^4.1.0",
"cypress": "^3.3.1",
"ts-loader": "^6.0.3",
"typescript": "^3.5.2",
"webpack": "^4.34.0"

Webpack should be installed using:

npm install --save-dev webpack typescript ts-loader
npm install --save-dev @cypress/webpack-preprocessor

The following should be present under the "compilerOptions" section of a file called tsconfig.json in your root directory, with "allowJs" set to true for non-typescript users:

"module": "es6",
"target": "es6",
"types": ["cypress"],
"allowJs": true

A file called "webpack.config.js" should be present in your root directory with the following:

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

And these exports should be present under cypress/plugins/index.js:

const webpack = require('@cypress/webpack-preprocessor')
module.exports = on => {
  const options = {
    // send in the options from your webpack.config.js, so it works the same
    // as your app's code
    webpackOptions: require('../../webpack.config'),
    watchOptions: {}
  }

  on('file:preprocessor', webpack(options))
}

Note this final bit at the end of the Cypress plugins file,

on('file:preprocessor', webpack(options))

That is where Cypress is told to process your modern JS code in such a way as to make it Cypress-runnable.

The Cypress .get() command accepts complex selector arguments. So if you wanted to trigger a click on an element that has red, trash and icon classes, you could do the following:

cy.get('.red.trash.icon').click()

Yes, there is. Cypress is actually running in the browser, and although commands are queued asynchronously, you can queue up native JS code to be run, like so:

cy.get("html").then(() => {
    document.querySelector("div.myDiv").innerHTML = "...";
    // ...
});

If you are trying to target or modify a specific element, you can get it via Cypress to take advantage of automatic retries to wait for the element to exist before operating on it:

cy.get("div.myDiv").then(elem => {
    elem.innerHTML = "...";
    // ...
});

There are few mistakes that you have done in both of your trials. To explain it I'll break your code into 4 parts ( block 1 )

//Step 1
cy.getR6('contact-lastName').clear().type('TestarNameChange').then((nameCheck) => {

//Step 2
  cy.getR6('contact-lastName').invoke('text').as('nameCheck');

//Step 3
  cy.get('.r6modal-buttons-right > .r6btn').click();
  cy.get('.r6loader').should('not.be.visible');

//Step 4
  cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(this.nameCheck);
})

Step 1 - You try to type the values in the nameCheck input box and you refer the input box element with nameCheck inside .then ( There is no error in this step )

Step 2 - You try to get the typed last name value and assign it to Alias.

Mistakes

• You can get the text values of an element using invoke('text') if the value you want is a button name, paragraph text, etc. Ex: (<button>Name</button> will return "Name" with invoke('text')) But here I believe you need the value of the input box. In that case, you need to use invoke('attr','value'). (Here you don't even have to do it, will add the improved code bellow)

Step 3 - You click a button and wait till the loader is not displayed. This step also have no errors.

Step 4 - You are trying to validate the existence of the value using the previously created alias

Mistake

• This is one of the common mistakes that cypress developers do. You need to understand the asynchronous nature of cypress. In your code, in execution from step 2 to step 4, all will be executed asynchronously. Which means when you use this.nameCheck, nameCheck is not defined. So you need to wait until aliases are created before using them (you can use .then to achieve it)

I'm adding the fixed code below. I have done a few modifications too.

    //type the last name and refer the lastname object with the name "lastName"
    cy.getR6('contact-lastName').clear().type('TestarNameChange').then((lastName) => {

        //extract the value of lastname object with .val() and wrap it with cy.wrap
        // assign the wrapped value to aliase named "nameCheck"
        //You can use  cy.getR6('contact-lastName').invoke('attr','value').as('nameCheck');insted of the below code too
        cy.wrap(lastName.val()).as('nameCheck').then(() =>{

        //As you can see, since we used .then, the next steps will be executed after the aliase is created
        cy.get('.r6modal-buttons-right > .r6btn').click();
        cy.get('.r6loader').should('not.be.visible');
        cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(this.nameCheck);
        })
      })

In your second code, one of the mistakes that you have done is using this. to refer the defined variable.

And the other mistake is using .text() to extract the value of input field (var nameCheck = $div.text()). You should use .val()

So if we do the same steps of block 1, according to your second try, it will look like.

        cy.getR6('contact-lastName').clear().type('TestarNameChange').then(($div) => {
            var nameCheck = $div.val()
            cy.get('.r6modal-buttons-right > .r6btn').click();
            cy.get('.r6loader').should('not.be.visible');
            cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(nameCheck);
        })

By any chance, if you want to use cy.getR6('contact-lastName').invoke('attr','value').as('nameCheck'), you can change my first samle like this,

    //Type text
    cy.getR6('contact-lastName').clear().type('TestarNameChange');
    //create alias and continue
    cy.getR6('contact-lastName').invoke('attr','value').as('nameCheck').then(() =>{
    cy.get('.r6modal-buttons-right > .r6btn').click();
    cy.get('.r6loader').should('not.be.visible');
    cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(this.nameCheck);
    })

This looks over complicated. I would approach it by waiting for initialValue, then waiting for a different value.

cy.get('input').should('have.value', 'myInitialValue');     // wait for initial value
cy.get('input').should('not.have.value', 'myInitialValue'); // wait for it to change

.should() will retry the assertion up to 4 seconds.

If by 'several seconds' you mean more than 4, you can add a timeout option, which is better than an arbitrary wait because it will continue as soon as the assertion passes.

I'm assuming your element is an input since you are accessing val not text.

To get elegant log of conditions, use Cypress.log

getUserFirstName(textInput) {
  cy.get('[testid="user-self-update-form"]')
    .find('input[name="firstName"]')
    .clear().type(textInput).blur()
    .invoke('val')
    .then(val => {

      // Conditions
      const lettersOnly = val.match(/[a-zA-Z]+$/)
      const correctLength = val.length > 1 && val.length < 20

      Cypress.log({
        name: 'firstNameCheck',
        displayName: `Testing "${textInput}"`,
        message: ` - lettersOnly: ${lettersOnly ? 'pass' : 'fail'}`
      })
      Cypress.log({
        name: 'firstNameCheck',
        displayName: `Testing "${textInput}"`,
        message: ` - correctLength : ${correctLength ? 'pass' : 'fail'}`
      })

      // now fail if you want, or omit this to perform next textInput
      expect( lettersOnly && correctLength ).to.eq(true)
    })
}

const textInputs = ['abcd123', '123', 'textwithmorethantwentyletters', 'belowtwenty']

textInputs.forEach(textInput => getUserFirstName(textInput))

You can also suppress the log of find, type, invoke with {log:false} option.

I take yield to mean 'pay it forward', whereas return = 'pay it back'.

See Core Concepts

Cypress commands are asynchronous and get queued for execution at a later time. During execution, subjects are yielded from one command to the next, and a lot of helpful Cypress code runs between each command to ensure everything is in order.

EDIT 2: This solution was written for Cypress ~3.6.0 or thereabouts so it's possible that newer versions of Cypress work very differently internally, even if you fix some superficial incompatibilities of this code.

EDIT: often someone suggests using Promise.all, which is not a correct solution. Cypress chainer objects aren't Promises/A+-compatible, they simply appear to be promises because they implement .then interface. That's why Promise.all is able to consume an array of chainer objects, but that's it. The resolution values passed to Promise.all().then callback is not going to be what you expect (see https://github.com/cypress-io/cypress/issues/915).

You can use a helper I've suggested in a similar answer:

// put this in cypress/support/index.js

const chainStart = Symbol();
cy.all = function ( ...commands ) {
    const _           = Cypress._;
    const chain       = cy.wrap(null, { log: false });
    const stopCommand = _.find( cy.queue.commands, {
        attributes: { chainerId: chain.chainerId }
    });
    const startCommand = _.find( cy.queue.commands, {
        attributes: { chainerId: commands[0].chainerId }
    });
    const p = chain.then(() => {
        return _( commands )
            .map( cmd => {
                return cmd[chainStart]
                    ? cmd[chainStart].attributes
                    : _.find( cy.queue.commands, {
                        attributes: { chainerId: cmd.chainerId }
                    }).attributes;
            })
            .concat(stopCommand.attributes)
            .slice(1)
            .flatMap( cmd => {
                return cmd.prev.get('subject');
            })
            .value();
    });
    p[chainStart] = startCommand;
    return p;
}

usage:

it('test', () => {
    const urls = [
        'https://en.wikipediaaa.org',
        'https://en.wikipedia.org'
    ];

    cy.all(
        ...urls.map(url => cy.request(url))
    ).then(responses => {
        responses.forEach( resp => {
            expect(resp.status).to.eq(200);
        });
    });
});

That being said, you can also do this:

const urls = [
    'https://en.wikipediaaa.org',
    'https://en.wikipedia.org'
];

let passes = 0;

urls.forEach( url => {
    cy.request(url).then( resp => {
        if ( resp.status === 200 ) passes++;
    });
});

cy.then(() => {
    expect(passes).to.eq(urls.length);
});

The cy.all helper atop is really useful if you want to access the results without having to keep around globals and accessing them from a cy.then() callback --- but like I've shown in the last example, everything can be worked around using just vanilla cypress.

Or, if you don't need responses at all, you can simply do:

const urls = [
    'https://en.wikipediaaa.org',
    'https://en.wikipedia.org'
];
urls.forEach( url => {
    cy.request(url).its('status').should('eq', 200);
});

Is the cy.preserveAllCookiesOnce() a custom command that you created in your Cypress's project? Note that you should use Cypress.Cookies.preserveOnce() instead:

beforeEach(function () {
    // before each test, we can automatically preserve the
    // 'session_id' and 'remember_token' cookies. this means they
    // will not be cleared before the NEXT test starts.
    //
    // the name of your cookies will likely be different
    // this is an example
    Cypress.Cookies.preserveOnce('session_id', 'remember_token');
})

To enable or disable cookie debugging, use Cypress.Cookies.debug().

// Cypress will now log in the console when
// cookies are set or removed
Cypress.Cookies.debug(true)

cy.setCookie('fakeCookie', '123ABC')
cy.clearCookie('fakeCookie')
cy.setCookie('fakeCookie', '123ABC')
cy.clearCookie('fakeCookie')
cy.setCookie('fakeCookie', '123ABC')

You can read more about Cypress.Cookies's API here.