You can do it in the chrome browser tools! There's a record section. Note if you're doing this for automation testing it's going to be pretty flakey and you're better off following best practices and using custom testing selectors instead :)

Why is it flakey for automation testing though? In my experience that's basically targeting page elements and interacting with them. Doesn't this do the same thing?

It uses a combination of xpaths that are like body[1]div[2]div[1]p[2]button[1] so if you edit the UI it'll break, or worst case they do X,Y coordinates of clicks on a page so if the UI changes it'll break. Sometimes it'll get your ID or Name or whatever but some frameworks randomize these on compilation and some devs change them as part of refactoring.

Best practice is to add test attributes to the HTML elements (such as data-testid="SubmitButton") so if the page is moved around or the button is edited the tests remain stable. There's a lot of good online sources on making UI testing somewhat more reliable :)

It detects the data-testid attribute quite well. We use it at work in replacement of manually creating cypress scripts.

That’s good to know, I had bad luck with it then. But even so, you also lost the ability to use testing patterns like the page object model where you can update changing IDs or flows more easily - if something changes drastically early in the recording, wouldn’t it need to be re-recorded for all test cases?

Selenium allows this, and its also there for Firefox. You can even export the actions as a different language e.g. Python.

Probably this: https://chrome.google.com/webstore/detail/headless-recorder/...