feat(selectors): proximity selectors

[dgozman]

No description provided.

[Aaron-Pool]

Hey, I know I'm not a contribute or anything, but just wanted to drop my personal experience. For me, the most useful proximity-style selectors are what I refer to as "axis" selectors. I have helper functions that use element handle bounding boxes to locate the element that is closest purely from the perspective of the x or y axis. This allows me to, for example, look up a form label and then get the form input that corresponds to it in a reliable way. I can also combine these two to do a table style lookup that uses different elements for the x and y axis lookup references.

[dgozman]

Hey, I know I'm not a contribute or anything, but just wanted to drop my personal experience. For me, the most useful proximity-style selectors are what I refer to as "axis" selectors. I have helper functions that use element handle bounding boxes to locate the element that is closest purely from the perspective of the x or y axis. This allows me to, for example, look up a form label and then get the form input that corresponds to it in a reliable way. I can also combine these two to do a table style lookup that uses different elements for the x and y axis lookup references.

@Aaron-Pool This totally makes sense. I think we will introduce some kind of "table" selector to help with tables. Not sure about axis yet, perhaps "aligned" or something? I'd need to gather more information about axis-specific use cases that do not work with "right-of" and similar.

[Aaron-Pool]

Consider this example:

This is not a site that I control the layout of, I'm just trying to automate a task I need to perform on it/scrape it for data. The elements are not labeled in a semantic way and both the section header and whatever element contains "value" are a simple span element. To keep the task from being prone to breakage, I really just want the selector equivalent of "I want whatever is vertically aligned with this label, to its right".

But if I understand the current API correctly :right-of will get me 3 different elements, and :near will get me both the value and the section header, assuming it gets the label at all. It may only return the section header, depending on the width of the container.

[dgozman]

But if I understand the current API correctly :right-of will get me 3 different elements, and :near will get me both the value and the section header, assuming it gets the label at all. It may only return the section header, depending on the width of the container.

Yep, that matches my understanding. Let me file this as a feature request.