How to use getAngularJsonValue method in Cypress

I had similar issues with Auth0, but I don't remember getting the error you are getting. In a before block I log in. I call this method in a before() block. Not sure this will help you but it was worth a shot. There should be a better way of doing it and I tried calling their API to do it, but I could never get it to work.. so I hacked this up

Cypress.Commands.add('loginAuth0', () => {
    cy.visit('');
    cy.get('#log-in').click();
    cy.get('[type="email"]').type('MYEMAIL@DOMAIN>COM');
    cy.get('[type="password"]').type('MYPASSWORD');
    cy.get('.auth0-label-submit').click();
    cy.url().should('include', '/callback');
})

in a beforeEach() block I call this method

var accessToken = null; ** this is a global variable at top of file
Cypress.Commands.add('resetLocalStorage', () => {
    if (!accessToken) {
        accessToken = localStorage.getItem('access_token');
    }
    window.localStorage.setItem('access_token', accessToken);

}

in my cypress.json file I turn off chromeWebSecurity

"chromeWebSecurity": false

My spec file you will see something like this

 before(() => {
        cy.loginAuth0();
        cy.wait(2000); 
    })    

    beforeEach(() => {
        cy.resetLocalStorage();
    })

It may be a personal preference but I try not to use jQuery syntax if I don't really need to, for better readability. What I've done is:

function getCellTextAsArray() {
  let cellContents = [];
  return new Cypress.Promise(resolve => {
    cy.get("table tbody tr")
      .children()
      .each(($el, $index) => {
        //some logic to select the elements you want
        //like $index % 4 == 0
        if (...) {
          cellContents.push($el.text());
        }
      })
      .then(() => resolve(cellContents));
  });
}

And then you do your assertion without having to worry about passing callbacks:

getCellTextAsArray().then(cellContents => {
  let actual = cellContents.slice();
  cy.wrap(actual).should("deep.eq", cellContents.sort());
});

So what happens here is that we are trying to use higher level Cypress commands to grab all the tds, and when we are done with them we resolve the Promise with the tds text content, then it's kind of easy and readable to do a final assertion.

The problem is that you are trying using variable set between test cases when it's already reset to store token you need either use global variable (not advised), or create some login command that will be called before you need access to token. For example:

Cypress.Commands.Add('login', (userName, password) => {
  cy.request({
      method:'POST', 
      url:'https://odms.baitussalam.org:8445/api/v1/auth/login',
      body: {
        userName,
        password,
      }
    })
    .as('loginResponse')
    .then((response) => {
      Cypress.env('token', response.body.accessToken); // either this or some global var but remember that this will only work in one test case
      return response;
    })
    .its('status')
    .should('eq', 200);
})

Then whenever you need you login user before using Cypress.env('token').

For example:

describe('testing token', () => {
  beforeEach(() => {
    cy.login();
  });

  it('test request', () => {
    const token = Cypress.env('token');
    const authorization = `bearer ${ token }`;
    const options = {
      method: 'GET',
      url: `https://odms.baitussalam.org:8445/api/v1/qurbani-representative`,
      headers: {
        authorization,
      }};

    cy.request(options)
      .its('status')
      .should('eq', 200);
  })
});

You can go further and override all request to add token to them like this:

Cypress.Commands.overwrite('request', (originalFn, ...options) => {
  const optionsObject = options[0];
  const token = Cypress.env('token');

  if (!!token && optionsObject === Object(optionsObject)) {
    optionsObject.headers = {
      authorization: 'Bearer ' + token,
      ...optionsObject.headers,
    };

    return originalFn(optionsObject);
  }

  return originalFn(...options);
});

then the above example would look like this:

describe('testing token', () => {
  beforeEach(() => {
    cy.login();
  });

  it('test request', () => {
    cy.request(options)
      .its('status')
      .should('eq', 200);
  })
});

I made a test locally and:

• rename your Latest.txt file into Latest.json so we can leverage a Cypress feature that automatically parses the file
• the file content must be

[
 "Gender",
 "Age group ",
 "Source Total ",
 "21 to 30 ",
 "30 to 35 ",
 "36 to 40 ",
 "41 to 45 ",
 "46 to 50 ",
 "51 to 55 ",
 "56 to 60 ",
 "61 to 65 ",
 "Over 66 ",
 "123",
 "%",
 "%",
 "%",
 "%",
 "%",
 "%",
 "%",
 "%",
 "%"
]

that is a valid JSON file (you can check it pasting it on a validator)

Now that we're sure that there aren't any decoding issue etc. (because Cypress automatically converts the JSON file into a JavaScript object) we can compare them.

Anyway: Cypress will still tell you that they aren't equal but it's not a big issue, other testing libraries (Jest etc.) sometimes fail making comparisons like yours. All you have to do is to convert both the objects to a baseline JSON string and compare them.

Try that

cy.readFile('example.json').then(json => JSON.stringify(json)).should('eq',JSON.stringify(tableValues1));

where

cy.readFile('example.json') // reads the file as expected
.then(json => JSON.stringify(json)) // once read, it converts the file into a JSON string
.should('eq', JSON.stringify(tableValues1)); // and compare it to the stringified version of your array

It works for me locally and you can find it working on my GitHub repository, let me know if you need something more ????

I might try this:

cy.get(".ibxudA").find('.WildnessText-kRKTej').should('have.text',"Wildness")

or

cy.get(".ibxudA").find('.WildnessText-kRKTej').invoke('text').then((text) => {
    expect(text.trim()).equal('Wildness')
});

This might be a similar question: How do you check the equality of the inner text of a element using cypress?

Surprisingly, this

cy.get("#myTable")
  .find(".table")
  .contains("unique_value")
  .should('have.length', 1);

or even this

cy.get("#myTable")
  .find(".table td")
  .contains("unique_value")
  .should('have.length', 1);

will return a false positive - if you run it with two unique_value table cells it incorrectly passes.

Ref contains - yields indicates a single value is returned.

The best way I found was to shift the contains() up into the .find() selector,

cy.get("#myTable")
  .find('.table td:contains("unique_value")')
  .should('have.length', 1)

The above tests uniqueness between cells. If you want to also test the value within the cell, the simplest way is to invoke the text() method.

cy.get("#myTable")
  .find('.table td:contains("unique_value")')
  .should('have.length', 1)          // ensure only one cell has value
  .invoke('text')
  .should('equal', 'unique_value')   // check the exact content of the cell

See the first example on this page Assertions

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

You can simply click somewhere on the body:

Cypress.Commands.add('clickOutside', function(): Chainable<any> {
  return cy.get('body').click(0,0); //0,0 here are the x and y coordinates
});

In test:

cy.get('[data-test-id="popover-container"]').clickOutside();

click reference

Adding headers to a cy.visit() request was added in 3.2.0. Update your installed Cypress version and try that again.

Here's a screenshot of the code from the OP running in Cypress 3.2.0: