search

checkly / headless-recorder

Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.
https://checklyhq.com/headless-recorder
MIT License
15.03k stars 722 forks source link

Use nth-of-type/nth-child instead of class names for selectors #62

Closed ljocampo closed 5 years ago

ljocampo commented 5 years ago

Script records following selector:

.ag-cell-focus > .ag-react-container > .sc-caSCKo > .MuiSvgIcon-root-48 > path:nth-child(2)

Next time the page is reloaded for the same element selector has changed to:

.ag-cell-focus > .ag-react-container > .sc-caSCKo > .MuiSvgIcon-root-919 > path:nth-child(2)
ephetic commented 5 years ago

I'm also using styled-components (which do not have stable generated class names). My solution was to use babel-plugin-transform-react-qa-classes and use puppeteer-recorder's ability to specify a data attribute to track.

EDIT: I forgot that I had to fork that plugin.

tnolet commented 5 years ago

@ljocampo this is normal expected behaviour from the (probably React) library you are using and has nothing to do with Puppeteer recorder. Best way to solve this is use @ephetic solution or add #ID tags to your elements.

ljocampo commented 5 years ago

Unfortunately the proposed solution is not viable for me since I do not have access to the source code of the site I'm puppeteering. Please consider having an option to use nth hierarchy.

ephetic commented 5 years ago

@ljocampo puppeteer-recorder isn't actually generating these selectors itself, but instead uses @medv/finder, so it is where the change actually needs to be made. I would fork both of these repos and make the changes you need to your forks -- this would be the first step of creating a pull request to add this feature anyway and your team can install your fork as a dev Chrome extension.

tnolet commented 5 years ago

@ljocampo @ephetic yes, in principle this would work. I just think I won't merge a forked repo that quickly. This stuff is hard for a good reason and would rather stick to a somewhat supported package.

ephetic commented 5 years ago

@tnolet And you guys are working on a replacement for puppeteer-recorder, right? I have other customizations on my fork that suit my needs that I didn't bother opening PRs for. It's the way of open source.

tnolet commented 5 years ago

@ephetic correct, everyone is totally free to do whatever they want on a fork.