From fd41d4272bdb8edf6a09da669bf8e59963aa2e1c Mon Sep 17 00:00:00 2001
From: Jonghakseo <jonghak.seo@creatrip.com>
Date: Fri, 22 Nov 2024 23:53:10 +0900
Subject: [PATCH] fix: getChromeExtensionPath

---
 tests/e2e/utils/extension-path.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/utils/extension-path.ts b/tests/e2e/utils/extension-path.ts
index 7bacbfd5a..47af3702c 100644
--- a/tests/e2e/utils/extension-path.ts
+++ b/tests/e2e/utils/extension-path.ts
@@ -5,7 +5,23 @@
  */
 export const getChromeExtensionPath = async (browser: WebdriverIO.Browser) => {
   await browser.url('chrome://extensions/');
-  const extensionItem = await $('extensions-item').getElement();
+  /**
+   * https://webdriver.io/docs/extension-testing/web-extensions/#test-popup-modal-in-chrome
+   * ```ts
+   * const extensionItem = await $('extensions-item').getElement();
+   * ```
+   * The above code is not working. I guess it's because the shadow root is not accessible.
+   * So I used the following code to access the shadow root manually.
+   *
+   *  @url https://github.com/webdriverio/webdriverio/issues/13521
+   *  @url https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/786
+   */
+  const extensionItem = await (async () => {
+    const extensionsManager = await $('extensions-manager').getElement();
+    const itemList = await extensionsManager.shadow$('#container > #viewManager > extensions-item-list');
+    return await itemList.shadow$('extensions-item');
+  })();
+
   const extensionId = await extensionItem.getAttribute('id');
 
   if (!extensionId) {