How to use downloadAndUnzip method in Cypress

Since it works when the intercept is moved up in the command order, it seems that cy.waitLoading() triggers the POST and not cy.get('[data-cy=alreadysent-button]').

The intercept must always be set up before the trigger (page visit or button click).

But the intercept varies between tests, so instead of before() I would try setting up a helper function that is called at the top of each test.

const loadAndIntercept = (apiResult) => {     
  const apiFixture = apiResult ? 'test/alreadySent-true.json' : 'test/alreadySent-false.json';
  cy.intercept('POST', '**/test/alreadySent', { fixture: apiFixture }).as('alreadySent');
  cy.waitLoading();
})

it('false test', function() {
  loadAndIntercept(false);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

it('true test', function() {
  loadAndIntercept(true);
  cy.wait('@alreadySent');
  cy.get('[data-cy=alreadysent-button]');
});

This should work since intercepts are cleared between tests. Ref docs - intercept

Note: all intercepts are automatically cleared before every test.

(edited and working answer)

Try this:

cy.get('[type="radio"].XyzTypeRadio').check("2")

Or if you don't care which radio button is checked, you could check the first one:

cy.get('[type="radio"].XyzTypeRadio').first().check()

Takeaways:

• The first() function does not understand selectors, that's why we need to pass our selector ".XyzTypeRadio" to get().
• The check() function expects the value or values as its argument, so instead of "value=2" we simply give it "2".
• The check() function does a bit of selecting, ie the result of everything before calling check("2") is a list of inputs and the check("2") function searches and selects the one whose value is "2".
• We could use first().check() if we want to check the first radio button, or we could remove first() and check a radio button with a specific value using check("2").

1. Click method is kind of imitation of behavior of the app user. My proposition is to try with trigger(click) which is little different - I believe in this case trigger(click) refers to Element Click which is handled by the DOM Element. - https://docs.cypress.io/api/commands/trigger.html#Syntax

2. Another solution I can think off may be kind of workaround but eventually will be helpful - try to set another position on click() than center, because Cypress by default set position to always click on the center of the element you want to interact with. For example click(left) - check Cypress documentation - https://docs.cypress.io/api/commands/click.html#Arguments

If I'm reading this correctly, you can do this by declaring the variable in an outer context, the variable will be a "closure" variable.

describe('New experience test', () => {

  let oc_token;

  before(() => {
    cy.request({...}).then((response) => {
      oc_token = response.body.access_token; // set outer ("closure") variable
    })
  });

  beforeEach(() => {
    cy.interceptFeatureFlags({...})

    cy.visit('/')                 // uses baseUrl from config
      .then(w => {
        w.sessionStorage.setItem('jwt', oc_token)
        w.sessionStorage.setItem('other_jwt', oc_token)
      })
    ...
  })
})

The only problem you might have is if Cypress resets the browser, but it's unlikely if you are visiting baseUrl set in configuration.

There are other methods such as alias

describe('New experience test', () => {

  before(() => {
    cy.request({...}).then((response) => {
      cy.wrap(response.body.access_token).as('oc_token');  // alias variable
    })
  });

  beforeEach(() => {
    cy.interceptFeatureFlags({...})

    cy.visit('/')                 // uses baseUrl from config
      .then(w => {
        cy.get('@oc_token').then(oc_token => {     // retrieve alias value
          w.sessionStorage.setItem('jwt', oc_token)
          w.sessionStorage.setItem('other_jwt', oc_token)
        })
      })
    ...
  })
})

or environment variable

describe('New experience test', () => {

  before(() => {
    cy.request({...}).then((response) => {
      Cypress.env('oc_token', response.body.access_token); // env variable
    })
  });

  beforeEach(() => {
    cy.interceptFeatureFlags({...})

    cy.visit('/')                 // uses baseUrl from config
      .then(w => {
        w.sessionStorage.setItem('jwt', Cypress.env('oc_token'))
        w.sessionStorage.setItem('other_jwt', Cypress.env('oc_token'))
      })
    ...
  })
})

I am not sure why the error occurs in this case, but if you just need to turn it off - you can add this line under your cy.visit call. The error should not occur again.

Cypress.on('uncaught:exception', (err, runnable) => { return false; })

Delete the element

cy.get('modal-top-element')
  .then($modal => $modal[0].remove)

If it appears in it's own iframe (seems doubtful), delete the iframe.

I think there are two buttons with btn-primary class in your popup DOM (yes and cancel?). Try to access the yes confirmation button by its id or something. Or if you're sure about the order, then use .first() or .last() like you used for clicking the delete button.

The patterns for using cy.route() are

• cy.route(url)
• cy.route(url, response)
• cy.route(method, url)
• cy.route(method, url, response)
• cy.route(callbackFn)
• cy.route(options)

Looks like your command is interpreted as #4, but response is the value used to stub. Never seen it with a function, so is best guess.

To be sure, use the pattern with options and put function in onResponse

cy.route({
  method: 'PUT', 
  url: `${APP_CONTEXT}/api/model/${modelId}`, 
  onResponse: (data) => {
    expect(parsedData.inputData).to.eq('123');
  }
})

Also onAnyRequesty: (props) => change to onAnyRequest: (props) =>.

In your latest code,

onAnyRequest: (data) => {, 

data is already parsed so JSON.parse(data) causes an error.

In my test, I get a weird error about cross-origin when trying to re-parse within onResponse() (Expecting a message like 'Unexpected token o in JSON at position 1').

In any case, put the debugger up one line to avoid other code problems.

If cy.route() is not matching the url, you can see all calls with (temporary)

cy.server({ whitelist: (xhr) => console.log('server', xhr) }). 

Maybe APP_CONTEXT !== BASE_URL?

Submit can be a native event which won't be captured by Cypress.

I think you can test if this is so, see Submit a POST form in Cypress and navigate to the resulting page.

If you do the following instead of submitBtn().click({force: true}) and the cy.route() does pick it up, then you have a native event.

cy.visit({
  url: `${BASE_URL}/api/data/${formId}/${modelId}`,
  method: "PUT",
  form: true,
  body: {
    inputData :"123"
  }
});

This answer was initially found for a similar Vue/Cypress question answered by @Richard Matsen - His answer can be found here

Essentially, we just call the window with cypress then using the window, we'll access our variables.

Using the example above, you can get variables which are server is loaded via js source files:

Solution

Your variable to get

var varyingUrl  = 'www.google.com';

The cypress code:

cy.window().then((win) => {
    // use this area to code using the variable, prepending with "win." eg.
    cy.log(win.varyingUrl) // or console.log(win.varyingUrl)

})

Console output:

'www.google.com'