Cypress: Console output with suggested test from selector (record/wizard mode)

[rblalock]

Easiest way to explain is a demo: https://db.tt/skFnp7gz

In other words, when you start interacting with your page, a mode that outputs a potential test for what you did, so a user can copy / paste it in to their test.

[brian-mann]

Right I agree, one thing that's still mentally taxing is having to manually traverse the DOM to create commands.

I think to really solve this we need something like in Chrome Dev Tools where you click the icon in the top left hand corner which highlights elements as you mouse over them. That way you just hover over the thing you want to interact with.

Cypress could be smart enough to figure out whether to use a selector approach (cy.get) or a text content approach (cy.contains). It could even go one step further by actually issuing action commands as you naturally interact with your app. So cy.click when you click, cy.dblclick when you double click. Even cy.drag when you drag.

I would call this "record" mode or "VCR" mode. I experimented with this awhile ago, and its very feasible. It will just take probably 2-3 weeks of work. Might be something we do once we hire more FT people.

I'll leave this issue open because it's something we will most likely do.

[rblalock]

Yeh a "record" mode toggle would make sense since it's def. something you wouldn't always want on.

[kohesion]

We want to be able to build tests as quickly as possible.

We believe that we could go faster if there was a multi-part point and click DOM selection feature.

I envision ability to click a "record" button, select the 3 elements I care about. At this point, placeholders are put in generated stub script (to be copy pasted?) and then I can describe the interaction with code later on.

[brian-mann]

Right. This is definitely something on our roadmap and we've experimented with it. It's definitely not easy to do, and will take a lot of work to build, but there's likely an MVP we can come up with to get this going in the right direction. Currently we won't have bandwidth to start on this for a little while. I'd be happy to do a proposal and come up with a comp of what I think is a good starting place. Hopefully the community could contribute to that.

[filiphric]

If you are looking for an easy way to find your selector, you should try this killer chrome extension. Could not imagine mi life with cypress without it. @brian-mann if you are thinking of implementing a recording functionality, I think this might be an interesting approach

[jonsteelman]

Record option would accelerate getting started with Cypress, a great jumpstarter.

[yashutanna]

Hey guys!

firstly thank you for this project - really like it.

Is there any update about the work in this space? I am currently looking to set my team up with a quick way to start end to end testing.

basically I want to give the platform to our product owner who is not very technical, allow them to install a chrome/firefox extension that allows them to record their interactions. I want to import those interactions and split them as a suite of fixtures. This is functionality that the new Selenium IDE provides.

If this feature is deprioritised for the time being - does anyone know of a decent alternative?

another thing that could work is exporting the .side project provided by Sel IDE and importing it into fixtures on cypress?

[jennifer-shehane]

This feature is still in the 'proposal' stage. No work has been done on this feature as of yet. We're a small team and as much as we'd love to work on everything, we have to choose what to work on based on a multitude of things.

[dwelle]

Just came across checkly/puppeteer-recorder which is a browser extension that records your interaction on a web page and generates commands for puppeteer.

I thought striving for something similar would be ideal, what do you think?

[aurolle]

This could really speed up the adoption of cypress. I will look around for it

[vlafranca]

I found that there is a chrome extension on the market but it need to improve : https://github.com/iGitScor/cypress-recorder
https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb

[mussrya]

Would love this as a feature. It would make such a difference to perform quick tests and really make cypress stand out from the range of other testing frameworks out there as they all seem to lack this capability

[PeterMurdoch]

+1 for this feature

[flotwig]

Workaround

For anyone looking, there's a semi-popular Chrome extension that records Cypress tests directly from your actions:

https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb

I haven't used it myself, but it ought to meet the use case in the OP here.

[chauey]

@flotwig someone already mentioned above

[meeladdawood]

@jennifer-shehane Is there an update on this feature or a prototype that people can play with?

[ken-can-code]

@rblalock @jennifer-shehane There is a new Cypress Recorder extension (different from the one posted above) that we have created that we feel may be closer to what you are asking for than the previously posted one above.

https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab

Please feel free to let us know what you think.

[jimpriest]

I wonder if another option would be to build an Cypress exporter for Selenium IDE?

[danielkroon]

Didn't' such a recorder function already existed in the first version of Cypress?

[buremba]

Ideally, something like this would be great for starters:

The photo is taken from https://github.com/qawolf/qawolf

[mingyixu]

There is a new Cypress Recorder extension : https://chrome.google.com/webstore/detail/alibaba-scenario-recorder/inodhkekikcaapcjhcepfiplgeoffjpb

[mbolotov]

Cypress Support Pro plugin for IntelliJ platform now supports scenario recording, see this video overview: https://www.youtube.com/watch?v=FgnHYwmguFI

[aalexgabi]

Since #8615 was closed as a duplicate of this, I will post here.

This is a workflow proposal. I don't have time now to write a full specification. I will improve the specification if there is enough interest.

This is my attempt to make tests extremely easy to write and maintain. Debugging is already pretty good with cypress.
The proposed workflow is different way of working with tests but please hear me out.

The proposed workflow:

• Create an new test case in the UI and give it a name
• Record user interactions in the browser and store them either as reusable actions or directly in the test case
• You can name sequences of actions such as "login", "go to profile", "go to user settings" etc.
• One action can call other actions
• When the login page changes, changing the login action will fix all test cases that depend on login action
• This makes composing tests easy and allows re-usability which makes tests easily maintainable
• Those actions will be stored as data and not as code to allow editing them later (maybe standardized json file format)
• You can also write actions manually in a text-area which highlights the code and does syntax checking
• Add simple assertions to actions by
  
  
  
  • right click on selected text and click "assert presence of this text"
  
  
  • right click on any element and click "assert presence of element"; maybe some settings pop-up allows finer tuning of the assertion
  
  
• Of course instead of right click a modifier key can be used (Ctrl, Alt etc.)
• If you need to write a complex assertion that require code you can add a manual assertion and paste the assertion code in a text-area which highlights the code and does syntax checking
• Cypress can read this json file and execute it. Looping through all the test groups, test cases, actions and executing them calling the cy API
• The UI allows replaying a test case up to any breakpoint
• You can insert or overwrite user interactions at breakpoint in the action sequence by recording in insert or overwrite mode
• The json file can be comitted in git the diff of the file can be read
• You can use multiple json files when they get too big
• One json file can include another one to simplify sharing of actions
• You have a working history of the file using Ctrl + Z etc.

Example test case:

• login (action)
  
  
  
  • go to login page
  
  
  • put email
  
  
  • put password
  
  
  • click submit
  
  
• remove user photo (action)
  
  
  
  • go to profile page
  
  
  • click on remove photo
  
  
  • click submit
  
  
• go to profile page
• assert photo is not present

Actions like "login" and "remove user photo" can be reused.

What are your thoughts on this? Why this is not the way we do testing today?
Don't get me wrong you will still need to write code for some assertions and for simulating some interactions but this solution does not force you to write code if you don't have to.

[abanta1212]

Hi. I am new to Cypress and this forum. I've tried the Cypress Recorder, but when I copy and paste it in Visual Studio Code and try to run it, I get errors. It says, 'The following error originated from your test code, not from Cypress. This usually happens when you accidentally write commands outside an it(....) test.'

Has anybody experienced this? Thanks.