deploysentinel/recorder

A browser extension that generates Cypress, Playwright and Puppeteer test scripts from your interactions 🖱 ⌨

recorder's Issues

Firefox Support

Unfortunately Firefox doesn't support Manifest v3 extensions with submissions to be accepted early 2022.

Until then, we'll likely will need to look into either creating a separate set of files for Firefox support for Manifest v2 and understand the major differences (possibly background.js might need to be changed due to the major switch between service workers and background pages).

Support for Laravel Dusk

Generate Laravel dusk code

Support Recording Content in Content Editable Inputs

If a user is typing text into a content editable textbox (ex. gmail message composer), we won't handle capturing the text entered properly. We should probably try to treat them similar to inputs if we can.

Page becomes irresponsive

Page becomes irresponsive after doing any interaction on it and after navigation.

Assert button doesn't appear on Firefox

Hi,

The assert button doesn't appear on Firefox, I verified it appears on Chromium

Bug: Recording text entries into multi-line fields generate incorrect code

If you enter multi-line content into a text field, the recorder won't properly escape the new line characters.

ERESOLVE could not resolve

Recorder](main)$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@">=16.x" from @fortawesome/[email protected]
npm ERR!   node_modules/@fortawesome/react-fontawesome
npm ERR!     @fortawesome/react-fontawesome@"^0.1.15" from the root project
npm ERR!   2 more (@hot-loader/react-dom, react-copy-to-clipboard)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! react-dom@"^17.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.2" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"^17.0.1" from the root project
npm ERR! 

不能录制iframe页面

我需要录制很多登陆的页面，但是有很多iframe，现在不能使用了，大佬有具体的方案吗？

Screenshot Event Creation

One helpful part of test scripts would be to capture images, especially for test scripts run in CI environments where the user isn't running the script locally and can switch to headed.

Today there's no way to tell the recorder to record a screenshot event, it'd have to be written manually by the user after copying the code.

Allow Control Bar to be Moved/Hidden

Sometimes the control bar obscures part of the UI that's being tested, we should allow users to adjust where the control bar is positioned or allow it to be hidden.

Perhaps either allowing them to drag the control bar UI around, be able to move it from being on the bottom versus top, or just allowing it to be collapsed/hidden.

Example from Heap (collapse button):

Example from Pendo (move button on top right):

React selectors

I've noticed if you are using React things are typically a lot easier to select using the new(ish) React selectors playwright supports. https://playwright.dev/docs/selectors#react-selectors. This is because a lot of times you would not have assigned unique classes / ids to your dom elements unless you set up your app with this concept from the start.

Would you accept a PR to add support for using React selectors instead of classes etc? Maybe have an option in the UI to toggle between the two? And any idea how I could get started with those changes?

Thanks.

Can we detect "random" ids to avoid them?

I tried the extension with a Magento 2 checkout flow (Luma based theme).

This is parts of what I got

  # in the cart

  // Click on <input> #cart-51378-qty
  cy.get('#cart-51378-qty').click()

  // Click on <input> #cart-51378-qty
  cy.get('#cart-51378-qty').click()
  
  # in the checkout

  // Click on <input> #ECIHNWG
  cy.get('#ECIHNWG').click()

  // Click on <input> #SERNC0C
  cy.get('#SERNC0C').click()

This shows that using IDs is not always a good idea.

In the cart-qty input, there is the cart-id which would change on each run and thus is useless.

On the checkout page where I fill the name, address and so on, the inputs are generated by knockout JS and have always random IDs. There it would be better to use the input name selectors.

I know that especially the second case is hard to detect.

If the string "looks" very random, it might be autogenerated and not a meaningful.

Maybe such a an algorithm could be used https://github.com/adobe/stringlifier

I can't get cross-domain iframe operations

I can't get cross-domain iframe operations, For example:


during input username and passwd , Generated Code like

Support for Cypress test generation

Make it happen, plz :)

Cannot record chrome extension

I cannot record chrome extension such as chrome-extension://xxxx/index.html, do you have any suggestions?