kabalabs/cypress-recorder

A dev tool that records user interaction with a web application and generates cypress code to allow the developer to replicate that particular session.

cypress-recorder's Issues

Wrong element id saved by the Cypress Recorder

Hello, I got an issue. I tried to use it on my application but it stores wrong element id.
Element id is 144, but it records it like this: #\31 44 instead of #144.
Could you please check ?

cy.visit('MY-APP-URL');
cy.get('#\31 44').click();

Firefox?

This looks like a great WebExtension - is there any reason it's only being offered for Chrome at the moment?

Prevents Interaction with Input Controls

As soon as I try to interact with input controls in my application, the recorder prevents clicks on that input element (a radio button). Afterwards, the entire page does not accept any more interactions. Also, the Browser Close button does not react anymore.
The console log shows nothing especially suspicious, except that it cannot load the source map of the extension.
How can I further investigate the problem?

Clicks on Angular Material are recorded improperly

When I click on an Angular Material button or checkbox (probably something else too) your tool records a click on .cdk-focused instead of on the correct CSS selector. For simple workflows, this is not a problem, but with complex workflows this causes havoc.

Is manifest working correctly on windows?

Hello I tried building extension on my development environment. And I got this error

I think src/manifest.json is broken and I added ./images/ to the all icon files inside images. And this solution worked.

I just wonder Is this problem coming from windows or npm doesn't run correctly?

Feature Request: Script Replay

I'd like to see features from the Katalon Recorder added here. One of the main things I'd like to see is the ability to either paste or load saved scripts and replay them directly in the browser from the extension.

I think it would also be nice if the extension had a pop out window to watch the recording instead of clicking on the extension icon.

Optionally copy one line of code

Hi there,

There are some instances where you only want to grab one or two elements a time but not allowed to, and if there are lots of recorded elements, it would be a hassle to delete each one by one. So instead of copying the entire lines of code, is it possible to optionally copy just one line of code if the user wants to? Or just allow the user to highlight and copy it.

Thanks!

Optionally grab a className instead of id

Does it only grab id of the clicked element? Can it be configured to grab a class or some other attribute?

Click canvas elements with explicit coordinates

In my application I have a map that is rendered on a canvas. Now when I use the recorder to record some test cases for clicking on certain positions on the map the recorder just generates normal clicks which target like some corner of the actual element. For canvas elements in particular it would be nice to actually record the clicked coordinates.

Might already be implemented in #155

Clicks within iframes are not recorded.

In our webapp we have some legacy code running in iframes, and when clicking in the iframe nothing is recorded.

cypress-testing-library output

Hi there,

This extension looks great.
I'm wondering if you could consider adding as an option an output using cypress-testing-library
I use that extension for cypress and make our life really really easy.

Will Cypress-Recorder works even with ShadowDOM?

Hello Sir,

I have a requirement to run test cases which has shadow-root....So can I use this tool of yours to get the test cases?

Thanks in advance

[Feature Request] Add block comment with timestamp and Cypress Recording info

Prepend an informative block comment above recorded script when copy pasting, such as:

/**
 * Generated with Cypress Recorder
 * https://github.com/KabaLabs/Cypress-Recorder
 * 
 * 13-10-2022 14:51:17 
 * 
 */

cy.visit('https://foo.bar')
cy.get('.jqbuttonsm > span').click();
...

record matching patterns support data-cy

is it possible to add option supporting data-cy id? or event self defined keyword that mentioned in cypress best practise.

Input box text is generated as code again after 'change' and return to input box

Due to the nature of how we handle generating code for user inputted text, when we trigger a change then go back to the input box, which still contains earlier text, yet another change will trigger the generation of code including whatever is left of user inputted text.

Feature Request: add cy.url()... when location changed

Great plugin, very useful.

However, I found some problems when using it.

page_1.html

<button class="my-button">show dialog</button>
<div class="my-dialog">
  <button>cancel</button>
  <button class="confirm-button">go page_2</button>
</div>

page_2.html

<button class="my-button">this is page_2</button>

Cypress scripts generated by the plugin

cy.get('.my-button').click();
cy.get('.confirm-button').click();
cy.get('.my-button').click();

Run scripts by cypress

CypressError
Timed out retrying: cy.click() failed because this element is detached from the DOM.
Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

  > cy.get()

This DOM element likely became detached somewhere between the previous and current command.

Common situations why this happens:
  - Your JS framework re-rendered asynchronously
  - Your app code reacted to an event firing and removed the element

You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.

It can be solved by add 'cy.url()...'

cy.get('.my-button').click();
cy.get('.confirm-button').click();
+ cy.url().should('contains', 'page_2.html');
cy.get('.my-button').click();

Cypress command type() missing value

Hi there,

lovely extension! I appreciate your effort!

Description:
Recorded command type() is missing its value.

Env:

• Mac Version 13.4.1
• Chrome Version 120.0.6099.199

Steps to reproduce:

1. open https://example.cypress.io/todo
2. Start Cypress Recorder
3. click into input "Whats need to be done?"
4. type "this is a test"
5. click li "All"
6. Stop Recording

Given Result:

cy.visit('https://example.cypress.io/todo');
cy.get('[data-test=new-todo]').type('');
cy.get('.todoapp').click();

Expected Result

cy.visit('https://example.cypress.io/todo');
cy.get('[data-test=new-todo]').type('this is a test');
cy.get('.todoapp').click();

Image:

Handle select tags with select() method

Hello,

Experimenting with this great extension, I had kind of a bug with select elements in my test page.

• Environement : Windows 10
• Version Cypress : 6.2.1 / open gui mode
• Application : Angular 10

The widget is a simple select element

Code generated
cy.get('#typePolice').click(); cy.get('#typePolice').type('1: 1'); cy.get('#typePolice').click();

Error message from Cypress
cy.click() cannot be called on a <select> element. Use cy.select() command instead to change the value.

After modification, I use the select method
cy.get('#typePolice').select('Globale');

If I can contribute, I'd be happy to help.

Alain

Resume button not "grayed out" on invalid tabs

Resume button is not styled to be "grayed out" on invalid tabs after resume functionality was added.

Possible to get old versions of plugin?

All,

I've been searching the web for a way to do this but is there any way to get the 1.0.0 version of the plugin?

"Chrome Webstore: Error 404 (Not found)!!1" ?

Hi,

I wanted to give your plugin a go but the url in the readme.MD doesn't seem to work: https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab

How can I run the application in my local.

Can you provide the procedure to start the application in local for development, i tried starting the application in my local but i was getting many errors as below
"Manifest file is missing or unreadable
Could not load manifest."
And if I try to select the src folder then also many errors were coming
It will be really helpful if you can provide the procedure to start the application in local along with the procedure to load it in the chrome extensions
Thank you.

Recognizing data tags

hello

Not entirely sure where to post this, but I'm running into an issue where I can't seem to use this in my project, as the navigation's classes are mostly generic.

I've added a few data tags to be able to test this manually however it'd be pretty cool if there was a way for the extension to recognize this.

Example html:

<div class="menu-login" data-cy="my-button">
<dev-extreme-wrapper>
<dev-extreme-button class="some-generic-class"></dev-extreme-button>
</dev-extreme-wrapper>
</div>

the test recorder is trying to do:

cy.get('.some-generic-class').click();

whereas I'd expect:

cy.get('[data-cy=my-button]')

I could change this manually of course, but I'm wondering whether it's possible to include the option for the extension to recognize any data-x tag when it is recording.