Allow for minimum selector depth

[drodenberg]

Pull Request Template

Description

Want the ability to pass minimum values for data-attribute selectors using the finder methods properties of optimizedMinLength and seedMinLength. We added a new setting called treat data attributes as unique (this will not generate nested selectors)

Type of change

Please delete options that are not relevant.

• [x] New feature (non-breaking change which adds functionality)
• [x] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• [x] My code follows the style guidelines of this project. npm run lint passes with no errors.
• [x] I have made corresponding changes to the documentation
• [x] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes. npm run test passes with no errors.

[drodenberg]

Still working on this. Looking at tests

[tnolet]

@drodenberg thanks for contributing. From your description I still do not understand what we are actually doing here. Can you provide a clear, point by point description of the use case

• the problem you encountered
• the solution you suggest

I know only read "i want to tweak some setting" but I have no idea of the context and if this might be useful for others.

[glenselle]

Thanks for responding. So the issue we have is that the finder lib is generating selectors with the child combinator > that include styled component classes. These are unreliable because a change of CSS source will re-generate the class name with a new unique id. This new setting makes it possible to generate "shallow" or non-nested selectors based on data attributes which will not be effected by re-generated classes.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goto('https://demo.ol-kit.com/?view=39.000000,-96.000000,5.00,0.00')

  await page.setViewport({ width: 1680, height: 916 })

  await page.waitForSelector('.MuiPaper-root > .MuiTabs-root > .MuiTabs-scroller > .sc-paXsP > .MuiTabs-flexContainer > [data-testid="LayerPanel.openTab"]')
  await page.click('.MuiPaper-root > .MuiTabs-root > .MuiTabs-scroller > .MuiTabs-flexContainer > [data-testid="LayerPanel.openTab"]')

  await page.waitForSelector('.MuiPaper-root > .MuiTabs-root > .MuiTabs-scroller > .sc-paXsP > .MuiTabs-flexContainer > [data-testid="LayerPanel.openTab"]')
  await page.click('.MuiPaper-root > .MuiTabs-root > .MuiTabs-scroller > .MuiTabs-flexContainer > [data-testid="LayerPanel.openTab"]')

  await browser.close()
})()

Notice the styled component generated classnames contained within those selectors: .sc-paXsP

What we really want is:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goto('https://demo.ol-kit.com/?view=39.000000,-96.000000,5.00,0.00')

  await page.setViewport({ width: 1680, height: 916 })

  await page.waitForSelector('[data-testid="LayerPanel.openTab"]')
  await page.click('[data-testid="LayerPanel.openTab"]')

  await page.waitForSelector('[data-testid="LayerPanel.openTab"]')
  await page.click('[data-testid="LayerPanel.openTab"]')

  await browser.close()
})()

Let us know if this doesn't make sense

[tnolet]

@glenselle This clears things up a lot! Can you turn the PR into a draft until it is ready for review and I will gladly review it.

[xmile1]

Hi @drodenberg Do you by chance have some time to look into this. @tnolet Without this, the CUSTOM DATA ATTRIBUTE feature doesn't seem very useful.

[tnolet]

pinging @ianaya89 to have a look at this

[ianaya89]

@xmile1 @tnolet we already merged a PR (#130) related to this. Basically, when data- attribute is in the element (and you set the data- attr option) we will assume the attribute as a unique identifier (the same applies for id). You will not see nested selectors for those cases. We are already working on other improvements and we will ship them soon 🤞

[ianaya89]

Closing due inactivity. Feel free to open it again whenever is ready