Shadow roots (#104)

* Search shadow roots. Add content editable to input search. Add tests for outlook and amazon * Change default to inputs only * remove commented
forgetso · Jan 25, 2024 · 96ac138 · 96ac138
1 parent 2478a39
commit 96ac138
Show file tree

Hide file tree

Showing 9 changed files with 905 additions and 56 deletions.
diff --git a/src/background/storage.ts b/src/background/storage.ts
@@ -6,7 +6,7 @@ export function getDefaultStorage(): SearchReplacePopupStorage {
         replaceTerm: '',
         options: {
             matchCase: false,
-            inputFieldsOnly: false,
+            inputFieldsOnly: true,
             hiddenContent: false,
             wholeWord: false,
             isRegex: false,

diff --git a/src/cypress/e2e/amazon.cy.ts b/src/cypress/e2e/amazon.cy.ts
@@ -0,0 +1,94 @@
+/// <reference types="cypress" />
+
+import { ELEMENT_FILTER } from '../../constants'
+import { isBlobIframe } from '../../elements'
+import { searchReplace } from '../../searchreplace'
+
+const SEARCHTERM = 'Chris'
+const REPLACETERM = 'Something else'
+const BASEURL = 'http://localhost:9000'
+describe('Search Replace WordPress', { baseUrl: BASEURL, responseTimeout: 120e3 }, () => {
+    beforeEach(() => {
+        cy.visit('http://localhost:9000/tests/amazon_seller/test.html')
+    })
+
+    it('counts the correct number of occurrences', () => {
+        cy.window().then((window) => {
+            console.log(window.location.host)
+            const iframes = Array.from(
+                <NodeListOf<HTMLIFrameElement>>window.document.querySelectorAll('iframe')
+            ).filter((iframe) => !isBlobIframe(iframe))
+            cy.wrap(
+                searchReplace(
+                    'count',
+                    window,
+                    SEARCHTERM,
+                    REPLACETERM,
+                    false,
+                    false,
+                    true,
+                    false,
+                    false,
+                    false,
+                    true,
+                    false,
+                    iframes,
+                    ELEMENT_FILTER
+                ).then((result) => {
+                    console.log(`result`, result)
+                    expect(result.searchReplaceResult.count.original).to.equal(1)
+                })
+            ).then(() => {
+                console.log('done')
+            })
+        })
+    })
+    it('replaces the search term and then replaces it again', () => {
+        cy.window().then((window) => {
+            console.log(window.location.host)
+            const iframes = Array.from(
+                <NodeListOf<HTMLIFrameElement>>window.document.querySelectorAll('iframe')
+            ).filter((iframe) => !isBlobIframe(iframe))
+            cy.wrap(
+                searchReplace(
+                    'searchReplace',
+                    window,
+                    SEARCHTERM,
+                    REPLACETERM,
+                    false,
+                    false,
+                    true,
+                    false,
+                    false,
+                    false,
+                    true,
+                    false,
+                    iframes,
+                    ELEMENT_FILTER
+                ).then((result1) => {
+                    expect(result1.searchReplaceResult.count.replaced).to.equal(1)
+                    searchReplace(
+                        'searchReplace',
+                        window,
+                        REPLACETERM,
+                        SEARCHTERM,
+                        false,
+                        false,
+                        true,
+                        false,
+                        false,
+                        false,
+                        true,
+                        false,
+                        iframes,
+                        ELEMENT_FILTER
+                    ).then((result2) => {
+                        expect(result2.searchReplaceResult.count.replaced).to.equal(1)
+                    })
+                })
+            ).then(() => {
+                console.log('done')
+            })
+        })
+    })
+})
diff --git a/src/cypress/e2e/outlook.cy.ts b/src/cypress/e2e/outlook.cy.ts
@@ -0,0 +1,94 @@
+/// <reference types="cypress" />
+
+import { ELEMENT_FILTER } from '../../constants'
+import { isBlobIframe } from '../../elements'
+import { searchReplace } from '../../searchreplace'
+
+const SEARCHTERM = 'Something else'
+const REPLACETERM = 'The replacement'
+const BASEURL = 'http://localhost:9000'
+describe('Search Replace WordPress', { baseUrl: BASEURL, responseTimeout: 120e3 }, () => {
+    beforeEach(() => {
+        cy.visit('http://localhost:9000/tests/outlook/test.html')
+    })
+
+    it('counts the correct number of occurrences', () => {
+        cy.window().then((window) => {
+            console.log(window.location.host)
+            const iframes = Array.from(
+                <NodeListOf<HTMLIFrameElement>>window.document.querySelectorAll('iframe')
+            ).filter((iframe) => !isBlobIframe(iframe))
+            cy.wrap(
+                searchReplace(
+                    'count',
+                    window,
+                    SEARCHTERM,
+                    REPLACETERM,
+                    true,
+                    false,
+                    false,
+                    false,
+                    false,
+                    false,
+                    true,
+                    false,
+                    iframes,
+                    ELEMENT_FILTER
+                ).then((result) => {
+                    console.log(`result`, result)
+                    expect(result.searchReplaceResult.count.original).to.equal(1)
+                })
+            ).then(() => {
+                console.log('done')
+            })
+        })
+    })
+    it('replaces the search term and then replaces it again', () => {
+        cy.window().then((window) => {
+            console.log(window.location.host)
+            const iframes = Array.from(
+                <NodeListOf<HTMLIFrameElement>>window.document.querySelectorAll('iframe')
+            ).filter((iframe) => !isBlobIframe(iframe))
+            cy.wrap(
+                searchReplace(
+                    'searchReplace',
+                    window,
+                    SEARCHTERM,
+                    REPLACETERM,
+                    true,
+                    false,
+                    false,
+                    false,
+                    false,
+                    false,
+                    true,
+                    false,
+                    iframes,
+                    ELEMENT_FILTER
+                ).then((result1) => {
+                    expect(result1.searchReplaceResult.count.replaced).to.equal(1)
+                    searchReplace(
+                        'searchReplace',
+                        window,
+                        REPLACETERM,
+                        SEARCHTERM,
+                        true,
+                        false,
+                        false,
+                        false,
+                        false,
+                        false,
+                        true,
+                        false,
+                        iframes,
+                        ELEMENT_FILTER
+                    ).then((result2) => {
+                        expect(result2.searchReplaceResult.count.replaced).to.equal(1)
+                    })
+                })
+            ).then(() => {
+                console.log('done')
+            })
+        })
+    })
+})
diff --git a/src/cypress/e2e/searchreplace.cy.ts b/src/cypress/e2e/searchreplace.cy.ts
@@ -63,9 +63,6 @@ describe('Search Replace ', () => {
         })
     })
 
-    // TODO add visibilty test for divs contained within hidden parent divs that are multiple levels deep
-    // it('counts the correct number of visible occurrences for nested hidden items', () => {
-
     it('counts the correct number of visible occurrences', () => {
         cy.window().then((window) => {
             const iframes = Array.from(<NodeListOf<HTMLIFrameElement>>window.document.querySelectorAll('iframe'))
@@ -145,7 +142,7 @@ describe('Search Replace ', () => {
                     iframes,
                     ELEMENT_FILTER
                 ).then((result) => {
-                    expect(result.searchReplaceResult.count.original).to.equal(4)
+                    expect(result.searchReplaceResult.count.original).to.equal(5)
                 })
             ).then(() => {
                 console.log('done')
@@ -174,7 +171,7 @@ describe('Search Replace ', () => {
                     iframes,
                     ELEMENT_FILTER
                 ).then((result) => {
-                    expect(result.searchReplaceResult.count.original).to.equal(3)
+                    expect(result.searchReplaceResult.count.original).to.equal(4)
                 })
             ).then(() => {
                 console.log('done')

diff --git a/src/elements.ts b/src/elements.ts
@@ -7,7 +7,9 @@ export function getInputElements(
     elementFilter: Map<Element, SearchReplaceResult>,
     hiddenContent?: boolean
 ): (HTMLInputElement | HTMLTextAreaElement)[] {
-    const inputs = Array.from(<NodeListOf<HTMLInputElement>>document.querySelectorAll('input,textarea'))
+    const inputs = Array.from(
+        <NodeListOf<HTMLInputElement>>document.querySelectorAll('input,textarea,div[contenteditable="true"]')
+    )
     const visibleElements = !hiddenContent ? inputs.filter((input) => elementIsVisible(input, true, false)) : inputs
     return visibleElements.filter((input) => !elementFilter.has(input))
 }