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

Pushing seclectors by attr(name=value) rather than div#ids #49

Closed jtizol closed 5 years ago

jtizol commented 5 years ago

Hey guys, anyone know the level of effort to adjust the block building to select elements by attr "name" rather than id?

I am struggling with a page that dynamically assigns div IDs and it is unreliable to select by ID

from:

  await page.waitForSelector('div > .qx-widget > .qx-widget > #id_379 > div')
  await page.click('div > .qx-widget > .qx-widget > #id_379 > div')

to:

  await page.waitForSelector('div > .qx-widget > .qx-widget > [name="frmMain_pbSpecMaint"] > div')
  await page.click('div > .qx-widget > .qx-widget > [name="frmMain_pbSpecMaint"]  > div')
tnolet commented 5 years ago

Hi @jtizol this is actually already implemented, just in a slightly different way. You can provide a custom data-* attribute in the settings. Puppeteer Recorder will then use that instead of the standard selectors. You would just need to instrument your code with this attribute of course.

image

jtizol commented 5 years ago

@tnolet Are you saying that the div attr needs to be formatted with "data-name" attr? We've built the entire site using just the "name" attr. It would be really difficult to change everything at this point. Is there no way to just point the block builder to look at the "name" attr rather than "id"?

tnolet commented 5 years ago

@jtizol that's what I'm saying, yes. the data-xxx is a very common pattern. Sorry, don't think there is another way right now.

jtizol commented 5 years ago

@tnolet understood. Thank you for the feedback.