How to use stripProtocolAndDefaultPorts method in Cypress

You can use the Cypress.config() command.

To get baseUrl value use Cypress.config().baseUrl or Cypress.config('baseUrl').

Not sure what happens in your case. Here is the resolved settings when doing just npx cypress open

Now when I run with $ npx cypress open --env country=Canada here is the resolved settings tab

Sounds like you'll want to wait for the routes. Something like this:

cy.server();
cy.route('GET', '/api/route1').as('route1');
cy.route('GET', '/api/route2').as('route2');
cy.route('GET', '/api/route3').as('route3');

cy.get('button').contains('Filter').click();

// setting timeout because you mentioned it can take up to 15 seconds.
cy.wait(['@route1', '@route2', 'route3'], { responseTimeout: 15000 });

// This won't execute until all three API calls have returned
cy.get('#something').click();

If I add cy.wait(800) ... it works fine.

This is because you are not using Cypress commands with auto-retry inside getInDocument().

Cypress.$(selector) is jQuery, it just attempts to grab the element, not retry for async loading, and no test failure when not found.

Should use a proper command with retry, like

Cypress.Commands.add('getInDocument', { prevSubject: 'document' }, (document, selector) =>
  cy.wrap(document).find(selector)
)

or you might need to work from body

Cypress.Commands.add('getInDocument', { prevSubject: 'document' }, (document, selector) =>
  cy.wrap(document).its('body')
    .find(selector)
    .should('be.visible')
)

Without a test system I'm not sure exactly which one is correct syntax, but you get the idea.

Also, too many custom commands. You always follow .iframeLoaded() with .its('document'), so just wrap it all up in iframeLoaded custom command.

In fact, resolve(contentWindow.document.body) because it's a better point to chain .find(selector).

This is my test against the Stripe demo page,

Cypress.Commands.add('iframeLoaded', { prevSubject: 'element' }, $iframe => {
  const contentWindow = $iframe.prop('contentWindow')
  return new Promise(resolve => {
    if (contentWindow && contentWindow.document.readyState === 'complete') {
      resolve(contentWindow.document.body)
    } else {
      $iframe.on('load', () => {
        resolve(contentWindow.document.body)
      })
    }
  })
})

it('finds card number', () => {

  cy.viewport(1000, 1000)
  cy.visit('https://stripe-payments-demo.appspot.com/')
  cy.get('iframe')
    .should('have.length.gt', 1)  // sometimes 2nd iframe is slow to load
    .eq(1)
    .iframeLoaded()
    .find('input[name="cardnumber"]')
    .should('be.visible')
})

    class DndSimulatorDataTransfer {
  constructor(){
      this.data = {};

      this.dropEffect = 'move';
    
      this.effectAllowed = 'all';
      this.files = [];
      this.items = [];
      this.types = [];
  }
 

  clearData(format) {
    if (format) {
      delete this.data[format]

      const index = this.types.indexOf(format)
      delete this.types[index]
      delete this.data[index]
    } else {
      this.data = {}
    }
  }

  setData(format, data) {
    this.data[format] = data
    this.items.push(data)
    this.types.push(format)
  }

  getData(format) {
    if (format in this.data) {
      return this.data[format]
    }

    return ''
  }

  setDragImage(img, xOffset, yOffset) {}
}
  Cypress.Commands.add('reactDnd', {
    prevSubject: 'element',
  }, (sourceSelector, targetSelector, options) => {
    const dataTransfer = new DndSimulatorDataTransfer();
    const opts = {
      offsetX: 100,
      offsetY: 100,
      ...(options || {})
    };
    cy.wrap(sourceSelector.get(0))
      .trigger('dragstart', {
        dataTransfer,
      })
      .trigger('pointercancel', {
        dataTransfer,
        force:true,
      })
      .trigger('drag', {
        force:true,
        dataTransfer,
      })
      .trigger('dragenter', {
        force:true,
        dataTransfer,
      })
      .wait(100);
    cy.get(targetSelector).then($el => {
      const {
        x,
        y,
      } = $el.get(0).getBoundingClientRect();
      cy.wrap($el.get(0))
      .trigger('dragenter', {
        dataTransfer,
      })
      .trigger('drag', {
        dataTransfer,
      })
      .trigger('dragover', {
        dataTransfer,
      })
        .trigger('drop', {
          dataTransfer,
          clientX: x + opts.offsetX,
          clientY: y + opts.offsetY,
          force: true
        })
        .wait(1000);
        cy.wrap(sourceSelector.get(0)).trigger('dragend', {
          dataTransfer,
          force: true

        });
    })
  });

To make sure the value of number is passed on to the type, you have to add a then, something like:

