(feature-enhancement) Exclude dynamic classes from getting into selectors

[shobhitchittora]

I've a lot of input element of the page with the same class called Input. Also these Input components have a Input-focus classname attached to them when the user focuses the element. Now while tabbing through and filling the forms, this focus class is getting picked up by the recorder. While running the script then, since this dynamic class is not there in the dom, puppeteer is unable to find the input element through the selector.

JSFiddle example - https://jsfiddle.net/shobhitchittora/23t0wed5/

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

  await page.goto('https://jsfiddle.net/shobhitchittora/23t0wed5/1/')

  await page.setViewport({ width: 1520, height: 948 })

  await page.type('.panel-v > .panel-h > .CodeMirror-focused > div > textarea', '')

  let frames = await page.frames()
  const frame_793 = frames.find(f => f.url() === 'https://fiddle.jshell.net/shobhitchittora/23t0wed5/1/show/')
  await frame_793.waitForSelector('html')
  await frame_793.click('html')

  await frame_793.type('body', 'undefined')

  await frame_793.type('body > #form > .Input-focus', 'shobhit')

  await frame_793.type('body > #form > .Input-focus', 'chittora')

  await frame_793.type('body > #form > .Input-focus', '123')

  await browser.close()
})()

[shobhitchittora]

Might be related to how @medv/finder gives us a selector here.

[shobhitchittora]

@tnolet Any thoughts on this?

[tnolet]

Hey @shobhitchittora this seems like a bit of a corner case, but more control over what classes are used to record clicks etc. is certainly coming. This does not guarantee your case will work. Honestly, I've never seen extra classes added on focus. Normally you add a pseudo class, i.e. :hover etc. to change styling.