[REGRESSION] Custom selectors no longer able to be last in group

[DavertMik]

Context:

• Playwright Version: 1.7
• Operating System: Not related
• Node.js version: 12
• Browser: Chromium
• Extra: [any specific details about your environment]

Code Snippet

In CodeceptJS we had this custom selector engine which worked fine since... Playwright 0.13, I think.
The purpose of it was to filter elements by value:

module.exports.createValueEngine = () => {
  return {
    // Creates a selector that matches given target when queried at the root.
    // Can return undefined if unable to create one.
    // eslint-disable-next-line no-unused-vars
    create(root, target) {
      return null;
    },

    // Returns the first element matching given selector in the root's subtree.
    query(root, selector) {
      if (!root) {
        return null;
      }
      return `${root.value}`.includes(selector) ? root : null;
    },

    // Returns all elements matching given selector in the root's subtree.
    queryAll(root, selector) {
      if (!root) {
        return null;
      }
      return `${root.value}`.includes(selector) ? root : null;
    },
  };
};

Usage example:

playwright.selectors.register('__value', createValueEngine);
// wait for the field with value
page.waitForSelector('css=input[type=text] >> __value=Hello');

This worked till 1.7.0.

I tried to debug and seems that in 1.7 in query and queryAll calls I am receiving document object, and not Node object.

• Complete Implementation: https://github.com/codeceptjs/CodeceptJS/blob/3.0.2/lib/helper/Playwright.js#L1789
• Related tests: https://github.com/codeceptjs/CodeceptJS/blob/3.0.2/test/helper/Playwright_test.js#L510

[dgozman]

This has indeed regressed in 1.7, and will be fixed in the next patch by #4754.

Some suggestions for writing robust selector engines:

• The comment says "Returns the first element matching given selector in the root's subtree" and this engine clearly does not follow it 😄 To return the first element from the subtree, this engine has to iterate over the subtree elements, not just check the root itself.
• For the engine to ever work with page.$$() and other methods querying multiple elements, queryAll should return an array, not an element: return `${root.value}`.includes(selector) ? [root] : [];

[Georgegriff]

I suspect I copied and pasted the comments into the CodeceptJS code and forgot to change, which would explain why they don't make sense. These selectors are implemented to enable us to do arbitrary selectors on properties, in this case value, but we have ones for disabled too, without forcing our users to use any specific selector strat, E.g. xpath/CSS, I suppose you could think of them as filters
So we can enable I.waitForValue(selector, value) in the framework

[DavertMik]

For the engine to ever work with page.$$() and other methods querying multiple elements, queryAll should return an array, not an element: return ${root.value}.includes(selector) ? [root] : [];

Yes, I found that during my debugging. To my surprise changing that didn't help to solve the issue 😄 . But sure that part should be updated.

The comment says "Returns the first element matching given selector in the root's subtree" and this engine clearly does not follow it smile To return the first element from the subtree, this engine has to iterate over the subtree elements, not just check the root itself.

Yeah, the use case for this engine is very specific and probably it is a bit of misuse of selector engine as we don't go deeper by the tree but we filter the elements according to some rules. I would say this is a quite smart idea by @Georgegriff . At least we won't need to create various pseudo-CSS selectors (jQuery style) for additional filtration of elements.

Anyway, for further usage, we should to stick to your guidelines.

[dgozman]

This will be fixed in v1.7.1.