How to use hasCloudflareEnvironmentVars method in Cypress

This is a test comparing two generated strings and if they are not equal after clicking a button:

    it('Test generating new password', () => {
        let password1;
        cy.get('#password').should(($div) => {
            password1 = $div.text();
        });
        cy.get('#generate-button').click();
        cy.get('#password').should(($div) => {
            const password2 = $div.text();
            expect(password1).not.equal(password2);
        });
    });

Using the Plaid demo page as a test app and following the steps in Working with iframes in Cypress, I managed to get a consistently working test.

From the blog, I used this sequence to ensure the iframe body has fully loaded

iframe -> body -> should.not.be.empty

The page loads a placeholder first while is waits for a GET request to complete, so just getting a loaded iframe body is not sufficient.

placeholder

<p>iframe placeholder for https://cdn.plaid.com/link/v2/stable/link.html?isLinkInitialize=true&origin=https%3A%2F%2Fplaid.com&token=link-sandbox-170bce6a-fe90-44a4-8b8a-54064fbc8032&uniqueId=1&version=2.0.917</p>

We need to wait for the "Continue" button, which takes a bit of time to show so give it a long timeout.

Using .contains('button', 'Continue', { timeout: 10000 }) actually returned two button, although there is only one visible.

I changed the button selector to use an id and all works consistently.

The test

cy.visit('https://plaid.com/demo/?countryCode=US&language=en&product=transactions');

cy.contains('button', 'Launch Demo').click()

cy.get('iframe#plaid-link-iframe-1', { timeout: 30000 }).then(iframe => {

  cy.wrap(iframe)                   // from Cypress blog ref above
  .its('0.contentDocument.body')
  .should('not.be.empty')           // ensure the iframe body is loaded
  .as('iframeBody')                 // save for further commands within iframe.body

  //.contains('button', 'Continue', { timeout: 10000 })     // returns 2 buttons!

  .find('button#aut-continue-button', { timeout: 10000 })   // this is the best selector

  .click()

  cy.get('@iframeBody')
    .contains('h1', 'Select your bank')  // confirm the result of the click()


})

There is the oneOf assertion if an exact match is is acceptable.

cy.get('element')
  .should('satisfy', ($el) => {
    expect($el.text()).to.be.oneOf([value1,value2])
  })
  .click()

Considering response.body is an array, you can use a forEach loop to iterate through them:

responde.body.forEach(res => {
  expect(res.requestId).not.eq(value)
})

Now cy.server is deprecated, you can use cy.intercept instead:

cy.intercept('http://api.company.com/', (req) => {
  req.headers['authorization'] = `token ${token}`
})

More info in the docs.

To anyone looking for how to solve this like I was:

For some reason Cypress(I am using 3.8.2 and I am not sure what version cypress-sql-server author was using) doesn't see the custom property of 'db'.

One method(you can do this many ways) is to just require the cypress config in the plugins file and reference your custom property from there.

To do this just change the plugins/index.js to look like this:

const sqlServer = require('cypress-sql-server');
const dbConfig = require('../../cypress.json');

module.exports = (on, config) => {
  tasks = sqlServer.loadDBPlugin(dbConfig.db);
  on('task', tasks);
}

You should be using aliases as mentioned by Cypress here: https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Sharing-Context

because of the use of promises, Cypress methods do not return values directly. Aliasing allows you to:

cy.get(element).as("myAlias")
this.myAlias // works
cy.get("@myAlias") // works

You'll have to return the entire chain command of the subject you want to return.

Cypress.Commands.add('readContactInfo', (companyName) => {
  return cy.get('.simple-table__cell:nth-child(1)')
    .contains(companyName)
    .parent()
    // find command limited to previous subject
    .find('div')
    .eq(2)
    // will invoke .text() and return it
    .invoke('text')
})

Now whenever you use the custom command, the text will be returned.

cy.readContactInfo('Magazzini Alimentari Riuniti')
  .should('eq', 'text you want to verify 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
  }
})