How to use createButtonPseudo method in Cypress

My mistake for not knowing or not checking the location of my cypress.json file, moved it to the top cypress folder and value is shown properly.

Using invoke('val') instead of invoke('text') worked for my case.

Reminder of the html tag

<input type="text" class="form-control" name="email">

Cypress code

cy.get('input[name="email"]')
  .invoke('val')
  .then(sometext => cy.log(sometext));

As you stated in your question there is not difference between cy.get("a").find("b") and cy.get("a b"). But the most important difference between find and get commands in Cypress is that cy.get() is chained off of cy, it always looks for the selector within the entire document as stated in Cypress documents. But as again stated in Cypress documents find works as follows:

Get the descendent DOM elements of a specific selector.

So the command cy.get("a").find("b") returns all the b elements which are successor of an a element, but cy.get("a").get("b") finds all the a and b elements regardless of they are parent and child.

I came up with this, I haven't tested it but I believe it will do what you're after.

Cypress.Commands.add('goTo', place => {
  cy.get("div.navigationIcon > div > div").then($navs => {
    var $desiredNav = $navs.find($nav => {
      return $nav.text() == place;
    });

    cy.wrap($desiredNav).click();
});

To make it work with your places array, I'd do this, or the for loop could be placed in your tests:

Cypress.Commands.add('goToPlaces', places => {
  for (let i = 0; i < places.length; i++)
  {
    cy.goTo(places[i]);
  }
});

I'll just add that if you decide to do if condition by checking the .length property of cy.find command, you need to respect the asynchronous nature of cypress.

Example: Following condition evaluates as false despite appDrawerOpener button exists

    if (cy.find("button[data-cy=appDrawerOpener]").length > 0)    //evaluates as false

But this one evaluates as true because $body variable is already resolved as you're in .then() part of the promise:

    cy.get("body").then($body => {
        if ($body.find("button[data-cy=appDrawerOpener]").length > 0) {   
            //evaluates as true
        }
    });

Read more in Cypress documentation on conditional testing

We had the same error when running cypress test in azure devops pipelines. And I think its the same reason, looking at your screenshot of the date picker without any button.

The input which was giving us the error was @mui/lab/DatePicker.

We found that this component is rendering as @mui/lab/MobileDatePicker when we ran the cypress tests in azure devops pipelines. It's explained here: docs. That version not accept direct text input, but opens a dialog to pick/input date, therefore cypress test fails when trying to type into the input.

Our solution was to use @mui/lab/DesktopDatePicker directly.

A couple of suggestions, Cypress has a .blur() command

// When this element loses focus aka blur event happens, POST call should happen
cy.get("#Expense_meter_start")
  .click()
  .clear()
  .type("200000")
  .blur()              // explicitly blur this element

or use {enter}

// When this element loses focus aka blur event happens, POST call should happen
cy.get("#Expense_meter_start")
  .click()
  .clear()
  .type("200000{enter}")     // blur this element with enter key

With this recursive function you just need to pass a variable that decrements (or maybe increments to a max)

function deleteAllFoundProducts(rowCount) {
  if (rowCount < 1) return // if no rows remain, terminate recursion
  cy.get('span[title="Delete"]', {timeout: 10000}).first().click()
  cy.get('.tBtn[title="Yes"]').click().then(() => {
    cy.get('.loader', {timeout: 10000}).should('not.exist') // wait for list to reappear
    deleteAllFoundProducts(--rowCount) // try again
  })
}

cy.get('tbody tr')
  .then(rows => deleteAllFoundProducts(rows.length))  // first call here

This will still work when there's a "No matching records found" row appended after deleting all rows, since rowCount is obtained before deletions start.

You can try dropping down to jQuery/JavaScript to manually set the field:

cy.get('select').then($country => {$country.val("gb")})

The $country above should be a jQuery object wrapping the html that you selected.

See: https://docs.cypress.io/api/commands/then.html#Syntax