How to use findInstalledOrInstallCypress method in Cypress

While investigating to post the question, I came up with a simple solution to this problem. The subject is an object which has a selector, so you can use that selector with cy.get(subject.selector) to get the Dom Element:

Cypress.Commands.add('fillInput', {prevSubject: 'element'}, (subject, value) => {
  cy.get(subject.selector).clear().type(value);
});

I think this is not a lot of clear and more people may have this issue, so I leave my solution here.

Cypress commands work the same way as Promises. You need to return a Promise when inside a then() callback. See doc here.

You may use cy.wrap($text).invoke('text') inside your then() callback instead of returning a string. But then, your click() would not work because your then() would yield a text value that cannot be clicked.

I suggest not using the within() and working directly with the elements. You'll end up with the same result, but with less complexity. I use the within() command when I need to perform several actions on several elements within a div container for example.

You can perform what you need with default commands instead of a function:

let mixLocator = listLocator + ' ' + elementLocator;
cy.get(mixLocator).its('length').then(elementCount => {
    let selected = Cypress._.random(elementCount - 1); // lower = 0 is default
    cy.get(mixLocator).eq(selected).click().invoke('text').as('selectedText'); // saving the text as an alias to be used later
});

Here, the invoke('text') should still work even if it is after the click(), but it is impossible to do the opposite invoke('text').click() because the invoke('text') command yields a string. If it doesn't, call it once to get the text and again to click it:

cy.get(mixLocator).eq(selected).invoke('text').as('selectedText');
cy.get(mixLocator).eq(selected).click();

or:

cy.get(mixLocator).eq(selected).then(selectedElement => {
    cy.wrap(selectedElement).invoke('text').as('selectedText');
    cy.wrap(selectedElement).click();
});

You may then use your saved alias later:

cy.get('@selectedText').then(selectedText => {
    // use selectedText here
});

I often prefer to chose random elements in our tests to have a better coverage. I came up with a custom commands:

commands.js

Cypress.Commands.add('any', { prevSubject: 'element' }, (subject, size = 1) => {
  cy.wrap(subject).then(elementList => {
    elementList = (elementList.jquery) ? elementList.get() : elementList;
    elementList = Cypress._.sampleSize(elementList, size);
    elementList = (elementList.length > 1) ? elementList : elementList[0];
    cy.wrap(elementList);
  });
});

I use it like this:

cy.get(elementLocator).any().click();

or

cy.get(elementLocator).any(5).each(randomElement => {
    cy.wrap(randomElement).click();
});

This test works

cy.visit('https://app.staging.showcare.io/product-showcase/login')
cy.get('.modal-dialog').should('be.visible')
cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .click({ force: true })

There is a warning that there are two #signInFormUsername, so add .eq(0) to ensure you click the right one.

Also, the control has a parent with CSS display: none, so { force: true } is needed on the .click().

Please note, you will have to restart Cypress test runner after setting "chromeWebSecurity": false.

The full login sequence

cy.visit('https://app.staging.showcare.io/product-showcase/login')

cy.get('.modal-dialog').should('be.visible')

cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .type('userName', { force: true })

cy.get('#signInFormPassword').eq(0)
  .type('password', { force: true })

cy.get('[name="signInSubmitButton"]').eq(0)
  .click({ force: true })

The page URL of the login form is (the beginning part)

https://vep-staging.auth...amazoncognito.com/login?...&redirect_uri=https%3A%2F%2Fapp.staging.showcare.io%2Fproduct-showcase&...

and that redirect_uri parameter should send you back to https://app.staging.showcare.io/product-showcase after successful login.

If not, you can do the login part in a beforeEach() and then visit the main page in the test. A login token should be stored for you by the login step.

