How to use addPlatformInformation method in Cypress

Cypress have promises (Cypress.Promise), but they are not real promises, more like duck typing. In fact, Cypress isn't 100% compatible with real promises, they might, or might not, work.

Think of Cypress.Promise as a Task or an Action. They are executed sequentially with all other cypress commands.

To get your function into the Cypress pipeline you can use custom commands. The documentation doesn't state it, but you can return a Cypress.Promise from them.

Cypress.Commands.add('resetDb', function () {
  var apiServerUrl = Cypress.config().apiServerUrl;
  return new Cypress.Promise((resolve, reject) => {
    httpRequest('PUT', apiServerUrl + "/api/test/reset/")
      .then(function (data) {
        resolve();
      })
      .catch(function (err) {
        reject(err);
      });
  });
});

That command can then be executed from the test itself, or as in my case from before().

describe('Account', function () {
  before(() => {
    cy.resetDb();
  });

  it('can login', function () {
    // test code
  });

})

cy.server() and cy.route() are deprecated in Cypress 6.0.0. Instead cypress introduced cy.intercept(). So you can write something like:

// declare the AJAX request we will wait for
cy.intercept('POST', '/api/authenticate').as('authenticate')

// type the username and password and click the login button
cy.get('#username').type('john-doe')
cy.get('#password').type('password')
cy.get('#login-button').click()

// wait till we get 200
cy.wait('@authenticate').its('response.statusCode').should('eq', 200)

//You can also assert request body and response body contents
cy.wait('@authenticate').its('request.body').should('include', 'username')
cy.wait('@authenticate').its('response.body').should('include', 'password')

By default, if you have not configured anything different, Cypress looks in all subfolders of the integration folder.

Please see Configuration

Folders / Files

where ** is part of a glob pattern that means 'look in all the sub folders - for all file types'.

If you have something else configured, that might be causing it, but if there is no entry then cypress.json is not the cause.

Else, if you have *.spec.js or */*.js these will exclude your files (because there's no .spec.js extension and a single * will exclude subfolders.

Speaking of excluding, if there is an ignoreTestFiles configuration entry (in cypress.json), that may be causing the problem.

I would also like to point out the PageObjects folder may be considered as tests and cause you more errors.

A common pattern is to name all files that have tests with the .spec.js extension e.g GTProject1.spec.js.

In the cypress.json file, set

testFiles: "**/*.spec.js"

which means look in the /cypress/integration folder and any sub-folders for files with the extension .spec.js. It will ignore you PageObject files which just have the .js extension.

Then you can rearrange the folders later and still see all the tests.

Your commands file would have a command like this. Note that this will log the cy.wraps and you may want to pass log: false to suppress that if you choose. You can also add another agrument and have an if block for text to use data-testid with .contains()

Cypress.Commands.add(
  'byTestId',
  { prevSubject: 'optional' },
  (subject, id) => {
    if (subject) {
      return cy.wrap(subject).find(`[data-testid="${id}"]`)
    }
    return cy.get(`[data-testid="${id}"]`)
  },
)

This would be an application of the command.

cy.byTestId('first-id')
  // maybe some assertions here for visibility check
  .byTestId('id-inside-first-element')
  // maybe some assertions here for visibility check
  .byTestId('id-within-this-second-element')

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

Use cy.request rather than fetch.

https://docs.cypress.io/api/commands/request

cy.request({yourUri}).as("response"); // This takes care of the async task. 
 
cy.get("@response").should((response) => { 
   // Carry on with the rest of your test
   cy.get("some selector");

});

After some reading of Cypress sources, I realized that indeed, almost everything in Cypress is async, as well as the requests interceptors registration (event driven). To make sure I "visit" the home page, after having all interceptors registered, I just extracted everything into an async function (of course annotated all async processes with await) and then I visit the "/". See the working example bellow:

async function initTests() {

  cy.interceptStaticDataCalls();

  await cy.intercept(componentsRouteMatcher, {fixture: 'components/first-5.json'}).as('first5');

  const composSecond5Route = Object.assign({}, componentsRouteMatcher, {query: {page: '1'}});
  await cy.intercept(composSecond5Route, {fixture: 'components/second-5.json'}).as('second5');

  const composFirst50Route = Object.assign({}, componentsRouteMatcher, {query: {size: '50'}});
  await cy.intercept(composFirst50Route, {fixture: 'components/first-50.json'}).as('first50');

  const composFirst20Route = Object.assign({}, componentsRouteMatcher, {query: {size: '20'}});
  await cy.intercept(composFirst20Route, {fixture: 'components/first-20.json'}).as('first20');

  await cy.intercept('/component-management/api/functional-areas', {fixture: 'functional-areas/functional-areas.json'}).as('fa');
}


.....

  beforeEach( () => {
    initTests().then( () => {
      console.log('Initialized!');
      cy.visit("/");
    })
  });

If you want to save information to use in another test, you can use fixtures. Save the info to a fixture in test 1 using cy.writeFile, load from the fixture in test 2 using cy.fixture.

Reference:

• Fixture: https://docs.cypress.io/api/commands/fixture.html#Syntax
• writeFile: https://docs.cypress.io/api/commands/writefile.html#Syntax

You can save the info in json format which makes it simple to retrieve with cy.fixture in the next test.

Example:

// inside test 1
cy.writeFile(fixtureAbsoluteFilePath, {email:"foo@foo.com"});

// inside test 2
cy.fixture(fixtureRelativeFilePath).then((json) => {
  // use data in test
  testSomeStuff(json.email);
}

Note that cy.writeFile will use the absolute file path to inside the fixture folder and cy.fixture uses the path relative to inside the fixture folder.

Everytime you define .route('VERB', '/endpoint', ...) it overrides your previous definition. The simplest solution would be to override this endpoint after you finish your first call

This test will work for you, Filip.

cy.route('POST', 'access-tokens', '@loginFailResponse', {status: 401}).as('loginFail')
cy.get("form input[type='email']").type("bad@email.com")
cy.get("form input[type='password']").type("Bad password")
// this should fail
cy.get("form").submit()
cy.route('POST', 'access-tokens', '@loginSuccessResponse').as('loginSuccess')
cy.get("form input[type='password']").type("g00d@password.com")
// this should let me in
cy.get("form").submit()