[Enhancement] Find a more efficient way to select elements

[prakhartiwari0]

Currently, we're using the finder npm package to generate a CSS selector of the selected element. But this method is failing to work in a lot of cases. Maybe we can either tweak its arguments and provide some additional options for users to select elements. Or we can use some different methods to store the selected elements.

I'm currently exploring XPath, let's see if I can get something from there.

The Tab mode feature will help us a lot in selecting the right elements.

Some resources and tools I have found to research on this

• Ranorex CSS Selector Chrome Extension
• Generate a CSS selector path of a DOM element. (dev.to article)
• Selecting Dynamic ID

[prakhartiwari0]

I found an interesting project during my search, it's Automa, an open-source browser extension to automate tasks. It has many features but the one I'm currently focused on is its element selector. It gives an option to select an element and click on it as it's an important feature in automating browser tasks. I got curious to know if it works on websites where My Web Shortcut's element selector isn't working, and surprisingly, it works!

• I checked the one website that has been bothering me since the start, Google Play Book Web Reader. Due to some iFrame issues, it never allowed me to select any element. But when I used Automata's Element selector, it worked.
• This made me even more curious and I opened its GitHub repository to know how their element selection works.
• The project is built with Vue JS. I found a file named FindElement.js and looked at its code.
• Hmm, so they're using Sizzle JS, a pure-JavaScript CSS selector engine, for element selection and another npm package called query-selector-shadow-dom, maybe for selecting Shadow DOM elements.
• They have also provided an option to use CSS Selector or XPath. The user can select either of those and copy the code provided (basically the CSS selector or XPath) for that selected element. Then the user pastes it in the respective block while creating a workflow.
• The XPath thing is something I also decided to add when I first got to know about it, the code is written but I haven't cleaned it up and pushed it yet. But after this discovery, I might need to make some major changes.
• I first need to see how those packages work and test whether they work in my case.
• I also need to dive deeper into their code to understand how they're approaching Element Selection and to take some inspiration for my code structure as they have about 100k users on Chrome Webstore with impressive reviews. Improvement is a never-ending cycle, especially if someone's a Beginner.

[prakhartiwari0]

Oh well I am an idiot. Turns out Automa is using the same library that I am using to find the CSS Selector. Check this findSelector.js file out. Sizzle JS is doing something else and I am unable to understand clearly what it does.