How to use curCSS method in Cypress

You can read the csv file from spec file using:

cy.readFile('file.csv')
  .then((data) => {
     cy.task('csvToJson', data).then((data) => {
            //process data
        })
   })

After that you create a task in plugins/index.js

csvToJson (data) {
  var lines=data.split("\n");
  var result = [];
  var headers=lines[0].split(",");
  for(var i=1;i<lines.length;i++){

      var obj = {};
      var currentline=lines[i].split(",");

      for(var j=0;j<headers.length;j++){
          obj[headers[j]] = currentline[j];
      }
      result.push(obj);
  }
  // console.log(result)
  return result
}

This will will do the job

You have to chain .find(selector) after .shadow()

like:

cy.get('.MuiInputBase-input').shadow()
    .find('#search-clear')
    .invoke('show')
    .click()

example in documentation

side note:
Why are you using *[class^="MuiInputBase-input"] and div[id="search-clear"]
instead of .MuiInputBase-input and #search-clear?

You can get it by using the invoke('val') method, something like:

cy.get('#input_text_employee_name')
  .invoke('val')
  .then((val) => {
    cy.log(val) //prints hi@there.com
  })

You can also apply an assertion with should('have.value') like this:

cy.get('#input_text_employee_name').should('have.value', 'hi@there.com')

When using the pattern cy.route(method, url, response), the response parameter is use to stub the call and return the supplied response to your app, see (route() - Arguments)

response (String, Object, Array)

Supply a response body to stub in the matching route.

Note that creating an overwrite of cy.route() will be hooking into the route configuration, not the capture of the route.

The pattern cy.route(options) has an onResponse option which can be used to console.log() the response, but cy.log() does not work there, probably because we invoke a command inside a command.

Cypress.log() can be used instead.

cy.route({
  url: 'http://example.com',
  method: 'GET',
  onResponse: (response => {
    const message = `The route '${response.url}' had a ${response.status} status code.`;
    const log = Cypress.log({
      displayName: 'Route debugging',
      message: message,
      consoleProps: () => {
        // return an object which will
        // print to dev tools console on click
        return {
          message: message,
        }
      }
    })
    log.finish();  // remove log spinner
  })
})

/*
  Command log output:

    ROUTE DEBUGGING
    The route 'http://example.com' had a 200 status code.

*/

It looks like you have missed the install of cypress-xpath.

If you are installing with npm:

npm install -D cypress-xpath

or if you are installing with yarn:

yarn add cypress-xpath --dev

You clearly already have the the require statement in \cypress\support since that is the first path in the error stack.

.its() is just a shorthand for property extraction. Since it fails with the period, you could instead use bracket notation in a .then().

cy.wrap(paramObj)
  .then(paramObj => paramObj['timeline.ws'])

or just

cy.wrap(paramObj['timeline.ws'])

Playing around with the URL constructor

const urlString = 'http://example.com?timeline.ws=3600000&timeline.to&timeline.fm&timeline.ar=false'
const url = new URL(urlString)

cy.wrap(url.searchParams.get('timeline.ws'))
  .should('eq', '3600000')

cy.wrap(url.searchParams.get('timeline.to'))
  .should('be.empty')

cy.wrap(url.searchParams.get('timeline.ar'))
  .should('eq', 'false')

I can't see why the original code doesn't work, it looks perfectly good (without a running system to play with).

But the "fix" variation is backwards - the last intercept that is set up is the first to match.

From the docs:

This diagram shows route5 being the first (non-middleware) route checked, followed by route3, then route1.

Also, since each intercept is intended to catch only one call, add { times: 1 }, to make it so.

Given('I log in', () => {
  cy.intercept('GET', `**/user/peers`, {times: 1})
    .as('Peers1')                                     // catches 2nd call
  cy.intercept('GET', `**/user/peers`, {times: 1})
    .as('Peers0')                                     // catches 1st call
})

You can see it in this screenshot

where Peers1 is matched first then Peers0, but the following block is expecting the reverse order

Then('the dashboard displays {int} peers', expectedPeersCount => {
  cy.wait(`@Peers${expectedPeersCount }`).then(xhr => {
      const peers = xhr.response.body
      expect(peers.length).to.eq(expectedPeersCount)
  });
})

Called with 0 by And the dashboard displays 0 peers and then called with 1 by Then the dashboard displays 1 peers

Dynamic aliases

You might be able to set the alias dynamically depending on how many peers are in the response.

Given('I log in', () => {
  cy.intercept('GET', `**/user/peers`, (req) => {
    req.continue().then(res => {
      if (re.body.length === 0) {
        req.alias = 'Peers0'
      }
      if (re.body.length === 1) {
        req.alias = 'Peers1'
      }
    })
  })
})

If this works, then you don't need to worry about the order of setup.

Perhaps reversing the order catches it?

cy.contains('confirm your email address')
  .closest('.row') // get the container
  .contains('a few seconds ago')          // do you even need this? timeout === 4 seconds
        

Otherwise, .should(() => expect()...) will retry

cy.get('.row')
  .should($row => {
    // either fails triggers retry
    expect($row.text()).to.match(/a few seconds ago/i)
    expect($row.text()).to.match(/confirm your email address/i)
  })

Narrowing down the row list

As you mentioned, .should() does not change the subject so subsequent chain sees all the rows.

To narrow it down, follow with a .contains() that selects a single row

cy.contains('.row', 'Confirm your email address')
  .should($row => {
    // either fails triggers retry
    expect($row.text()).to.match(/a few seconds ago/i)
    expect($row.text()).to.match(/confirm your email address/i)
  })
  .contains('.row', 'Confirm your email address') 
  .click()

or you can apply the .contains() at the top

cy.contains('.row', 'Confirm your email address')
  .should($row => {
    expect($row.text()).to.match(/a few seconds ago/i)
  })
  .click()

or (logically) the message received "a few seconds ago" will be the one at the top

cy.contains('.row', 'Confirm your email address')
  .should($row => {
    // either fails triggers retry
    expect($row.text()).to.match(/a few seconds ago/i)
    expect($row.text()).to.match(/confirm your email address/i)
  })
  .eq(0) 
  .click()

For the simple problem of checking 'hello' doesn't exist, you can use .contain('hello') followed a .should(). So it would look something like this for the whole page:

// code to delete hello

cy.contains('.selector', 'hello').should('not.exist')

Or you can further narrow it down to a particular area of the app:

// code to delete hello

cy.get('.element-had-hello').should('not.include.text', 'hello')