Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Console output with suggested test from selector (record/wizard mode) #73

Closed
rblalock opened this issue Oct 26, 2015 · 27 comments · Fixed by #9542
Closed

Console output with suggested test from selector (record/wizard mode) #73

rblalock opened this issue Oct 26, 2015 · 27 comments · Fixed by #9542
Labels
Epic Requires breaking up into smaller issues pkg/reporter This is due to an issue in the packages/reporter directory pkg/runner This is due to an issue in the packages/runner directory type: feature New feature that does not currently exist

Comments

@rblalock
Copy link

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
Copy link
Member

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
Copy link
Author

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

@jennifer-shehane jennifer-shehane added the type: feature New feature that does not currently exist label Oct 27, 2015
@jennifer-shehane jennifer-shehane added the stage: proposal 💡 No work has been done of this issue label Oct 12, 2017
@kohesion
Copy link

kohesion commented Oct 12, 2017

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
Copy link
Member

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
Copy link

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
Copy link

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

@RandallKent RandallKent changed the title Feature: Console output with suggested test from selector Feature: Console output with suggested test from selector (record/wizard mode) Nov 7, 2017
@yashutanna
Copy link

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
Copy link
Member

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
Copy link

dwelle commented Aug 19, 2018

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
Copy link

aurolle commented Dec 17, 2018

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

@vlafranca
Copy link

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
Copy link

mussrya commented Jan 25, 2019

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

@jennifer-shehane jennifer-shehane added Epic Requires breaking up into smaller issues pkg/runner This is due to an issue in the packages/runner directory pkg/reporter This is due to an issue in the packages/reporter directory labels Jan 28, 2019
@PeterMurdoch
Copy link

+1 for this feature

@jennifer-shehane jennifer-shehane changed the title Feature: Console output with suggested test from selector (record/wizard mode) Console output with suggested test from selector (record/wizard mode) Feb 1, 2019
@jevors jevors mentioned this issue Apr 23, 2019
@flotwig
Copy link
Contributor

flotwig commented Apr 24, 2019

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
Copy link

chauey commented Apr 25, 2019

@flotwig someone already mentioned above

@danielkroon
Copy link

danielkroon commented Mar 18, 2020

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

@buremba
Copy link

buremba commented Apr 16, 2020

Ideally, something like this would be great for starters:
image
The photo is taken from https://github.com/qawolf/qawolf

@mingyixu
Copy link

mingyixu commented May 8, 2020

@mbolotov

This comment has been minimized.

panzarino pushed a commit that referenced this issue Sep 13, 2020
This ensures that the Webpack SourceMapDevToolPlugin can handle the file, even when it has been originally no javascript file (e.g. .ts or .feature).

Co-authored-by: Chris Breiding <chrisbreiding@users.noreply.github.com>
@aalexgabi
Copy link

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
Copy link

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.

@cypress-bot cypress-bot bot added stage: work in progress and removed stage: proposal 💡 No work has been done of this issue labels Dec 7, 2020
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: work in progress stage: needs review The PR code is done & tested, needs review labels Jan 12, 2021
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review and removed stage: work in progress labels Jan 19, 2021
@cypress-bot cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Jan 19, 2021
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jan 19, 2021

The code for this is done in cypress-io/cypress#9542, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jan 20, 2021

Released in 6.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v6.3.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Jan 20, 2021
@jennifer-shehane
Copy link
Member

Cypress Studio provides a visual way to generate tests within the Test Runner, by recording interactions against the application under test. Cypress Studio is an experimental feature that can be enabled by setting experimentalStudio to true in your configuration, cypress.json by default.

If you're encountering a bug with the Cypress Studio, please open a new issue.

We would ❤️ to hear any other feedback about the Cypress Studio here: https://on.cypress.io/studio-beta

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Epic Requires breaking up into smaller issues pkg/reporter This is due to an issue in the packages/reporter directory pkg/runner This is due to an issue in the packages/runner directory type: feature New feature that does not currently exist
Projects
None yet
Development

Successfully merging a pull request may close this issue.