Try to fix the E2E test with AI in Opus 4.5

15s
Run ./vendor/bin/phpunit
  ./vendor/bin/phpunit
  shell: /usr/bin/bash -e {0}
  env:
    WP_VERSION: 6.7
    WP_SITE_URL: http://localhost:8100
    WP_DB_NAME: wordpress
    WP_DB_USER: root
    WP_DB_PASS: root
    WP_DB_HOST: 127.0.0.1
    COMPOSER_PROCESS_TIMEOUT: 0
    COMPOSER_NO_INTERACTION: 1
    COMPOSER_NO_AUDIT: 1
    PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
PHPUnit 12.4.0 by Sebastian Bergmann and contributors.

Runtime:       PHP 8.4.14
Configuration: /home/runner/work/wordpress-plugin/wordpress-plugin/phpunit.xml

.E                                                                  2 / 2 (100%)

Saved Browser Artifacts:

  test_adds_script_with_ignored_pages
    Saved Source Files:
      * ./var/browser/source/error_Tests-Browser-PluginSettingsTest__test_adds_script_with_ignored_pages__0.html:
    Saved Console Logs:
      * ./var/browser/console-logs/error_Tests-Browser-PluginSettingsTest__test_adds_script_with_ignored_pages__0.log:
    Saved Screenshots:
      * ./var/browser/screenshots/error_Tests-Browser-PluginSettingsTest__test_adds_script_with_ignored_pages__0.png:

Time: 00:14.918, Memory: 22.00 MB

There was 1 error:

1) Tests\Browser\PluginSettingsTest::test_adds_script_with_ignored_pages
Behat\Mink\Exception\ElementNotFoundException: Form field with id|name|label|value|placeholder "simpleanalytics_ignore_pages" not found.

/home/runner/work/wordpress-plugin/wordpress-plugin/vendor/behat/mink/src/Element/TraversableElement.php:163
/home/runner/work/wordpress-plugin/wordpress-plugin/vendor/zenstruck/browser/src/Browser.php:214
/home/runner/work/wordpress-plugin/wordpress-plugin/tests/Browser/PluginSettingsTest.php:25

ERRORS!
Tests: 2, Assertions: 6, Errors: 1.
Error: Process completed with exit code 2.

Author: adriaandotcom

resources/css/settings.css

@@ -1,5 +1,8 @@
 @import url(https://fonts.bunny.net/css?family=space-grotesk:500,600);
 
-@tailwind base;
-@tailwind components;
+.sa-settings {
+    @tailwind base;
+    @tailwind components;
+}
+
 @tailwind utilities;

src/UI/PageLayoutComponent.php

@@ -31,9 +31,9 @@ public function __invoke(): void
                 padding-left: 0;
             }
         </style>
-        <template shadowrootmode="open">
-            <link rel="preconnect" href="https://fonts.bunny.net">
-            <link rel="stylesheet" href="<?php echo PLUGIN_URL ?>build/css/settings.css">
+        <link rel="preconnect" href="https://fonts.bunny.net">
+        <link rel="stylesheet" href="<?php echo PLUGIN_URL ?>build/css/settings.css">
+        <div class="sa-settings">
             <form method="post" action="options.php">
                 <!-- Hidden fields -->
                 <?php settings_fields($this->page->getOptionGroup($currentTab)); ?>
@@ -106,22 +106,8 @@ function sa_textarea_add_value(textarea, value) {
                         textarea.value += `\n${value}`;
                     }
                 }
-            </script>
-        </template>
-        <script>
-            // Polyfill in case the browser has no support for shadowRootMode
-            // 1. https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#polyfill
-            // 2. https://caniuse.com/mdn-html_elements_template_shadowrootmode
-            (function attachShadowRoots(root) {
-                root.querySelectorAll("template[shadowrootmode]").forEach(template => {
-                    const mode = template.getAttribute("shadowrootmode");
-                    const shadowRoot = template.parentNode.attachShadow({ mode });
-                    shadowRoot.appendChild(template.content);
-                    template.remove();
-                    attachShadowRoots(shadowRoot);
-                });
-            })(document);
-        </script>
+                </script>
+        </div>
         <?php
     }
 

tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
     content: [
         './**/*.php',
     ],
+    important: '.sa-settings',
     theme: {
         extend: {
             colors: {