tests/e2e: add test for authentication flow in compatibility mode (#14392)

* tests/e2e: add test for authentication flow in compatibility mode

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: Add prefix class to CSS for easier debugging of constructed stylesheets.

- Use CSS variables for highlighter.

* web: Fix issue where MDX components apply styles out of order.

* web: Fix hover color.

* web: Fix CSS module types. Clean up globals.

* web: Fix issues surrounding availability of shadow root in compatibility mode.

* web: Fix typo.

* web: Partial fixes for storybook dark theme.

* web: Fix overflow.

* web: Fix issues surrounding competing interfaces attempting to apply styles.

* fix padding in ak-alert in. markdown

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: Minimize use of sub-module exports.

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Teffen Ellis <teffen@sister.software>

tests/e2e/test_flows_login.py

@@ -1,12 +1,19 @@
 """test default login flow"""
 
 from authentik.blueprints.tests import apply_blueprint
+from authentik.flows.models import Flow
 from tests.e2e.utils import SeleniumTestCase, retry
 
 
 class TestFlowsLogin(SeleniumTestCase):
     """test default login flow"""
 
+    def tearDown(self):
+        # Reset authentication flow's compatibility mode; we need to do this as its
+        # not specified in the blueprint
+        Flow.objects.filter(slug="default-authentication-flow").update(compatibility_mode=False)
+        return super().tearDown()
+
     @retry()
     @apply_blueprint(
         "default/flow-default-authentication-flow.yaml",
@@ -23,3 +30,21 @@ class TestFlowsLogin(SeleniumTestCase):
         self.login()
         self.wait_for_url(self.if_user_url("/library"))
         self.assert_user(self.user)
+
+    @retry()
+    @apply_blueprint(
+        "default/flow-default-authentication-flow.yaml",
+        "default/flow-default-invalidation-flow.yaml",
+    )
+    def test_login_compatibility_mode(self):
+        """test default login flow with compatibility mode enabled"""
+        Flow.objects.filter(slug="default-authentication-flow").update(compatibility_mode=True)
+        self.driver.get(
+            self.url(
+                "authentik_core:if-flow",
+                flow_slug="default-authentication-flow",
+            )
+        )
+        self.login(shadow_dom=False)
+        self.wait_for_url(self.if_user_url("/library"))
+        self.assert_user(self.user)

tests/e2e/utils.py

@@ -29,6 +29,7 @@ from selenium.webdriver.common.keys import Keys
 from selenium.webdriver.remote.command import Command
 from selenium.webdriver.remote.webdriver import WebDriver
 from selenium.webdriver.remote.webelement import WebElement
+from selenium.webdriver.support import expected_conditions as ec
 from selenium.webdriver.support.wait import WebDriverWait
 from structlog.stdlib import get_logger
 
@@ -37,8 +38,8 @@ from authentik.core.models import User
 from authentik.core.tests.utils import create_test_admin_user
 from authentik.lib.generators import generate_id
 
-RETRIES = int(environ.get("RETRIES", "3"))
 IS_CI = "CI" in environ
+RETRIES = int(environ.get("RETRIES", "3")) if IS_CI else 1
 
 
 def get_docker_tag() -> str:
@@ -240,10 +241,30 @@ class SeleniumTestCase(DockerTestCase, StaticLiveServerTestCase):
         element = self.driver.execute_script("return arguments[0].shadowRoot", shadow_root)
         return element
 
-    def login(self):
+    def shady_dom(self) -> WebElement:
+        class wrapper:
+            def __init__(self, container: WebDriver):
+                self.container = container
+
+            def find_element(self, by: str, selector: str) -> WebElement:
+                return self.container.execute_script(
+                    "return document.__shady_native_querySelector(arguments[0])", selector
+                )
+
+        return wrapper(self.driver)
+
+    def login(self, shadow_dom=True):
         """Do entire login flow"""
-        flow_executor = self.get_shadow_root("ak-flow-executor")
-        identification_stage = self.get_shadow_root("ak-stage-identification", flow_executor)
+
+        if shadow_dom:
+            flow_executor = self.get_shadow_root("ak-flow-executor")
+            identification_stage = self.get_shadow_root("ak-stage-identification", flow_executor)
+        else:
+            flow_executor = self.shady_dom()
+            identification_stage = self.shady_dom()
+
+        wait = WebDriverWait(identification_stage, self.wait_timeout)
+        wait.until(ec.presence_of_element_located((By.CSS_SELECTOR, "input[name=uidField]")))
 
         identification_stage.find_element(By.CSS_SELECTOR, "input[name=uidField]").click()
         identification_stage.find_element(By.CSS_SELECTOR, "input[name=uidField]").send_keys(
@@ -253,8 +274,16 @@ class SeleniumTestCase(DockerTestCase, StaticLiveServerTestCase):
             Keys.ENTER
         )
 
-        flow_executor = self.get_shadow_root("ak-flow-executor")
-        password_stage = self.get_shadow_root("ak-stage-password", flow_executor)
+        if shadow_dom:
+            flow_executor = self.get_shadow_root("ak-flow-executor")
+            password_stage = self.get_shadow_root("ak-stage-password", flow_executor)
+        else:
+            flow_executor = self.shady_dom()
+            password_stage = self.shady_dom()
+
+        wait = WebDriverWait(password_stage, self.wait_timeout)
+        wait.until(ec.presence_of_element_located((By.CSS_SELECTOR, "input[name=password]")))
+
         password_stage.find_element(By.CSS_SELECTOR, "input[name=password]").send_keys(
             self.user.username
         )