5 ms·
There's a chrome extension that records all your steps and then generates a puppeteer/playwright script for you. Then you can just edit bits of that script and
by fareesh 4y ago
There's a chrome extension that records all your steps and then generates a puppeteer/playwright script for you. Then you can just edit bits of that script and run it. This is my go-to method presently.
I feel like you could incorporate some of those features into this and eliminate some of the manual entry of css selectors.
- iamandras 4y agoOh, interesting. What is the name of that extension?
- Fnoord 4y agoSelenium allows this, and its also there for Firefox. You can even export the actions as a different language e.g. Python.
- yareally 4y agoProbably this: https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda https://chrome.google.com/webstore/detail/headless-recorder/...
- EddySchauHai 4y agoYou 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 :)
- fizzpack 4y agoWhy 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?
- EddySchauHai 4y agoIt 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 :)
- yowmamasita 4y agoIt detects the data-testid attribute quite well. We use it at work in replacement of manually creating cypress scripts.
- EddySchauHai 4y agoThat’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?
- fareesh 4y agohttps://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda https://chrome.google.com/webstore/detail/headless-recorder/...
- czbond 4y agoI just started using a Selenium IDE + selenium-side-runner for headless automation. Is puppeteer or Selenium a more widely supported tool?
- EddySchauHai 4y agoSelenium is the most popular tool in the industry but mostly for legacy reasons, its real competitor is Cypress. If you've just started a project I'd recommend checking it out, a huge time saver is that you install it as an npm package with a headless browser out the box without any webdriver/infra stuff slowing you down.
- czbond 4y agoThank you - I'll check it out.
- bckr 4y agoSelenium is more widespread but I recommend Playwright as the most modern automation library. Comes with plugins for making your automations more... nimble.
- czbond 4y agoThank you - I'll try it out.
- xnx 4y agoUI Vision? https://chrome.google.com/webstore/detail/uivision-rpa/gcbalfbdmfieckjlnblleoemohcganoc?hl=en https://chrome.google.com/webstore/detail/uivision-rpa/gcbal... iMacros? https://chrome.google.com/webstore/detail/imacros-for-chrome/cplklnmnlbnpmjogncfgfijoopmnlemp?hl=en https://chrome.google.com/webstore/detail/imacros-for-chrome...
- eastendguy 4y agoI use both! UI Vision is unique because it supports visual automation with image recognition and OCR. A bit like Sikuli but inside the browser. This avoids dealing with CSS selectors and XPaths.
- lrobinovitch 4y agoBrowserflow https://browserflow.app https://browserflow.app is excellent!
- 5350-uiop-1130 4y agoI really like the clean and simple layout of this website. It looks like bootstrap maybe. I wish more websites would follow this kind of layout.
- hoten 4y agoFYI this is now built into the Chrome devtools "Recorder" panel.
- magundu 4y agoWe are using Automa chrome extension for this kind of use cases. We really like it. It is free and open source. If you are thinking of building a product, you can make use of it. https://www.automa.site/ https://www.automa.site/ https://github.com/AutomaApp/automa https://github.com/AutomaApp/automa