Redesign a selector's system

[inikulin]

I've got this idea while thinking about #795 and making API examples. Currently we have selector and snapshots. Selectors are functions that allow you retrieve node state aka node snapshot. Having a node snapshot you can retrieve other snapshots in DOM hierarchy. Moreover, we are going to add find method that will allow you to retrieve descendants of the element represented by snapshot. There is a problem with this approach: we have everything messed up together. It's confusing and we don't have ability to implement some scenarios due to this approach. E.g. having a selector A how can I write selector B which will select some child of the element given by selector A? And we should be able to pass this descendant selector to action and should have all properties like regular selectors. The correct answer is that selectors should be combinable in order to reuse selectors to get nodes that are in relation with nodes, given by selector.

The proposal

• Remove all selector methods from node snapshot: getParentNode, getChildNode,...
• Introduce methods above to selectors itself, which will return new selector, e.g. parentNode()
• Add method descendant and ancestor to selector
• Add Selector.count() method, that returns number of matching elements

So, e.g. instead of:

const ul = Selector('#list');

const paragraph = Selector(() => {
    var list = getList();

    if (!list) 
      return null;

   return list.querySelector('p');
}, { dependencies: { getList: ul } };

We'll be able to write:

const ul = Selector('#list');
const paragraph = ul.descendant('p');

// Now you can filter paragraphs by text:
paragraphWithText = paragraph.with({text:'Yo'});

it's extremely useful e.g. in page models, there need to build relations without data actual retrieval.

I'm not sure, but seems like we can even get rid of dependencies with this approach.

Also, we will have consistent API: selectors are all about retrieval and can be combined in the functional programming style. Snapshots are just plain data.

\cc @DevExpress/testcafe

---

Update (22.09.16)

Proposed API:

• Deprecate snapshot hierarchy selectors (e.g. getChildNode)

• Deprecate t.select

• Deprecate options.index

• Deprecate options.dependencies

• Deprecate options.text

• Allow unawaited calls to Selector outside of test context.

• Return null if Selector returns single node and index is more than 0.

• .nth(idx)

• .withText(text|re)

• .find(cssSelector)

• .find(filterFn)

• .parent(idx = 0)

• .parent(cssSelector)

• .parent(filterFn)

• .child(idx = 0)

• .child(cssSelector)

• .child(filterFn)

• .sibling(idx = 0)

• .sibling(cssSelector)

• .sibling(filterFn)

• .count

• .exists

[AlexanderMoskovkin]

👍 Looks good

I'm not sure, but seems like we can even get rid of dependencies with this approach.

const getElementById     = Selector(id => document.querySelector(`#${id}`));
const getStatusBtn       = Selector(() => getElementById('statusBtn'), { dependencies: { getElementById } });

As a see we can't get rid of dependencies in this case or we can?

[inikulin]

@AlexanderMoskovkin It's synthetic example, you can just do:

const getStatusBtn = Selector('#statusBtn');

But it would be nice if you add more examples, to see how they will fit into new paradigm

[AlexanderMoskovkin]

an example from our documentation:

const getGridRow  = Selector(n => document.getElementsByClassName('grid-row')[n]);
const getGridCell = Selector((m, n) => getGridRow(m).children[n], {
     dependencies: { getGridRow }
});

[helen-dikareva]

I like it

[kirovboris]

Looks good, but in my opinion descendant and ancestor too long to type.

[helen-dikareva]

maybe child/parent @VasilyStrelyaev

[helen-dikareva]

child/parent looks like we'll searching for one level

[inikulin]

@helen-dikareva Correct. Child/parent means single level, but we'll have them as well.

[inikulin]

@kirovboris What do you think? Does fits well for you selector extensions?

[kirovboris]

If we're discussing the selector extensions, not the snapshot extension, it looks useful.
I mean this change can't replace the snapshot extending for react-selectors plugin.

[inikulin]

@kirovboris It applies only to selector combination. Snapshot extensions looks even more meaningful with this one.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.