playwright-ui5 1.3.1 → 1.4.0

package/README.md

@@ -28,12 +28,13 @@ test('ui5 example', ({ page }) => {
 
 this selector engine uses css selector-like syntax. the main difference is that `.` is not used for class names, rather they are treated as part of the type name (ie. `sap.m.Button`)
 
-| feature             | examples                                                | suported | notes                                                                                             |
-| ------------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------- |
+| feature             | examples                                                | suported | notes                                                                                                                                     |
+| ------------------- | ------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | type selectors      | `sap.m.Button`, `m.Button`, `*`                         | ✔        |
-| class selectors     | n/a                                                     | n/a      | as mentioned above, `.` is treated as part of the control type                                    |
-| attribute selectors | `[text]`, `[text='foo']`,`[text*='foo']`                | ✔        | some equality mods are useless for ui5 (eg. `\|=`) but are supported for the sake of completeness |
-| id selectors        | `sap.m.Button#foo`                                      | ✔        | you should not use id selectors if the id is generated (eg. `__button1`) as they can change often |
-| nesting             | `sap.m.Table sap.m.Button`,`sap.m.Table > sap.m.Button` | ❌       | use playwright selector nesting instead (`ui5=sap.m.Table >> ui5=sap.m.Button`)                   |
-| pseudo-classes      | `sap.m.Table:has(sap.m.Button)`                         | ✔        | only `:has` is supported for now                                                                  |
+| class selectors     | n/a                                                     | n/a      | as mentioned above, `.` is treated as part of the control type                                                                            |
+| attribute selectors | `[text]`, `[text='foo']`,`[text*='foo']`                | ✔        | some equality mods are useless for ui5 (eg. `\|=`) but are supported for the sake of completeness                                         |
+| id selectors        | `sap.m.Button#foo`                                      | ✔        | you should not use id selectors if the id is generated (eg. `__button1`) as they can change often                                         |
+| nesting             | `sap.m.Table sap.m.Button`,`sap.m.Table > sap.m.Button` | ❌       | use playwright selector nesting instead (`ui5=sap.m.Table >> ui5=sap.m.Button`)                                                           |
+| pseudo-classes      | `sap.m.Table:has(sap.m.Button)`                         | ✔        | only `:has` is supported for now                                                                                                          |
+| pseudo-elements     | `sap.m.DateTimeField::subclass`                         | ✔        | `::subclass` will match the specified control type and any subtypes (eg. both `sap.m.DateTimeField` and subtypes like `sap.m.DatePicker`) |
 | selector lists      | `sap.m.Button,sap.m.Table`                              | ✔        |

package/dist/browser/main.js

@@ -748,7 +748,7 @@ var require_parser = __commonJS({
           next();
         }
       }
-      function parseSelector(relative) {
+      function parseSelector2(relative) {
         if (relative === void 0) {
           relative = false;
         }
@@ -933,7 +933,7 @@ var require_parser = __commonJS({
             };
             assert(pseudo.argument.value, "Expected pseudo-class argument value.");
           } else if (pseudoDefinition.type === "Selector") {
-            pseudo.argument = parseSelector(true);
+            pseudo.argument = parseSelector2(true);
           } else if (pseudoDefinition.type === "Formula") {
             var _a2 = parseFormula(), a = _a2[0], b = _a2[1];
             pseudo.argument = {
@@ -1130,7 +1130,7 @@ var require_parser = __commonJS({
         l = str.length;
         pos = 0;
         chr = str.charAt(0);
-        return parseSelector();
+        return parseSelector2();
       };
     }
     exports.createParser = createParser2;
@@ -1360,12 +1360,40 @@ __export(main_exports, {
 module.exports = __toCommonJS(main_exports);
 var import_css_selector_parser = __toESM(require_lib());
 var import_throw_expression = __toESM(require_throw_expression());
+var getAllParents = (element) => {
+  const getParents = (class_) => {
+    const parent = class_.getParent();
+    if (parent !== void 0) {
+      return [class_, ...getParents(parent)];
+    }
+    return [class_];
+  };
+  return getParents(element.getMetadata()).map((parent) => parent.getName());
+};
+var parseSelector = (selector) => {
+  if (selector === "") {
+    throw new Error("ui5 selector is empty");
+  }
+  const parsedSelector = parse(selector);
+  parsedSelector.rules.forEach((rule) => {
+    var _a;
+    if (rule.ids && rule.ids.length > 1) {
+      throw new Error("multiple ids are not supported");
+    }
+    if (rule.pseudoElement === "subclass" && ((_a = rule.tag) == null ? void 0 : _a.type) !== "TagName") {
+      throw new Error(
+        "subclass pseudo-selector cannot be used without specifying a control type"
+      );
+    }
+  });
+  return parsedSelector;
+};
 var parse = (0, import_css_selector_parser.createParser)({
   syntax: {
     combinators: [],
     namespace: false,
     attributes: { operators: ["=", "^=", "$=", "*=", "~=", "|="] },
-    pseudoElements: false,
+    pseudoElements: { definitions: ["subclass"] },
     pseudoClasses: { definitions: { Selector: ["has"] } },
     tag: { wildcard: true },
     ids: true,
@@ -1384,10 +1412,7 @@ var querySelector = (root, selector) => selector.rules.flatMap((rule) => {
   }
   const controls = sap.ui.core.Element.registry.filter((element) => {
     var _a2, _b;
-    if (rule.ids && rule.ids.length > 1) {
-      throw new Error("multiple ids are not supported");
-    }
-    if (((_a2 = rule.tag) == null ? void 0 : _a2.type) === "TagName" && rule.tag.name !== element.getMetadata().getName() || rule.ids && rule.ids[0] !== element.getId()) {
+    if (((_a2 = rule.tag) == null ? void 0 : _a2.type) === "TagName" && rule.tag.name !== element.getMetadata().getName() && (rule.pseudoElement !== "subclass" || !getAllParents(element).includes(rule.tag.name)) || rule.ids && rule.ids[0] !== element.getId()) {
       return false;
     }
     return ((_b = rule.attributes) != null ? _b : []).every((attr) => {
@@ -1432,10 +1457,7 @@ var querySelector = (root, selector) => selector.rules.flatMap((rule) => {
 });
 var queryAll = (root, selector) => {
   try {
-    const parsedSelector = parse(selector);
-    if (selector === "") {
-      throw new Error("ui5 selector is empty");
-    }
+    const parsedSelector = parseSelector(selector);
     if (typeof sap === "undefined") {
       return [];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playwright-ui5",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "files": [
     "dist",
     "src/node"
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@detachhead/eslint-config": "^1.2.0",
     "@detachhead/ts-helpers": "^16.1.0",
-    "@playwright/test": "^1.35.0",
+    "@playwright/test": "^1.38.1",
     "@sapui5/ts-types": "^1.113.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/eslint": "^8.4.6",