How to use _mergeDetails method in Cypress

IMHO the cleanest way is not to use waits nor timeouts with get, this is kinda an antipattern.

I would recommend to use Cypress waitUntil command and use something like:

 cy.waitUntil(function() {
  return cy.get('element').should('not.exist');
 })

or depending on the app code you can use not.be.visible.

The solution to this issue is to create a function that will create random text + adding a string that will complete the email.

My solution is:

 function makeid(length) {
        var result           = '';
        var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for ( var i = 0; i < length; i++ ) {
           result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
     }
     
     console.log(makeid(5));

My cypress command will be the following:

Cypress.Commands.add("form", ()=> {
      // fill-out form

      function makeid(length) {
        var result           = '';
        var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for ( var i = 0; i < length; i++ ) {
           result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
     }
     
     console.log(makeid(5));

    cy.get('#full_name')
      .type('MOCKDATA TESTING')
    cy.get('#company')
      .type('Testing')
    cy.get('#phone_number')
      .type('2022569878')
    cy.get('#email')
      .type(makeid(6) + "@aharo.com")
    cy.get('#password')
      .type('Abcd1234')

    // click submit
    cy.get(".app-submit-btn-text").click()
 })

The best way to call this command is cy.form.

I have to face this today. If you are getting a raw body response (string) you have to get the link in this way:

            const links = body.split("href=http://my.url.com");
            var activation_link = links[0].match(/\bhttp?:\/\/\S+/);
            activation_link= activation_link[0].replace('"','')
            cy.visit(activation_link)

Yes, it looks like there is a good attempt to create a scenario recorder and it works to a great extent:

https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb/related?hl=en

As well as cy.on() you can use cy.once() which turns off after the first catch.

Or there is cy.off().

Some examples from Cypress own code:

cy.once('fail', (err) => {
  expect(err.message).to.match(/^A callback was provided ... /)
    .and.match(/ESOCKETTIMEDOUT|ETIMEDOUT/)
  done()
})

cy.on('log:added', handleAddLog)
cy.on('fail', (err) => {
  cy.off('log:added', handleAddLog)
})

const onNavChanged = (event) => {
  if (event === 'page navigation event (load)') {
    cy.off('navigation:changed', onNavChanged)
    cb()
  }
}

cy.on('navigation:changed', onNavChanged)

Named handler

Note the "named" function used for the handler - this is so that same listener is turned off (you can have multiple listeners, and turn them off individually).

So in your code

const noError = () => false;
cy.on('uncaught:exception', noError);
...  // later
cy.off('uncaught:exception', noError);

Type definitions

namespace CypressOnceTests {
  Cypress.once('uncaught:exception', (error, runnable) => {
    error // $ExpectType Error
    runnable // $ExpectType Runnable
  })

  cy.once('uncaught:exception', (error, runnable) => {
    error // $ExpectType Error
    runnable // $ExpectType Runnable
  })
}

namespace CypressOffTests {
  Cypress.off('uncaught:exception', (error, runnable) => {
    error // $ExpectType Error
    runnable // $ExpectType Runnable
  })

  cy.off('uncaught:exception', (error, runnable) => {
    error // $ExpectType Error
    runnable // $ExpectType Runnable
  })
}

The log is telling you the file is actually attached. (Inspect also in dev console, the input element will have a non-empty files array).

It looks like you need to trigger a change or input event to tell the app something has been attached

cy.get('input[type=file]').attachFile(file)
  .trigger('change')

or

cy.get('input[type=file]').attachFile(file)
  .trigger('input')

Failing that, try to force the button click

cy.get(this.modal_proceedButton).click({force:true})

Add users to the fixture keyed by an id

authsettings.json

{
  "user1": {
    "username": "xxUsername",
    "password": "xxPassword"
    ...
  },
  "user2": {
    "username": "xxUsername",
    "password": "xxPassword"
    ...
  },
  ...
}

In auth.js is gets a bit tricky since you have some closures on the initial import, for example

const buildIdTokenEntity = (homeAccountId, idToken, realm) => {
    return {
        credentialType: "IdToken",
        homeAccountId,
        environment,
        clientId,                    // closure from above (not a parameter)
        secret: idToken,
        realm,
    };
};

You could set the desired userid in an environment variable, so the top of auth.js becomes

import authSettings from "./authsettings.json";

const userId = Cypress.env('userId');
const {
    authority,
    clientId,
    clientSecret,
    apiScopes,
    username,
    password,
} = authSettings[userId];

In the tests,

it('tests user1', () => {
  Cypress.env('userId', 'user1')
  ...
})

Also use a default in Cypress configuration

// cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234'
  },
  env: {
    userId: 'user3'
  }
})

Timing

The above is your smallest change, but I suspect it won't work since Command.js is imported in cypress/support/e2e.js and executes the auth.js import before the test runs.

If that's the case, you will need to pass userId into the login

test

describe('Login with MSAL as xxUsername', () => {
beforeEach(() => {
    cy.LoginWithMsal('user2')
})

Commands.js

Cypress.Commands.add("LoginWithMsal", (userId) => {           // receive here
    if (cachedTokenExpiryTime <= new Date().getTime()) {
        cachedTokenResponse = null;
    }
    return login(cachedTokenResponse, userId)                 // pass here
      .then((tokenResponse) => {
        cachedTokenResponse = tokenResponse;
        cachedTokenExpiryTime = new Date().getTime() + 50 * 60 * 1000;
      });

auth.js

import authSettings from "./authsettings.json";

let                                        // const -> let to allow change
    authority,
    clientId,
    clientSecret,
    apiScopes,
    username,
    password;

...

export const login = (cachedTokenResponse, userId) => {

  authority = authSettings[userId].authority;
  clientId = authSettings[userId].clientId;
  clientSecret = authSettings[userId].clientSecret;
  apiScopes = authSettings[userId].apiScopes;
  username = authSettings[userId].username;
  password = authSettings[userId].password;

  ...

You could reduce that down if some of the credentials are common to all users.

Thank you for the detailed description! I provide you a solution for your very first question

I'm trying to find out if I'm able to conditionally skip a test it() in my test suite and deal with its async nature as well.

Use an environment variable, I report you a solution of mine (actually using in my pipeline).

if (!Cypress.env("SKIP_E2E_TESTS")) {
  it(...);
}

and in my package.json file I have a script that looks like this

"test": "CYPRESS_SKIP_E2E_TESTS=true npm-run-all --parallel --silent test:unit test:cypress",

My goal was the same as yours, I'd like to disable some tests in some circumstances (the CI pipeline in my case).

So put the whole test into a condition instead of having a conditional test.

Let me know if you need some more help ????

This is a problem with how the XLSX read function deals with webpack and the browser's security feature to not access the file system directly.

You'll need to read the file via an ajax call and then 'read' it into xlsx that way. There's a demo here:

https://github.com/SheetJS/sheetjs/tree/master/demos/xhr

fetch(url).then(function(res) {
  /* get the data as a Blob */
  if(!res.ok) throw new Error("fetch failed");
  return res.arrayBuffer();
}).then(function(ab) {
  /* parse the data when it is received */
  var data = new Uint8Array(ab);
  var workbook = XLSX.read(data, {type:"array"});

  /* DO SOMETHING WITH workbook HERE */
});