How to export Jest or Cypress recording code?

[petrkrejcik]

I have created a new recording and I would like to paste the code to my Jest or Cypress tests. But I can see only code for Javascript/jQuery/Puppetteer.

How can I transform a recording to a Jest or Cypress code?

[tomgallagher]

Hi

Not possible at the moment, although it would not be difficult to add that - the functionality is all there.

I did not add the Jest and Cypress options for recordings, as I made the assumption that Jest and Cypress users would want to add assertions and these can only be added on Replay. That may have been an error on my part.

If you think that you would use this feature regularly, I could create it and update the extension.

Thanks

Tom

[petrkrejcik]

It would be nice to have that functionality. I would like to use it to create a basic skeleton of a test:

1. Record some UI task with the extension (e.g. fill a form)
2. Export the task to Jest/Cypress
3. Fine tune the code in the editor (use testing library selectors, add asserts, ...)
4. Save the test in the app repository

If your extension helps with such a use case I would be happy to include it in my regular test stack.

[tomgallagher]

OK. I'll try to take a look in next couple of days.

When you say, Jest/Cypress, what do you mean? I thought Cypress used Chai and Jest was normally with something like Puppeteer, Playwright or Selenium.

Why use testing library selectors, out of interest?

I'll post here when I push a new version with the changes.

[petrkrejcik]

I use both Jest and Cypress. Jest for integration tests and Cypress for E2E tests. It doesn't matter if either of them uses Chai or something else. Testing library supports both of them and I like it because of its philosophy - do not write tests for test user. The idea behind testing library is rather how to make the selectors rather than which assertion library is used.

I would like to have a basic test flow pre-generated (e.g. clicking on elements, typing, etc). In the ideal world a tool which I am looking for would output something like:

// Cypress
cy.findByRole('textbox', { name: 'Name' }).type('John Doe');
cy.findByRole('button', { name: 'Submit' }).click();

// Jest
fireEvent.change(await findByRole('textbox', { name: 'Name' }), { target: { value: 'John Doe' } });
fireEvent.click(await findByRole('button', { name: 'Submit' }));

Then I would add the assertions by myself. And I also understand that it's impossible to copy/paste the generated code 1:1 and use it as it is. I expect that I need to change the selectors, add awaits, assertions, etc. That's good for me. I just feel that every tool which makes writing tests less pain motivates developers to write (more) tests. And it seems to me that your tool might be one of those.

Maybe it would help you to deploy some beta branch (with "prototype" code) so I can install the extension locally (without need to publishing it) and we can validate if the result works for such a use case?

[tomgallagher]

That sounds doable.

My only question: can you give me a link to detail where the 'fireEvent' is in the Jest API? Or are we talking in fact about Jest + Testing Library? If so, then that would require a new code generator.

[petrkrejcik]

You're right - fireEvent is a Testing Library API. But even if you use standard DOM API (dispatchEvent) or another testing utility/framework than Testing Library (e.g. Enzyme and its simulate) these are lines of code which can be found and replace in bulk. So in the beginning I wouldn't worry about DOM/Enzyme/TL API, just choose the most suitable one for you. Later if we verify that the idea works we could create dedicated generators for each of the framework.

Do you think it's OK? Can I be helpful in the implementation?

[tomgallagher]

In the end I'd obviously like to get more people involved in the project, as it's open source.

I'll do the prototype branch for recordings with Cypress and Jest/Puppeteer, then we can look at that. After that, doing the Jest / Testing Library, I would definitely need some help with the trickier events in Testing Library, as I've not used it.

If you take a look at: Jest and Puppeteer files then you can see how the code output strings get built. Not too tricky.

[tomgallagher]

First version with Cypress and Testing Library options in Recording code output now visible in 'Prototype' branch.

If you could have a look at it and try it out then that would help.

[petrkrejcik]

I appreciate your fast prototype! I've tried it and I can see output for both Cypress and Testing Library. And it's really easy and fast to get a basic code for a test without almost any effort. Exactly what I am looking for!

I can keep playing with that more and write down some notes what could be improved. For example if I type into a textfield my keyboard presses are not logged.

Thank you for a great work!

[tomgallagher]

Keyboard presses are not recorded on input fields - the input change event is monitored instead and the value collected on blur. Check out this file in recordingScripts folder.

That's not to say it's working perfectly, so reports are always good. Keyboard logging is the hardest part of the project.

[tomgallagher]

I'm going to close this issue.

Let's keep in touch. You can contact me via the email link in the extension and I'll reply via my personal email.

[tomgallagher]

FYI I'm going to merge the prototype branch with master and push a new version with these improvements to the web store. I'll probably delete the prototype branch at the same time

[tomgallagher]

Also, the new version offers proper keyboard logging as well as the input changes

[tomgallagher]

new version 1.0.1.5 pushed out for review, proper keyboard record and replay added.