How to use handleInvalidEventTarget method in Cypress

In the Cypress Docs there are two ways described how you can handle those JSON files from the fixtures folder: https://docs.cypress.io/api/commands/fixture#Examples

1. Option

Load your testdata.json using cy.fixture():

cy.fixture('testdata.json').as('testdata');

2. Option (my recommendation)

In your login.spec.js you can import all relevant json files from your fixtures folder:

import testdata from '../fixtures/testdata.json';

You can then directly use them as follows to for example use the username and password for the first user:

  it.only('TC03 - Login with valid data as subscriber', () => {
    cy.login(testdata[0].username, testdata[0].password);                            
    cy.title().should('equal', 'Home');
    cy.logout();
  })

All the code and referenced modules in index.js are loaded before your test file. So you need to refer(require) commands.js in your index.js file. You can however import commands.js module directly in your test file but then you need to include it every test file. Recommended approach is to include it in index.js file and you are not worried about explicitly refer in your test files.

cy.task() needs to use .then() to get the value, like this example.

cy.task("connectDB", "select user_id from user_details where first_name='XYZ'")
  .then(user_id => {
    cy.request({
      method: 'DELETE',
      url: 'localhost:8080/user/' + user_id
    }).then((res) => {
      expect(res.status).to.eq(200)                // passes
    })
  })

If you try to assign the return to a variable let user_id = cy.task("connectDB"... you will get a chainer object, but it's not much use without a .then() to extract the value.

Maybe if i use a callback like parameter, then the second function will wait for the asynchronous task is over

   export function createSession(email,password,user_id,callback){
    cy.request({
        method:'POST',
        url:config.accounts_prod + '/token',
        headers:{ 
            'authorization': 'Basic testestestestest'
        },
        qs:{
            'grant_type':'password',
            'username':email,
            'password':password
        }
    }).then((response)=>{
        var X = response.body.access_token      
        cy.log("create session " + x)
        callback(response.body.access_token, user_id);

    })
}

var login = function (token,user_id) {
    var result = cy.request({
    method:'POST',
    url:config.ws_prod + '/login.pl',
    headers:{ 
        'authorization': token,
        'Content-Type' : 'application/x-www-form-urlencoded'
    },
    body:'user_id='+user_id+'&device_id='+device_id+'&os_type='+os_type
    })
    return token
}



// then call first fn

createSession(email,password,user_id,login);

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.

After clicking the login button, you can directly assert whether url contains some text. Also you can add some timeout as well for the redirection to complete.

cy.url({timeout: 6000}).should("include", "blabla[][1]][1]")

Considering your url is https://example.com/ Within the same test you can work with urls if they have format like https://example.com/something or https://example.com/something/123 or https://superdomain.example.com/. So basically the url should have the same origin. But in case the url is not from the same origin which is in your case, then you have to move to a new test to resolve this. This is a trade-off of cypress and you can read more about it from here. So you can do something like this:

it('logs in using env variables', () => {
  const username = Cypress.env('username')
  const password = Cypress.env('password')
  let href
  cy.visit('/')
  cy.get('.chakra-stack > .css-1n94901').click()
  cy.contains('Login with Carmarket').click()
  cy.get(':nth-child(1) > .form-control').type(username)
  cy.get(':nth-child(2) > .form-control').type(password)
  cy.get('.login > .submit > .button').click({multiple: true, force: true})
})

it('validate content of url', () => {
  cy.url({timeout: 6000}).should('include', 'blabla[][1]][1]')
})

The values between tags like <li>15</li> are accessed on individual element with .invoke('text').

invoke('val') is for <input> and <textarea> elements.

But if you select multiple elements, the texts will mash together

cy.get('li')                  // multiple elements selected
  .invoke('text')             // joins all text together, result is "5153045"
  .should('eq', '5153045')    // passes

In your case it's ok, but feels a little clumsy. In another scenario you can get additional white space between texts which makes it harder to compare.

You can use jQuery to extract individual texts, and they can be trimmed to make a better match when extra white-space is present

cy.get('li')                                            
  .then($els => Cypress.$.map($els, (el) => el.innerText.trim())) // uses jQuery .map()
  .should(values => {
    expect(values).to.deep.eq(["5","15","30","45"])
  })

But if your dropdown items are fetched from an API, you should put as much of the calculation as possible inside the .should() callback, because Cypress retries until passing

cy.get('li')                                            
  .should($els => {                                              // retries here
    const values = [...$els].map(el => el.innerText.trim())      // uses Array .map()
    expect(values).to.deep.eq(["5","15","30","45"])
  })

A simple workaround: in plugins/index.js do

module.exports = (on, config) => {
  if(config.hasOwnProperty('env') &&  config.env.hasOwnProperty('baseUrl')){
      config.baseUrl = config.env.baseUrl;
  }
  return config
}

I ran into a problem almost like yours with before.

before() runs before the next block of code.

describe("Some test", function() {
    before(function() {
        //something ...
        cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
    })

    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser doesn't exist here
    it("Should bar", function() {
    })
})

I fixed my problem moving the before() statement out from the describe scope.

before(function() {
    //something ...
    cy.request('POST', loginUrl, loginInformation).its('body').as('currentUser')
})

describe("Some test", function() {     
    // this.currentUser exists here
    it("Should foo", function() {
    })

    // this.currentUser also exists here
    it("Should bar", function() {
    })
})

I hope this can help you solve your problem.