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

Wrong espcaping of special characters in selector #110

Closed olejorgenb closed 3 years ago

olejorgenb commented 3 years ago

The following was generated by headless-recorder

await page.waitForSelector('body > #app > .Connect\(Layout\)-root-1 > .Connect\(Layout\)-content-2 > .Dashboard-container-45')

But since \ already means escape next char in javascript the \ also need escaping:

await page.waitForSelector('body > #app > .Connect\\(Layout\\)-root-1 > .Connect\\(Layout\\)-content-2 > .Dashboard-container-45')
maxigimenez commented 3 years ago

Hi @olejorgenb, thanks for flagging this. Can you provide a website where we can reproduce the issue?

olejorgenb commented 3 years ago

No, the site is not public, but I would guess it's easy enough to reproduce using a class name containing an escaped (: I don't have the extension handy but maybe this will do the trick: https://jsfiddle.net/Laqbnx58/1/

There's no escaping of the \s in the selector here: https://github.com/checkly/headless-recorder/blob/765cb4fe5327384990005d85006c869a8e88ffde/src/code-generator/CodeGenerator.js#L137

CSS class names are allowed to contain \ escaped special characters: https://www.w3.org/TR/CSS21/syndata.html#characters

The class names are generated by material UI's JSS. The react-redux Connect HOC add brackets to the component name which JSS use as a basis for making the class name. Of course - using these class names are not really robust, so a proper test wouldn't really rely on these.

maxigimenez commented 3 years ago

Thanks for the information @olejorgenb. I would gladly take a PR for it! Otherwise, I'm going to keep an eye on it and fix it when we have the bandwidth.

honey-dip commented 3 years ago

Hi, I fixed this issue on my local environment, so could you add me to this repository as a collaborator? If you invite me, I will push and create PR for this issue.

ianaya89 commented 3 years ago

Hi @honey-dip, those are great news. You should be able to fork the project and create the PR. Let me know is you need some help with that. Thanks!

honey-dip commented 3 years ago

@ianaya89 I appreciate your comment, and I have created new PR. Thanks!