How to use readEnv method in Cypress

Thank you all. Cypress flow isn't 100% compatible with standard JS Promise (Wait for an own function (which returns a promise) before tests are executed). After relentless testings, I decided to use a Cypress Custom Command wrapper to wrap my in-house JS library. Though adding an extra layer may seem a little cumbersome. But I am satisfied with the result. Share my code here in case anyone might need it. :)

Cypress Code

  before('Prepare TestPlanId', () => {
    cy.getTestPlanIdByName(testPlanName)
    .then((result) => {
      testPlanId = result
      console.log("#01_SDET_testplan:Prepare TestPlanId# "+testPlanId)
    })
  });

Cypress Custom Command

Cypress.Commands.add('getTestPlanIdByName', (wk_testplan_name) => {
  return new Cypress.Promise((resolve, reject) => {
    TESTPLAN_API.getTestPlanIdByName(wk_testplan_name)
    .then(function (data) {
      resolve(data);
    })
  });
})

In-house JS library

export async function getTestPlanIdByName(wk_testplan_name){

  return new Promise((resolve, reject) => {
      config.method = 'get'
      config.url = '/test/plans?api-version=5.0'
      let found = ''

      axios.request(config).then( resp => {
        found = resp.data.value.find(function(item, index, array){
          return item.name === wk_testplan_name
        })
      })
      .then(() => {
        resolve(found.id)
      })
      .catch(err => console.log(err))
  })
}

One way is to use jquery to check the css property in the if condition:

cy.get('#privacy_dialog').then(($dialog) => {
    if ($dialog.css('display') == 'block') {
        cy.get('#dialog_btn').click()
    }
    else {
        cy.get('#login_btn').click()
    }
})

An updated version of Justin Smith's answer that removes the unnecessary callback.

Just to illustrate the readability of Cypress chained commands.

Remove the noise, just use chaining

cy.get('Selector for the anchor tag')      // sets <a> as the subject
  .should('have.attr', 'href')             // changes subject to href attribute
  .should('not.be.empty')                  // now test the href
  .and('contain', 'foo');                  // also test another criteria here

Note, this pattern has nothing to do with Cypress 7, it has been available for many previous versions.

Checking all hrefs

The question actually asks for a way to check all tags on the page.

For example,

<a></a>                      -- should ignore
<a href="/foo"></a>          -- should pass
<a href="/"></a>             -- should pass
<a href=""></a>              -- should fail

One way is to be more selective in the cy.get() by moving the .should("have.attr", "href") predicate inside the element selector.

cy.get("a[href]")                           // get all <a> that have an href
  .each($el => {                            // test individually
    cy.wrap($el.attr('href'), {log:false})  // here we need to cy.wrap
      .should("include", "/")               // because subject needs to change
  })                                      

Cypress log

I just came across this article that explains how and why you store a variable and then use it later in the "Cypress way":

https://www.stevenhicks.me/blog/2020/02/working-with-variables-in-cypress-tests/

In respect to how it should work, here is my example which first, collects the message (the message is shown for only 3 secs then disappears). Secondly, it gets the value using the @ sign. Lastly my code passes the stored message through to an empty function constructed to assert that the value Portsmouth is contained within the message.

it('Current Port change', () => {
  cy.get('#viewport').find('div[id=message]').then(message => {
    let wags = message;
    cy.wrap(wags).as('wags')
  });

  cy.get('@wags').then(wags => {
     expect(wags).to.contain("Portsmouth")
  });
});

let me know if you need further clarification

You installed eslint manually and this can break things. You should uninstall it and edit just your .eslintrc file. Look the comments of @gaearon in this Github issue

But if you wish to control directly and customize everything. I would eject the project: npm run eject. Check the guide of Create React App.

What you need to do is assert that the url is in the expected state.

There are many commands in Cypress that can be used to make assertions about the url. Specifically, cy.url(), cy.location() or cy.hash() may meet your requirements. Probably the best example for your use case would be this:

cy.location('pathname').should('eq', '/newthing/:id')

Not a cucumber user, but in plain Cypress tests you can only access this by making the callback a function not an arrow function

Given("I check data", function() {
  console.log("this", this.data.user);
});

I think you might have to alias the data as well

before(() => {
  cy.fixture('example')
    .then(function (data) {
      console.log("this", data.user)
    })
    .as('data');
}

Note that Cypress clears aliases in between tests, so you would need to use beforeEach() instead of before().

Your problem stems from the fact that cypress commands are not promises, although behaving like promises.

I can think of two options:

• Try to refactor your test code to not use async/await, as these commands don't behave as expected when running your code on cypress (check this bug). Cypress already has a whole way of dealing with async code as it creates a command queue that always run sequentially and in the expected order. That means you could observe the effects of your async code to validate that it happened before moving forward on your test. For instance, if User.createUserOnServer must wait a successful API call, add code to your test that will wait for the request to complete, using cy.server(), cy.route() and cy.wait(), like below:

  cy.server();
  cy.route('POST', '/users/').as('createUser');
  // do something to trigger your request here, like user.createOnServer()
  cy.wait('@createUser', { timeout: 10000});
  

• Use another third-party library that changes how cypress works with async/await, like cypress-promise. This lib may help you to treat cypress commands as promises that you can await in your before code (read more about it in this article).

Try this one:

In cypress.json

{
  "env": {
    "EXTERNAL_API": "https://jsonplaceholder.typicode.com/todos/1"
  }
}

In support/commands.js

Cypress.Commands.add('logInAs3', (Useremail, Userpwd, TMURL) => {
  cy.request({
    method: 'POST',
    url: `${Cypress.env('EXTERNAL_API')}/loginWithToken`,
    body: {
      user: {
        email: Useremail,
        password: Userpwd,
      }
    }
  })
    .its('body')
    .then((body) => {
      window.localStorage.setItem('accessToken', body.data.data.accessToken);
      window.localStorage.setItem('refreshToken', body.data.data.accessToken);
    })
});

Inside your test

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

it('check localStorage token', () => {
  cy.visit()
  expect(localStorage.getItem('accessToken')).not.null
  expect(localStorage.getItem('refreshToken')).not.null
})