How to use getRuns method in Cypress

It's a bad practice use waits in cypress. I'd suggest use the playground

https://docs.cypress.io/guides/core-concepts/test-runner.html#Selector-Playground

to find your items. Try to follow the Uniqueness principle and use the cy.get('[data-test-selector=you-selector']); instead of wait. It'll wait for you.

For example, visit and cy.get the title page.

Also, if you have animations, it might cause DOM issues with back and forth. If you remove them it'll be faster and more stable.

The basic problem here is that Cypress commands run asynchronously from the test code that creates them. You can see this if you put console logs into your code,

var myID;
cy.get('#MYID')
  .then(($txt) => {
    myID=  $txt.text();
    console.log('1', myID);
  })
 .should('not.equal', null); 

console.log('2', myID);

This prints out

2 undefined
1 myText

You can use an alias to overcome this and pass a value down the command chain.

See this section of the docs which shows a similar pattern of code you are using in the DO NOT USE THIS example.

BUT aliases get cleared down between tests, so you should set up a beforeEach() to obtain a new copy of the required ID for each test.

There's another problem with the way you obtain the text value.

Without a return statement the .then() command passes on whatever subject it receives to the next command. See then- Yields

Additionally, the result of the last Cypress command in the callback function will be yielded as the new subject and flow into the next command if there is no return.

So the .should('not.equal', null) is testing that the element isn't null, not that the text is not null.

A better way is to .invoke('text') which is equivalent to $txt.text() and yields the text value to the .should().

Also .should('not.equal', null) won't test that the content is present, since an empty element returns an empty string from element.text(). Use .should('not.equal', '') instead.

Saving via an Alias

describe('grabbing ID for use in multiple tests', () => {

  beforeEach(() => {
    cy.visit('my-page-1.html')
    cy.get('#MYID')
      .invoke('text')
      .as('mySavedID')
  })

  it('ID should not be null', () => {

    cy.get('@mySavedID')
      .should('not.equal', '')

  })

  it('ID should be found in table', () => {

    cy.visit('app/navigate-to-new-page-2.html');
    cy.get('@mySavedID').then(myID => {
      cy.get('#myTable').find('td').contains(myID);
    })

  })
})

Saving by queuing the setting of the variable

The alias pattern may not be ideal if visiting page #1 is time consuming.

In this case, you can save the variable via a custom command. The difference is that the code you had within the .then() is moved into a command which is queued, so the async problem does not occur.

describe('grabbing ID for use in multiple tests', () => {

  let savedVariable;

  Cypress.Commands.add("saveVariable", {prevSubject: true}, (value) => {
    savedVariable = value;
  });

  it('id should not be null', () => {

    cy.visit('my-page-1')
    cy.get('#someId')
      .invoke('text')
      .should('not.equal', '')
      .saveVariable()

    // OR test the variable separately like this

    cy.wrap(savedVariable)
      .should('not.equal', '')
  })

  it('id should be found in table', () => {

    cy.visit('my-page-2');
    cy.get('#myTable').find('td').contains(savedVariable);

  })
})

NOTE
The above is valid if the two pages are in the same domain, e.g two pages of a SPA. Otherwise, the test runner resets itself when a new domain is encountered, and all javascript variables are lost.

You can just read the fixture first

cy.fixture('login_incorrect.json').then(data => { // may not need it, but in case...

  cy.intercept('POST', '**/login', (req) => {
    const body = JSON.parse(req.body);
    if(body.password === 'wrongpassword') {
      req.reply(res => {
        res.statusCode = data.statusCode;     // data = closure from above
        res.body = data.body;
      })
    } else {
      // load a different fixture based on something, etc.
    }
  }).as('response');

})

Combined fixture

{
  "put-first-hash-here": { 
    statusCode: ...,
    body: ...
  },
  "put-second-hash-here": { 
    statusCode: ...,
    body: ...
  },
}

Test

cy.fixture('combined.json').then(data => { 

  cy.intercept('POST', '**/login', (req) => {
    const body = JSON.parse(req.body);
    const hash = md5(req.body);
    if(body.password === 'wrongpassword') {
      req.reply(res => {
        res.statusCode = data[hash].statusCode;
        res.body = data[hash].body;
      })
    } 
  }).as('response');

})

