npx @cypress/chrome-recorder <.json>

[willowloveforever]

Hello, I encountered a problem while using the npx @ cypress/chrome recorder command to convert the exported JSON file recorded by the Google Recorder tool into a cypress use case. After the conversion, the specific positioning in JSON was blurred. Causing an error in running the use case and not finding the element. what should I do? thanks

[Who-Code]

Currently there is no support for offsetY and offsetX in the converter.
The '#appendClickStep' of the conversion just generates either a click or rightClick on the relevant selector.

There may be the option to implement that via a pull request. BUT!

Cypress is intended as a e2e testing tool.
The best way would be to add dedicated selectors to al your e2e fields, buttons and stuff like mentioned at
https://docs.cypress.io/guides/references/best-practices#How-It-Works.

Add a dedicated selector as a data attribute like data-cy="active-menu-item".

Also think about removing some pointer events application wise to remove clutter during recording - for Example:

Im assuming in your app you have got a menu with list items (li) one list item is the active one which would be clicked (li.ant-menu-item-active). Now the actual clicked item would be li.ant-menu-item-active.
But the item text is wrapped in a span and the user, during recording, clicked on the text. Thats why this results in the span being part as the selector.
If the span would exclude click events it won't appear in the recording.

But thats just assumptions.

Maybe if more people would like the offsetY and offsetX feature than they will comment here and someone finds time to make a PR.