fix: pierce selectors should be generated using :scope (#613)

puppeteer · Jul 17, 2023 · e8abd93 · e8abd93 · AlecoDigitalCreator · Aug 20, 2023
1 parent 42775d1
commit e8abd93
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/__snapshots__/SchemaUtils.test.ts.js b/__snapshots__/SchemaUtils.test.ts.js
@@ -51,3 +51,15 @@ exports[
 ] = `
 ::-p-xpath(//*[@id=\\"id\\"])
 `;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert pierce/#id 1'
+] = `
+:scope >>> #id
+`;
+
+exports[
+  'SchemaUtils Selectors selectorToPElementSelector should convert pierce/#inner 1'
+] = `
+:scope >>> #inner
+`;
diff --git a/src/SchemaUtils.ts b/src/SchemaUtils.ts
@@ -648,7 +648,7 @@ export function selectorToPElementSelector(selector: string[] | string) {
           s.substring(SelectorType.XPath.length + 1)
         )})`;
       case SelectorType.Pierce:
-        return `::-p-pierce(${s.substring(SelectorType.Pierce.length + 1)})`;
+        return `:scope >>> ${s.substring(SelectorType.Pierce.length + 1)}`;
       case SelectorType.Text:
         return `::-p-text(${escape(
           s.substring(SelectorType.Text.length + 1)

diff --git a/test/SchemaUtils.test.ts b/test/SchemaUtils.test.ts
@@ -842,6 +842,21 @@ describe('SchemaUtils', () => {
           selector: '.cls > div #id',
           content: '<div class="cls"><div><div id="id">test',
         },
+        {
+          selector: 'pierce/#id',
+          content: '<div class="cls"><div><div id="id">test',
+        },
+        {
+          selector: 'pierce/#inner',
+          content: `<div class="cls">
+              <div>
+              <host-element id="id">
+                <template shadowrootmode="open">
+                  <div class="cls"><div><div id="inner">test
+                </template>
+              </host-element>
+          `,
+        },
         {
           selector: ['.cls > div #id', '.cls > div #id'],
           content: `<div class="cls">