test commands in the Chrome DevTools console

[mcelotti]

Hi, I'm using cypress 3.8.1, how can I test my commands in the Chrome DevTools console?
I read about the cy.now details here #3636 even though that command is not available on the official docs https://docs.cypress.io/api/api/table-of-contents.html
Cypress.io is an awesome piece of software but testing the commands in a live session is really important to me. How can I achieve that?

Thanks

[jennifer-shehane]

@mcelotti Using cy.now() is the way to do this as mentioned in the previous comment.

Issues in our GitHub repo are reserved for potential bugs or feature requests. This issue will be closed since it appears to be neither a bug nor a feature request.

We recommend questions relating to how to use Cypress be asked in our community chat. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.

[mcelotti]

Hi @jennifer-shehane thanks for the feedback.
Unfortunately the issue #3636 is not complete (no examples or use cases for something different than get or click) and as I wrote the cy.now is not part of the official documentation.
I thought this was an opportunity to shed light on the live test commands, but thanks anyway.

[jennifer-shehane]

For every command, you shift the args by one and pass in the command name as the first argument. That's it. If there is .doubleclick() command signature of:

.dblclick(position, options)

Then the cy.now() signature would be.

cy.now('dblclick', position, options)

This applies to every single command.

[mcelotti]

I was interested in more complex examples, for example I noticed that:

cy.get('.action-email')
  .type('fake@email.com')

... translates to:

cy.now('get', '.action-email')
  .then(el => cy.now('type', el, 'fake@email.com'))

So there's a bit of overhead to create these "translations" for debugging purposes.

I tried also a custom command:

Cypress.Commands.add('myCustomFunction', () => {
    console.log('myCustomFunction');
});

... as expected this translates to:

cy.now('myCustomFunction')

Thanks

[mauricioszabo]

I really can't make any of these examples work. When I use:

cy.now('get', '.action-email')
  .then(el => cy.now('type', el, 'fake@email.com'))

Nothing gets typed. I am able to get the element, see it on the console, I can use the result to set the value with jQuery, but the action itself cy.now('type'...) does nothing...

[willhlaw]

Same here, @mauricioszabo. I can't get approach by @mcelotti to work.

cy.now('clear', el) doesn't work.

Looks like the undocumented now command may not work for type, clear, or even contain whereas it works for get and click. See #3636 (comment).

[cvera08]

@willhlaw
could you please specify a working example of a click event?

I've tried things like these but none of them are working for me

cy.now('visit', 'https://the-internet.herokuapp.com/add_remove_elements/')
btn = await cy.now('get', 'div.example button')
await cy.now('click', btn)

or

cy.now('get', 'button[onclick="addElement()"]')
  .then(el => cy.now('click'))

Thanks in advance