Also, wrap the code in a cy.session() to do the login just once, and preserve the token for all tests (same as happens with a user logging in and doing various things in a session.

The full test,

Cypress.config('experimentalSessionSupport', true)  // set this flag

beforeEach(() => {
  cy.session('mySession', () => {

    // preserve the login across all tests

    cy.visit('https://app.staging.showcare.io/product-showcase/login')
    cy.get('.modal-dialog').should('be.visible')
    cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .    type('userName', { force: true })
    cy.get('#signInFormPassword').eq(0)
      .type('password', { force: true })
    cy.get('[name="signInSubmitButton"]').eq(0)
      .click({ force: true })
  })
})

it('tests the app main page after login', () => {

  // should be logged in here, so visit main page
  cy.visit('https://app.staging.showcare.io/product-showcase') 

  // test the main page, e.g 
  cy.get('nav').contains('Homepage')
})

If your URL will always be formed similar to as you explained, we can use .split() and .pop() to easily get this ID.

.pop() takes the last item off of an array and returns it.

cy.url().then((url) => {
  const splitUrl = url.split('/');
  const ending = splitUrl.pop();
  const id = ending.split('?')[0];
  // code using id
})

I've been overly verbose in laying out each line, but you could theoretically combine it into one line as:

const id = url.split('/').pop().split('?')[0];

We could even simplify this a little bit, by using cy.location('pathname').

// assuming url is something like http://localhost:1234/survey/20?vbpCategoryId
cy.location('pathname').then((pathname) => {
  /** 
  * `pathname` yields us just the path, excluding the query parameters and baseUrl 
  * (in this case, `?vbpCategoryId` and `http://localhost:1234`), 
  * so we would have a string of `/survey/20`.
  */
  const id = pathname.split('/').pop();
});

You could change

cy.get('[data-testid=spinner-loading-indicator]').should('exist')

to this

expect(Cypress.$('[data-testid=spinner-loading-indicator]')).to.exist

The difference is the 2nd (jQuery) test does not retry - not exactly sure if that's going to be a problem, can't tell what the order of events are from your question.

Testing the loading indicator inside the intercept feels a bit like testing two things at once, but timing might make things flaky for you (especially in CI)

Is there any reason why this sequence is no good?

cy.intercept('*').as('requested')

// trigger events
cy.visit('some-url')       // if initiated on load
// or
cy.get('button').click()   // if user-initiated

cy.wait('@requested')      
cy.get('[data-testid=spinner-loading-indicator]').should('exist')

In terms of events, the firing of the routeHandler (req) => {...} is the onRequest event, but you're still not able to call commands inside,

i.e this is logically equivalent to the onRequest syntax,

cy.intercept('*', (req) => {
  cy.get('[data-testid=spinner-loading-indicator]')        // throws an error 
})

You can see from the message that it's an error in the app. This section of the documentation gives some recommendation To turn off all uncaught exception handling of how to by-pass the error for testing purposes.

This would be the conservative way to do it

  Cypress.on('uncaught:exception', (err, runnable) => {
    if (err.message.includes('ResizeObserver loop limit exceeded')) {
      // ignore the error
      return false   
    }
  })

With the if() statement, you are only ignoring that particular error.

According to this question ResizeObserver - loop limit exceeded the message is benign and can be ignored.

I think you are having some bad expectations related to async vs snyc code.

Also, for accessing the fixture data you might try this instead of the .its('data) :

cy.fixture('users').then((usersJson) => {
    let foundUser = usersJson.data.find(user => user.name === 'Remi Arsenault');
    let emloyeeID = foundUser.employeeID
    ... ['whatever else you want to do can go here inside the then callback.']
});

This is the basic structure of the dynamic test case creation spec. It is populated by a combination of environment variables and a file. The elements in the environment variable ids specify the key for the individual test cases' parameters which are provided in a separate file (also specified via an environment variable)). The ids are serialised and delimited through an outside script.

Call this script via:

$(npm bin)/cypress run --config-file cypress.json --headless --env ids=foo@bar@blah,paramsFile=myParamfile.json

features/test_xyz.js

let paramsFile = Cypress.env('paramsFile');
let ids = Cypress.env('ids');


describe('My test', () => {
  let params;

  before(() => {
    cy.task('readFileMaybe', paramsFile).then(fileContent => {
      if (fileContent === null) {
        throw new Error(`Could not find file ${paramsFile}.`);
      }
      // params = {id1: testcaseParam2, id2: testcaseParam2, ...}
      // `testcaseParamX` are objects or arrays and can therefore not be passed
      // easily into the test case via environment variables.
      params = JSON.parse(fileContent);
    });
  });

  // `ids` is a string -> needs to be split
  // e.g. `ids.split(delim).forEach(...)` to actually run.
  ids.forEach(id => {
    // Create test case.
    it(`test case for ${id}`, () => {
      let param = params[id];

      // run assertions here...
    });
  });
});

plugins/index.js (reference)

module.exports = (on, config) => {
  on('task', {
    // Needs to be done through a task, as we can't access `fs` in test case
    // (this task runs in Node which allows use of external libraries).
    readFileMaybe(filename) {
      // console.log('Loading ', filename);
      if (fs.existsSync(filename)) {
        return fs.readFileSync(filename, 'utf8');
      }
      // console.log('Could not find ', filename);
      return null;
    }
  });
};

This was extremely painful to get working. However, the ability to run commands outside of the Cypress context directly in Node is very powerful and can be used for similar problems, too. I hope others find this useful.

Solution 1:

You can use the wrap() method which yields the object passed as a param if it resolves like so:

context('Travel Portal Regression Test', () => {
  beforeEach(() => {
    cy.fixture('travelData').then((data) => cy.wrap(data).as('getTravelData'));
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.get('@getTravelData').then((res) => cy.log(res.FIRSTNAME));
  });
});

Solution 2:

You can declare a variable called travelData on the upper scope of your test spec & reassign its value to data received from the json file like so:

context('Travel Portal Regression Test', () => {
  let travelData;

  beforeEach(() => {
    cy.fixture('travelData').then((data) => {
      travelData = data;
      return travelData;
    });
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(travelData.FIRSTNAME);
  });
});

Here it's the screenshot with the test results: