How to use startSpiedVideoCapture method in Cypress

So aparently I was using the wrong cypress module.

This is for react testing

npx cypress open-ct

or

npx cypress run-ct

cypress/plugins/index.js:

const injectDevServer = require("@cypress/react/plugins/react-scripts")

module.exports = (on, config) => {
  injectDevServer(on, config)
  return config
}

TL;DR; put your entire code inside the then callback

it('should generate correct email', () => {
    const recipientEmail: string = 'some@email.com';
    const extractedUrl:string = '';

    // ....scenario generating a email to 'some@email.com'.....
    // plugin logs "https://some.url.com" after a few seconds
    cy.task('readMail', recipientEmail).then((result:any) => {
        extractedUrl= result;
        console.log(result); // logs "https://some.url.com" in the terminal
        cy.log("1:" + extractedUrl); // logs "1:https://some.url.com" in cypress UI
        cy.log("2:"+ extractedUrl); // logs "2:" in cypress UI
        console.log(extractedUrl); // logs nothing
        cy.visit(extractedUrl);
    });

});

Contrary to what it seems, Cypress commands do not return promises, they return promise-like object and the execution queue is handle by the Cypress framework. That's the main reason some actions that would be logical when handling promises will not work.

More info here: Await-ing Cypress Chains #1417

You could also try cypress-promise, that is a plugin to change cypress promise-like objects into actual promises. More info here: Cypress.io — Using async and await by Nicholas Boll

UPDATE #1:

You could also use alias in order to access the value:

it('should generate correct email', () => {
    const recipientEmail: string = 'some@email.com';
    const extractedUrl:string = '';

    // ....scenario generating a email to 'some@email.com'.....
    // plugin logs "https://some.url.com" after a few seconds
    cy.task('readMail', recipientEmail).then((result:any) => {
        extractedUrl= result;
        cy.wrap(result).as('extractedUrl');
        console.log(result); // logs "https://some.url.com" in the terminal
        cy.log("1:" + extractedUrl); // logs "1:https://some.url.com" in cypress UI
    });

    cy.get('@extractedUrl').then((extractedUrl) => {
        cy.log("2:"+ extractedUrl); // logs "2:" in cypress UI
        console.log(extractedUrl); // logs nothing
        cy.visit(extractedUrl);
    })

});

Cypress requires the ability to run its GUI. Depending on your Windows version, you likely need some additional configuration in order to run GUI applications in WSL:

• For all Windows releases, make sure you install the required dependencies:

  apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
  

  This may have been done for you depending on how you installed Cypress. I used the npm directions in the Cypress doc.

• Windows 11 includes the WSLg feature by default, which allows you to run GUI applications directly on Windows. If you upgraded from Windows 10 to Windows 11, run wsl --update to make sure you have the latest WSL version with WSLg.

  Also make sure, if you've attempted to run an X server on an older release (like in the next suggestion), that you remove any manual configuration of DISPLAY in your startup files (e.g. ~/.bashrc, etc.).

• For Windows 10, you will need to do some additional configuration. There are really two ways to do this, but it's a better topic for Super User (since it isn't directly related to programming), so I'm going to point you to this Super User question for some details. Either answer there is fine. While I'm partial to my solution, most people opt for running a third-party X server as in harrymc's answer there.