Yes. Anything you can do in JavaScript is possible within Cypress tests. For the html above, you could do this within Cypress using .invoke():

cy.get('input[test]')
  .invoke('attr', 'test', 'my new value')
  .should('have.attr', 'test', 'my new value')

Cypress uses jQuery under the hood, so you can invoke any function in jQuery like this. You could alternatively use plain JavaScript after yielding the input using .then():

cy.get('input[test]').then(function($input){
    $input[0].setAttribute('test', 'my new value')
  })
  .should('have.attr', 'test', 'my new value')

You could randomise the category based on the following:

const picked = Math.floor(Math.random()*3); // this gives you a random value from 0 - 3;

// using template string literals - we can add that into picked
cy.get(`div.tickets-info > div:nth-child(`${picked}`) > span > b`).type(3, {force: true})

from picked - you can have an array of elements which related to the categories:

const categories = ["Junior", "student", "normal", "senior"]

You could also have the values of the tickets in categories as objects and use that for calculating the total.

const categories = [{
  type: "junior", 
  value: 5
}, {
  type: "student",
  value: 3
}, {
  type: "normal"
  value: 10
}, {
  type: "senior",
  value: 3
}]

and you could say, use the picked value to calculate the total amount

const value = categories[picked].value * random_amount;
cy.get(".sum-field label:nth-child(1)").should("contain", value) // total

This has been asked a few times, and the short answer is to use jQuery, e.g

cy.visit(...)
cy.wait(1000)  // in case the page is initially slow to load

const text = Cypress.$('div').text();
if (text.trim().startsWith('Processing') {
  cy.wait(1000)
  cy.reload()
}

That gets you one reload, but I guess you want to repeat that until 'Success...', for which recursion seems to be the only way to repeat stuff until the right DOM appears.

function waitForText(attempt = 0) {

  if (attempt > 100) {   // choose cutoff point, must have this limiter
    throw 'Failed'
  }

  cy.wait(1000);
  const text = Cypress.$('div').text();
  if (text.trim().startsWith('Processing') {
    cy.reload();
    waitForText(attempt + 1) 
  }
}

cy.visit(...)
waitForText()

Well this seems to work, so it tells me I have some more to learn about .should()

cy.get('.check-box-sub-text').should('not.exist');

Friends

Firstly, Thanks for all your time & suggestions.

I have found the work around to trigger the mouseover event and show the bootstrap submenu. without using the { force: true }.

Solution that I implemented. Appreciated if anyone finds different and better solution. Please do share.

Cypress.$($elem[0]).siblings("ul").show();

Using this I have manually makes the ul to show first and then execute the click event of the submenu. For this I have tried

Cypress.$($elem[0]).hover(false, false);
Cypress.$($elem[0]).mouseover();
Cypress.$($elem[0]).trigger("hover");
Cypress.$($elem[0]).trigger("mouseover");

but above commands didn't work. So I move to manually trigger the hide/show event of jquery.

@Konrad is nearly correct, you need to return both the cy.request() and the result of the following .then().

But unfortunately you can't use async/await on Cypress commands as they do not return Promises, they return Chainer objects.

This is how you can adjust the code

const WebApiRequests = {
  url: "https://api.jsonbin.io/v3/b/62e129e3248d43754f074152",

  makeRequest: function (method, url, body) {
    return cy            // return the Chainable (it's not a promise)
      .request({
        method: method,
        url: url,
        body: body,
      })
      .then((response) => {
        return response.body["record"][0]["team"];   // return the modified response
      });
  },
};

const QueryingPage = {
  inputNameObject: function () {
    return cy.get("#inputName");
  },
};

describe("Navigate to Querying page", () => {
  it("Visits the Cypress website and clicks on the Querying menu", () => {
    cy.visit("https://example.cypress.io/commands/querying");
    WebApiRequests.makeRequest("GET",  WebApiRequests.url,  "")

      // use then to unwrap the Chainable
      .then(text => {
        QueryingPage.inputNameObject().type(text);          // passes
      })
  });
});