How to use parseEnv method in Cypress

The assertion be.visible is designed to check if the user is able to interact with an element even if she has to scroll down to it.

But you can add and use a custom assertion isInViewport, have a look at https://github.com/cypress-io/cypress/issues/877#issuecomment-490504922.

With the fetch() protocol, the disk cache read is not caught by cy.intercept().

You can alter the fetch() in the app to turn off caching,

fetch("http://127.0.0.1:2000/plate.stl", {cache: "no-store"});

but if you prefer to do it in the test, add this to top of the spec

beforeEach(() => {
  const disableCache = (win) => {
    const original = win.fetch;
    win.fetch = (...args) => original(...args, {cache: "no-store"});
  }
  cy.on('window:before:load', win => disableCache(win))
})

Note, normally you can modify headers in the intercept like this

cy.intercept("/plate.stl", req => {
  req.headers['cache'] = 'no-store'
})

but it seems that intercept does not match to cache reads, so it never gets to that point.

As a side note, your working branch using Cypress v4.12.0 uses xhr instead of fetch. If you substitute the xhr method into the Cypress v7.4.0 build (still using intercept), the problem goes away.

Which means you could also fix this by using the old fetch polyfill that converts fetch to xhr on the fly (but I've not tried it).

There is a third way based on

• this discussion Using Chrome Debugger Protocol from Cypress

• example recipe offline-spec.js

• reference Network.clearBrowserCache

beforeEach(() => {
  Cypress.automation('remote:debugger:protocol', {
    command: 'Network.clearBrowserCache'
  })
})

I ran into a problem almost like yours with before.

before() runs before the next block of code.

describe("Some test", function() {
    before(function() {
        //something ...
        cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
    })

    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser doesn't exist here
    it("Should bar", function() {
    })
})

I fixed my problem moving the before() statement out from the describe scope.

before(function() {
    //something ...
    cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
})

describe("Some test", function() {     
    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser also exists here
    it("Should bar", function() {
    })
})

I hope this can help you solve your problem.

cy.request() makes an actual HTTP request to the url specified. This command should be used in cases where you do not want to load your actual application. Maybe you want to check an endpoint on your server, for example.

cy.route() is used to work with HTTP requests made within the application you are testing.

If you want to stub a response to an HTTP request that is being made within your application under test, you likely want to use a combination of cy.route() and .wait(). For example, to ensure that when we visit our application, a GET request is made by our application to /dummypath and that the response to this request is our stubbed {}, we would write:

describe('The new event page', () => {

  it('responds with the stub', () => {
    cy.server();
    cy.route('/dummypath', {}).as('getDummy');
    cy.visit('http://localhost:3002');         // the url to visit in your app
    cy.wait('@getDummy').its('responseBody')
      .should('be.an', 'object')
      .and('be.empty');
  });

});

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();

The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.

cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {

  const $body = $element.contents().find('body')

  let stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(1).click().type('4242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(2).click().type('424')
})

However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):

Big Thanks to @Vedelopment @brian-mann !

I tested with react-stripe-checkout component and it works.

Just add some solution details so it may save others some time.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951

// /plugins/index.js

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");
      return args;
    }
  });
};

functions is synchronous so in moment of call it the result will be equal Promise, promise is object and when you try to stringify object (by + operator) you get [object Object].

After some time promise will be resolved and value in authToken variable will be correct.

To fix it is suggest use Cypress.Promise like in example id cypress docs: https://docs.cypress.io/api/utilities/promise.html#Basic-Promise

Properties username and password are defined synchronously in before(), so are present on the object when tested.

But subscriberId is obtained asynchronously, so you will need to wait for completion inside the test, e.g

cy.wrap(Subscriber.getSubscriber()).should(function(subscriber){
  expect(subscriber.getSubsciberId()).not.to.be.null
})

Refer to wrap - Objects to see how to handle an object with Cypress commands.

and see should - Differences

When using a callback function with .should() or .and(), on the other hand, there is special logic to rerun the callback function until no assertions throw within it.

In other words, should will retry (up to 5 seconds) until the expect inside the callback does not fail (i.e in your case the async call has completed).

The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.

cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {

  const $body = $element.contents().find('body')

  let stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(1).click().type('4242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(2).click().type('424')
})

However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):

Big Thanks to @Vedelopment @brian-mann !

I tested with react-stripe-checkout component and it works.

Just add some solution details so it may save others some time.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951

// /plugins/index.js

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");
      return args;
    }
  });
};