Just to make sure there weren't any "hidden tricks" needed to get Cypress running, I can confirm that I was able to successfully ./node_modules/.bin/cypress open using the Cypress instructions and my xrdp technique from the Super User answer.

    class DndSimulatorDataTransfer {
  constructor(){
      this.data = {};

      this.dropEffect = 'move';
    
      this.effectAllowed = 'all';
      this.files = [];
      this.items = [];
      this.types = [];
  }
 

  clearData(format) {
    if (format) {
      delete this.data[format]

      const index = this.types.indexOf(format)
      delete this.types[index]
      delete this.data[index]
    } else {
      this.data = {}
    }
  }

  setData(format, data) {
    this.data[format] = data
    this.items.push(data)
    this.types.push(format)
  }

  getData(format) {
    if (format in this.data) {
      return this.data[format]
    }

    return ''
  }

  setDragImage(img, xOffset, yOffset) {}
}
  Cypress.Commands.add('reactDnd', {
    prevSubject: 'element',
  }, (sourceSelector, targetSelector, options) => {
    const dataTransfer = new DndSimulatorDataTransfer();
    const opts = {
      offsetX: 100,
      offsetY: 100,
      ...(options || {})
    };
    cy.wrap(sourceSelector.get(0))
      .trigger('dragstart', {
        dataTransfer,
      })
      .trigger('pointercancel', {
        dataTransfer,
        force:true,
      })
      .trigger('drag', {
        force:true,
        dataTransfer,
      })
      .trigger('dragenter', {
        force:true,
        dataTransfer,
      })
      .wait(100);
    cy.get(targetSelector).then($el => {
      const {
        x,
        y,
      } = $el.get(0).getBoundingClientRect();
      cy.wrap($el.get(0))
      .trigger('dragenter', {
        dataTransfer,
      })
      .trigger('drag', {
        dataTransfer,
      })
      .trigger('dragover', {
        dataTransfer,
      })
        .trigger('drop', {
          dataTransfer,
          clientX: x + opts.offsetX,
          clientY: y + opts.offsetY,
          force: true
        })
        .wait(1000);
        cy.wrap(sourceSelector.get(0)).trigger('dragend', {
          dataTransfer,
          force: true

        });
    })
  });

I assume that inside the cy.log($(this).... you might still need to add cy.log(Cypress.$(this)... in order to use the jquery in Cypress. I haven't tried yet, but its worth to give a try.

Cypress.$(java).each(function() {
            cy.log(Cypress.$(this).find("configuration>property>name").text())
        })

You could store the response in a Cypress environment variable.

context('Verify email', () => {
  before(() => {
    cy.request(`${ENDPOINT}}&tag=${TAG}&timestamp_from=${startTimestamp}&livequery=true`)
      .then((response) => {
        Cypress.env('inbox', response.body);
    });
  });

  it('test', () => {
    // reference the variable by Cypress.env('inbox')
  });
});

1.To check element exists in the DOM:

cy.get(selector).should('exist')

2.To check that the element doesn't exist in DOM:

cy.get(selector).should('not.exist')

3.To check that element is visible:

cy.get(selector).should('be.visible')

4.To check that element is not visible:

cy.get(selector).should('not.be.visible')

5.Using JQuery:

cy.get('body').then(($body) => {
    if ($body.find(selector).length > 0) {
        //element exists do something
    }
})

You might need to use .then instead of should and the request should resolve inside promise. It is writing a file for me inside the fixture folder. But in the answer I left as the same path as given in your question.

it('Query Endpoint', () => {
        cy.request(
            {
                method: 'POST',
                url: '/api/service', 
                auth: {
                    username: Cypress.env('username'),
                    password: Cypress.env('password')
                },
                headers: {
                    'Content-Type': 'application/json',
                },
                body: {}
            })
            .then((request) => {
                const someRequest =  JSON.stringify(request);
                cy.writeFile('cypress/fixtures/api-service.json', someRequest)
                //...rest of the code 
          })

    })

This is the simplest way to perform the test, no need for a custom command in this case.

cy.getCookie('development').its('value')
  .then(sessionId1 => {

    cy.reload()

    cy.getCookie('development').its('value')
      .then(sessionId2 => {
        expect(sessionId1).to.eq(sessionId2)
      })
  })

If you want a custom command for other reasons,

Cypress.Commands.add('getSessionId', () => {
  cy.getCookie('development').its('value')    // last command is returned
})

cy.getSessionId().then(sessionId1 => {

  cy.reload()

  cy.getSessionId().then(sessionId2 => {
    expect(sessionId1).to.eq(sessionId2)
  })
})