Daydream generates extreme selectors

[kokujin]

Is there a way to shorten the selectors generated by Daydream? Or a way to let Daydream know when to generate relative selector paths? Here is a snippet of a generated click:

.click(
            'html..js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths body div.header-nav div.container div.top-main-nav.navbar.navbar-inverse div.navbar-inner.container div.nav-collapse.collapse ul#megamenu.nav li#toys.dropdown.main-nav-item.mmenu-item.activated a.main-nav-item'
        )

This was generated by clicking the "issues" link in this github repositoty:

click('html..is-copy-enabled.is-u2f-enabled body.logged_in.env-production.macintosh.vis-public div.main-content div div#js-repo-pjax-container.context-loader-container.js-repo-nav-next div.pagehead.repohead.instapaper_ignore.readability-menu.experiment-repo-nav div.container nav.reponav.js-repo-nav.js-sidenav-container-pjax.js-octicon-loaders a.js-selected-navigation-item.reponav-item')

This is huge und unnecessary. Any ideas? Thanks

[stevenmiller888]

@kokujin Do you have a better idea for ensuring a unique path to the element? I'm sure there's a smarter way to do it, just haven't had time to think it over.

[michalbe]

Maybe it would be smart to introduce a configuration where you can specify how the selectors will be calculated? With options like:

• the dept of the selector - something like up to lvl 3 parents, etc.
• list of classes to ignore
• ignore parents at all if there is an id attr

[kokujin]

I think that would open a can of worms @michalbe , It would be best it it would just automatically generate the shortest, most optimized selector.

Think about the scenario of allowing non technical users in a QA department.

[kokujin]

Have you thought about using a third party lib to generate the electors @stevenmiller888 ? for example, https://www.npmjs.com/package/css-selector-generator, from the description:

it also generates shorter selectors and is faster and/or more robust than many other libraries - see this comparison and select the best alternative for your use case.

[kokujin]

https://github.com/autarc/optimal-select is also an option to generate short selectors

[michalbe]

Not sure if the first one is a good choice, apparently the lib has some infinite loops bugs inside.

There is a benchmark for this already: css-selector-generator-benchmark

[justsml]

RE @michalbe I'd love to also specify a black list of selectors. A few "bad" selectors mess really mess my tests up.

[roryrjb]

@stevenmiller888 the pull request https://github.com/segmentio/daydream/issues/32 has already solved this and I think this can be closed. In all my testing I haven't experienced any issues with long selectors.