let number

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber')
      .then((res) => {
        number = res.response.body.numbers.id
      })
      .then(() => {
        cy.get('#someELement').type(number)
      })
  })
})

If you want to use the variable globally throughout the project, you can use the Cypress.env() method. Cypress Docs.

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber').then((res) => {
      cypress.env('number', res.response.body.numbers.id) //Sets Number
    })
    cy.get('#someELement').type(Cypress.env('number')) //Gets Number and types it
  })

  it('some different test', () => {
    cy.get('#someELement').type(Cypress.env('number')) //types the number
  })
})

If your it() tests share the same domain, you should use traditional function declaration "function() {do smth}" so you can use this. context, just right after the describe() define let variable with no value. After that in .then() inside your test "it()" you can redefine variable value like this.str = value; This value will be saved and can be passed to other it();

Example:

describe('test', function() {
  let str;
  it('take value from input', () => {
    cy.visit('/');

    cy.contains('Forms').click();
    cy.contains('Form Layouts').click();
    cy.contains('nb-card', 'Using the Grid').find('[data-cy="imputEmail1"]').type('someemil@email.com').invoke('val').then((value) => {
      this.str = value;
    });
  });

  it('put value', () => {
    cy.visit('/');
    cy.log(this.str);
  });
});

Do it by chaining conversions methods to go from from element -> text -> number

cy.get(".badge.ml-1.badge-primary")
  .invoke('text')                    // to text
  .then(text => +text)               // to number
  .then(value => {
    if(value > 0) { 
      doFunction1()
    } else {
      cy.get(xxxxx)
    }
  })

Waiting for value 2

cy.get(".badge.ml-1.badge-primary")
  .invoke('text')                    // to text
  .then(text => +text)               // to number
  .should('eq', 2)                   // wait for value 2
  .then(() => {
    doFunction1()                    // now doFunction
  })

The basic problem here is that Cypress commands run asynchronously from the test code that creates them. You can see this if you put console logs into your code,

var myID;
cy.get('#MYID')
  .then(($txt) => {
    myID=  $txt.text();
    console.log('1', myID);
  })
 .should('not.equal', null); 

console.log('2', myID);

This prints out

2 undefined
1 myText

You can use an alias to overcome this and pass a value down the command chain.

See this section of the docs which shows a similar pattern of code you are using in the DO NOT USE THIS example.

BUT aliases get cleared down between tests, so you should set up a beforeEach() to obtain a new copy of the required ID for each test.

There's another problem with the way you obtain the text value.

Without a return statement the .then() command passes on whatever subject it receives to the next command. See then- Yields

Additionally, the result of the last Cypress command in the callback function will be yielded as the new subject and flow into the next command if there is no return.

So the .should('not.equal', null) is testing that the element isn't null, not that the text is not null.

A better way is to .invoke('text') which is equivalent to $txt.text() and yields the text value to the .should().

Also .should('not.equal', null) won't test that the content is present, since an empty element returns an empty string from element.text(). Use .should('not.equal', '') instead.

Saving via an Alias

describe('grabbing ID for use in multiple tests', () => {

  beforeEach(() => {
    cy.visit('my-page-1.html')
    cy.get('#MYID')
      .invoke('text')
      .as('mySavedID')
  })

  it('ID should not be null', () => {

    cy.get('@mySavedID')
      .should('not.equal', '')

  })

  it('ID should be found in table', () => {

    cy.visit('app/navigate-to-new-page-2.html');
    cy.get('@mySavedID').then(myID => {
      cy.get('#myTable').find('td').contains(myID);
    })

  })
})

Saving by queuing the setting of the variable

The alias pattern may not be ideal if visiting page #1 is time consuming.

In this case, you can save the variable via a custom command. The difference is that the code you had within the .then() is moved into a command which is queued, so the async problem does not occur.

describe('grabbing ID for use in multiple tests', () => {

  let savedVariable;

  Cypress.Commands.add("saveVariable", {prevSubject: true}, (value) => {
    savedVariable = value;
  });

  it('id should not be null', () => {

    cy.visit('my-page-1')
    cy.get('#someId')
      .invoke('text')
      .should('not.equal', '')
      .saveVariable()

    // OR test the variable separately like this

    cy.wrap(savedVariable)
      .should('not.equal', '')
  })

  it('id should be found in table', () => {

    cy.visit('my-page-2');
    cy.get('#myTable').find('td').contains(savedVariable);

  })
})

NOTE
The above is valid if the two pages are in the same domain, e.g two pages of a SPA. Otherwise, the test runner resets itself when a new domain is encountered, and all javascript variables are lost.