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) {