diff --git a/flow-components-parent/flow-component-demo-helpers/src/main/java/com/vaadin/flow/demo/ComponentDemoTest.java b/flow-components-parent/flow-component-demo-helpers/src/main/java/com/vaadin/flow/demo/ComponentDemoTest.java
index 5360d280b69..f0674635ff1 100644
--- a/flow-components-parent/flow-component-demo-helpers/src/main/java/com/vaadin/flow/demo/ComponentDemoTest.java
+++ b/flow-components-parent/flow-component-demo-helpers/src/main/java/com/vaadin/flow/demo/ComponentDemoTest.java
@@ -39,6 +39,24 @@
 public abstract class ComponentDemoTest extends ChromeBrowserTest {
     protected WebElement layout;
 
+    /**
+     * Default variant producer
+     * <p>
+     * With current design, the theme variant can be obtained from the button
+     * attached to the demo
+     */
+    public static class DefaultProducer
+            implements Function<WebElement, String> {
+
+        @Override
+        public String apply(WebElement button) {
+            String[] variant = button.getText().split("'");
+            return variant[1];
+        }
+    }
+
+    private Function<WebElement, String> DEFAULT_VARIANT_PRODUCER = new DefaultProducer();
+
     @Override
     protected int getDeploymentPort() {
         return 9998;
@@ -56,13 +74,23 @@ public void openDemoPageAndCheckForErrors() {
     }
 
     /**
-     * Verifies variants functionality for the current layout.
-     * 
+     * Verifies variants functionality for the current layout with using the
+     * {@link DefaultProducer}.
+     * <p>
      * The test will fail if a specific variant demo is not added first with
      * {@link DemoView#addVariantsDemo(Supplier, BiConsumer, BiConsumer, Function, Enum[])}
      * method.
      */
     protected void verifyThemeVariantsBeingToggled() {
+        verifyThemeVariantsBeingToggled(DEFAULT_VARIANT_PRODUCER);
+    }
+
+    /**
+     * Verifies variants functionality for the current layout with customized
+     * variant producer implementation.
+     */
+    protected void verifyThemeVariantsBeingToggled(
+            Function<WebElement, String> variantProducer) {
         List<WebElement> toggleThemeButtons = layout
                 .findElement(By.id(VARIANT_TOGGLE_BUTTONS_DIV_ID))
                 .findElements(By.tagName("button"));
@@ -70,17 +98,19 @@ protected void verifyThemeVariantsBeingToggled() {
                 "Expected at least one toggle theme button in 'buttonDiv', but got none",
                 toggleThemeButtons.isEmpty());
         toggleThemeButtons.forEach(button -> toggleVariantAndCheck(
-                layout.findElement(By.id(COMPONENT_WITH_VARIANTS_ID)), button));
+                layout.findElement(By.id(COMPONENT_WITH_VARIANTS_ID)), button,
+                variantProducer));
     }
 
-    private void toggleVariantAndCheck(WebElement component,
-            WebElement button) {
+    private void toggleVariantAndCheck(WebElement component, WebElement button,
+            Function<WebElement, String> variantProducer) {
         List<String> initialButtonThemes = getComponentThemes(component);
         String initialButtonText = button.getText();
 
         button.click();
         verifyThemeIsToggled(getComponentThemes(component), button.getText(),
-                initialButtonThemes, initialButtonText);
+                initialButtonThemes, initialButtonText,
+                variantProducer.apply(button));
 
         button.click();
         Assert.assertEquals(
@@ -100,7 +130,7 @@ private void toggleVariantAndCheck(WebElement component,
 
     private void verifyThemeIsToggled(List<String> updatedThemes,
             String updatedButtonText, List<String> previousThemes,
-            String previousButtonText) {
+            String previousButtonText, String variantName) {
         Assert.assertNotEquals("Button should change its text after toggling",
                 previousButtonText, updatedButtonText);
 
@@ -115,6 +145,10 @@ private void verifyThemeIsToggled(List<String> updatedThemes,
             Assert.assertTrue(
                     "When a theme variant got added, component 'theme' attribute should contain all previous theme variants",
                     updatedThemes.containsAll(previousThemes));
+
+            Assert.assertTrue("The selected theme variant:" + variantName
+                    + " should be added to the component 'theme' attribute.",
+                    updatedThemes.contains(variantName));
         } else {
             Assert.assertTrue(
                     "When a theme variant got removed, toggle button text should start with 'Add' word",
@@ -125,6 +159,9 @@ private void verifyThemeIsToggled(List<String> updatedThemes,
             Assert.assertTrue(
                     "When a theme variant got removed, previous theme variants should contain all theme variants from component 'theme' attribute",
                     previousThemes.containsAll(updatedThemes));
+            Assert.assertFalse("The selected theme variant:" + variantName
+                    + " should be removed from the component 'theme' attribute.",
+                    updatedThemes.contains(variantName));
         }
     }