npm - @vardot/varbase-e2e - Versions diffs - 2.0.0 - Mend

@vardot/varbase-e2e 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/AGENTS.md +148 -0
package/CLAUDE.md +544 -0
package/README.md +22 -0
package/bin/generate-reports.js +363 -0
package/bin/init-varbase-e2e.js +330 -0
package/bin/postinstall.js +26 -0
package/cucumber.js +125 -0
package/docs/00-quick-start.md +102 -0
package/docs/01-getting-started.md +102 -0
package/docs/02-bbr-smart-waits.md +77 -0
package/docs/03-selector-registry.md +95 -0
package/docs/04-step-reference.md +801 -0
package/docs/05-web-first-assertions.md +91 -0
package/docs/06-network-and-dialogs.md +83 -0
package/docs/07-auth-state.md +75 -0
package/docs/08-clock-mocking.md +59 -0
package/docs/09-api-testing.md +114 -0
package/docs/10-accessibility.md +167 -0
package/docs/11-debugging.md +129 -0
package/docs/12-ai-agent-guide.md +338 -0
package/docs/13-faq.md +236 -0
package/docs/14-recipes-cookbook.md +255 -0
package/docs/15-tag-conventions.md +76 -0
package/docs/16-ci-cd.md +90 -0
package/docs/README.md +125 -0
package/docs/advanced-screenshots/then-i-save-fullscreen-screenshot.md +36 -0
package/docs/advanced-screenshots/then-i-save-width-x-height-screenshot.md +34 -0
package/docs/advanced-screenshots/when-i-save-screenshot-name-filename.md +45 -0
package/docs/advanced-screenshots.md +52 -0
package/docs/advanced-selectors.md +18 -0
package/docs/api-step-definitions.md +45 -0
package/docs/global-settings.md +267 -0
package/docs/install-varbase-e2e/ddev-varbase-e2e.md +52 -0
package/docs/install-varbase-e2e.md +34 -0
package/docs/overview.md +40 -0
package/docs/step-definitions/given-i-am-anonymous-user.md +67 -0
package/docs/step-definitions/given-i-am-homepage.md +68 -0
package/docs/step-definitions/given-i-am-specific-page.md +72 -0
package/docs/step-definitions/then-i-should-be.md +56 -0
package/docs/step-definitions/then-i-should-see.md +62 -0
package/docs/step-definitions/then-item-checkbox.md +54 -0
package/docs/step-definitions/then-item-link-should-contain-url.md +84 -0
package/docs/step-definitions/then-item-should-contain.md +67 -0
package/docs/step-definitions/then-radio-button-value-should-be-selected.md +68 -0
package/docs/step-definitions/then-response-status-code-should-be-number.md +69 -0
package/docs/step-definitions/then-value-radio-button-selected.md +62 -0
package/docs/step-definitions/when-i-attach-file-file-name-element.md +71 -0
package/docs/step-definitions/when-i-check-checkbox.md +60 -0
package/docs/step-definitions/when-i-click-link.md +51 -0
package/docs/step-definitions/when-i-click-operation-text-row.md +71 -0
package/docs/step-definitions/when-i-fill.md +59 -0
package/docs/step-definitions/when-i-go-homepage.md +60 -0
package/docs/step-definitions/when-i-go-specific-page.md +67 -0
package/docs/step-definitions/when-i-move-backward-one-page.md +49 -0
package/docs/step-definitions/when-i-move-forward-one-page.md +58 -0
package/docs/step-definitions/when-i-press-button.md +58 -0
package/docs/step-definitions/when-i-reload-page.md +51 -0
package/docs/step-definitions/when-i-scroll.md +73 -0
package/docs/step-definitions/when-i-select-option-select-list.md +53 -0
package/docs/step-definitions/when-i-select-radio-button-value.md +62 -0
package/docs/step-definitions/when-i-uncheck-checkbox.md +57 -0
package/docs/step-definitions/when-i-wait-ajax-finish.md +64 -0
package/docs/step-definitions/when-i-wait.md +62 -0
package/docs/step-definitions.md +82 -0
package/docs/steps/README.md +137 -0
package/docs/steps/a11y.md +731 -0
package/docs/steps/action.md +181 -0
package/docs/steps/api.md +679 -0
package/docs/steps/assertion.md +328 -0
package/docs/steps/auth.md +108 -0
package/docs/steps/clock.md +171 -0
package/docs/steps/cookie.md +293 -0
package/docs/steps/debug.md +52 -0
package/docs/steps/dialog.md +226 -0
package/docs/steps/drupal-canvas.md +414 -0
package/docs/steps/drupal-ckeditor.md +118 -0
package/docs/steps/drupal-core.md +688 -0
package/docs/steps/drupal-layout-builder.md +437 -0
package/docs/steps/drupal-media.md +107 -0
package/docs/steps/drupal-moderation.md +81 -0
package/docs/steps/drupal-paragraphs.md +36 -0
package/docs/steps/element.md +455 -0
package/docs/steps/field.md +648 -0
package/docs/steps/file-download.md +235 -0
package/docs/steps/form.md +344 -0
package/docs/steps/iframe.md +248 -0
package/docs/steps/input.md +220 -0
package/docs/steps/javascript.md +111 -0
package/docs/steps/keyboard.md +107 -0
package/docs/steps/link.md +217 -0
package/docs/steps/metatag.md +99 -0
package/docs/steps/modal.md +232 -0
package/docs/steps/navigation.md +275 -0
package/docs/steps/network.md +284 -0
package/docs/steps/path.md +203 -0
package/docs/steps/response.md +102 -0
package/docs/steps/responsive.md +139 -0
package/docs/steps/rest.md +140 -0
package/docs/steps/screenshot.md +211 -0
package/docs/steps/scroll.md +266 -0
package/docs/steps/selectors.md +848 -0
package/docs/steps/storage.md +254 -0
package/docs/steps/table.md +216 -0
package/docs/steps/varbase.md +391 -0
package/docs/steps/video.md +111 -0
package/docs/steps/wait.md +553 -0
package/docs/steps/web-first.md +289 -0
package/docs/steps/xml.md +505 -0
package/docs/steps/yaml.md +951 -0
package/examples/a11y.html +31 -0
package/examples/about-us.html +11 -0
package/examples/account.html +32 -0
package/examples/ajax-wait-examples.html +147 -0
package/examples/contact-us.html +10 -0
package/examples/cookies.html +10 -0
package/examples/date.html +12 -0
package/examples/dynamic-examples.html +498 -0
package/examples/element.html +11 -0
package/examples/example-api.json +28 -0
package/examples/existing-page.html +11 -0
package/examples/field.html +24 -0
package/examples/index.html +37 -0
package/examples/keyboard.html +11 -0
package/examples/links.html +9 -0
package/examples/modal.html +14 -0
package/examples/path.html +3 -0
package/examples/table.html +13 -0
package/examples/test--modal-dialogs.html +252 -0
package/examples/test--then--i-should--not--see-text-in-element.html +48 -0
package/examples/test--then--i-should--see-text-in-element.html +48 -0
package/examples/test--then--i-should--see-text-matching-pattern.html +31 -0
package/examples/test--then--i-should-see-text-in-table-row.html +232 -0
package/examples/test--then--the-checkbox-checked.html +68 -0
package/examples/test--then--the-element-should_not-contain-cssproperty.html +47 -0
package/examples/test--then--the-link-should-contain.html +21 -0
package/examples/test--when--i-additionally-select.html +27 -0
package/examples/test--when--i-attach-file-to-feild.html +50 -0
package/examples/test--when--i-check-uncheck-checkbox.html +47 -0
package/examples/test--when--i-click-link.html +18 -0
package/examples/test--when--i-click-text-in-table-row.html +178 -0
package/examples/test--when--i-fill-in.html +48 -0
package/examples/test--when--i-press-button.html +31 -0
package/examples/test--when--i-reload-page.html +27 -0
package/examples/test--when--i-scroll-functionality.html +177 -0
package/examples/test--when--i-scroll-left-right-functionality.html +149 -0
package/examples/test--when--i-select-option-from-dropdownlist.html +35 -0
package/examples/test--when--i-select-radio-button.html +95 -0
package/examples/test--when-i-wait-max-of-time.html +39 -0
package/examples/test--when-i-wait-page-until-is-loaded.html +47 -0
package/examples/test--when-i-wait-specific-time.html +39 -0
package/examples/test-acceptable-url-path.html +11 -0
package/examples/video-demo.html +43 -0
package/package.json +56 -0
package/playwright.config.ts +39 -0
package/tests/assets/test-document.pdf +14 -0
package/tests/assets/vardot.png +0 -0
package/tests/features/a11y.feature +39 -0
package/tests/features/ajax-wait-examples.feature +24 -0
package/tests/features/api-step-definitions-individual.feature +185 -0
package/tests/features/complete-api-testing-examples.feature +205 -0
package/tests/features/cookie.feature +13 -0
package/tests/features/date.feature +11 -0
package/tests/features/dynamic-content-examples.feature +156 -0
package/tests/features/element.feature +16 -0
package/tests/features/field.feature +25 -0
package/tests/features/keyboard.feature +10 -0
package/tests/features/link.feature +11 -0
package/tests/features/modal-advanced-example.feature +54 -0
package/tests/features/modal-basic-example.feature +42 -0
package/tests/features/modal-error-handling-example.feature +37 -0
package/tests/features/modal.feature +11 -0
package/tests/features/path.feature +16 -0
package/tests/features/response.feature +8 -0
package/tests/features/responsive.feature +10 -0
package/tests/features/table.feature +18 -0
package/tests/features/test--given--i-am-an-anonymous-user.feature +10 -0
package/tests/features/test--given--i-am-on-homepage.feature +16 -0
package/tests/features/test--then--i-save-screenshot.feature +33 -0
package/tests/features/test--then--i-see-locator.feature +320 -0
package/tests/features/test--then--i-should--not--see-text-in-element.feature +13 -0
package/tests/features/test--then--i-should--see-text-in-element-by-attr.feature +10 -0
package/tests/features/test--then--i-should--see-text-in-element.feature +10 -0
package/tests/features/test--then--i-should--see-text-matching-pattern-in-element.feature +13 -0
package/tests/features/test--then--i-should--see-text-matching-pattern.feature +18 -0
package/tests/features/test--then--i-should-be-on-page.feature +10 -0
package/tests/features/test--then--i-should-be-on-the-homepage.feature +10 -0
package/tests/features/test--then--i-should-not-see-an-element-by-attr.feature +8 -0
package/tests/features/test--then--i-should-not-see-an-element.feature +8 -0
package/tests/features/test--then--i-should-see-an-element-by-attr.feature +8 -0
package/tests/features/test--then--i-should-see-an-element.feature +8 -0
package/tests/features/test--then--i-should-see-n-elements.feature +24 -0
package/tests/features/test--then--i-should-see-text-in-table-row.feature +96 -0
package/tests/features/test--then--print-current-url-and-response.feature +21 -0
package/tests/features/test--then--the-checkbox-is-checked.feature +18 -0
package/tests/features/test--then--the-checkbox-should-be-checked.feature +16 -0
package/tests/features/test--then--the-element-should-contain-cssproperty.feature +9 -0
package/tests/features/test--then--the-element-should-not-contain-cssproperty.feature +10 -0
package/tests/features/test--then--the-field-should-contain-value.feature +11 -0
package/tests/features/test--then--the-response-should-contain.feature +11 -0
package/tests/features/test--then--the-response-status-code-should-be.feature +31 -0
package/tests/features/test--then--the-url-should-match.feature +7 -0
package/tests/features/test--then-the-link-should-contain-by-attribute.feature +18 -0
package/tests/features/test--then-the-link-should-contain.feature +7 -0
package/tests/features/test--when--i-additionally-select.feature +30 -0
package/tests/features/test--when--i-attach-file-to-feild.feature +9 -0
package/tests/features/test--when--i-check-checkbox.feature +21 -0
package/tests/features/test--when--i-click-link-by-attribute.feature +21 -0
package/tests/features/test--when--i-click-link.feature +9 -0
package/tests/features/test--when--i-click-text-in-table-row.feature +37 -0
package/tests/features/test--when--i-fill-in-by-attr.feature +31 -0
package/tests/features/test--when--i-fill-in-table-by-attr.feature +19 -0
package/tests/features/test--when--i-fill-in.feature +32 -0
package/tests/features/test--when--i-follow.feature +22 -0
package/tests/features/test--when--i-go-to-homepage.feature +9 -0
package/tests/features/test--when--i-move-forward-backward-one-page.feature +14 -0
package/tests/features/test--when--i-press-button-by-attribute.feature +18 -0
package/tests/features/test--when--i-press-button.feature +13 -0
package/tests/features/test--when--i-reload-page.feature +11 -0
package/tests/features/test--when--i-scroll-left-right.feature +48 -0
package/tests/features/test--when--i-scroll.feature +48 -0
package/tests/features/test--when--i-select-option-from-dropdownlist.feature +21 -0
package/tests/features/test--when--i-select-radio-button.feature +37 -0
package/tests/features/test--when--i-wait-page-is-loaded.feature +8 -0
package/tests/features/test--when--i-wait-time.feature +21 -0
package/tests/features/video.feature +18 -0
package/tests/features/wait.feature +7 -0
package/tests/features/yaml.feature +102 -0
package/tests/selectors/_canonical-keys.json +113 -0
package/tests/selectors/back-end-selectors.json +19 -0
package/tests/selectors/cms-contentful-admin.json +35 -0
package/tests/selectors/cms-craft-admin.json +39 -0
package/tests/selectors/cms-drupal-cms-gin.json +56 -0
package/tests/selectors/cms-drupal-core-claro.json +50 -0
package/tests/selectors/cms-generic-admin.json +34 -0
package/tests/selectors/cms-ghost-admin.json +34 -0
package/tests/selectors/cms-joomla-admin.json +41 -0
package/tests/selectors/cms-magento2-admin.json +32 -0
package/tests/selectors/cms-prestashop-admin.json +38 -0
package/tests/selectors/cms-shopify-admin.json +25 -0
package/tests/selectors/cms-strapi-admin.json +42 -0
package/tests/selectors/cms-typo3-admin.json +41 -0
package/tests/selectors/cms-woocommerce-front.json +50 -0
package/tests/selectors/cms-wordpress-admin.json +31 -0
package/tests/selectors/framework-ant-design.json +80 -0
package/tests/selectors/framework-bootstrap.json +86 -0
package/tests/selectors/framework-bulma.json +74 -0
package/tests/selectors/framework-chakra.json +58 -0
package/tests/selectors/framework-foundation.json +51 -0
package/tests/selectors/framework-material-ui.json +72 -0
package/tests/selectors/framework-shadcn.json +51 -0
package/tests/selectors/framework-tailwind.json +40 -0
package/tests/selectors/framework-vuetify.json +61 -0
package/tests/selectors/front-end-selectors.json +16 -0
package/tests/selectors/homepage-selectors.json +13 -0
package/tests/step-definitions/a11y.steps.js +800 -0
package/tests/step-definitions/action.steps.js +167 -0
package/tests/step-definitions/api.steps.js +732 -0
package/tests/step-definitions/assertion.steps.js +352 -0
package/tests/step-definitions/auth.steps.js +126 -0
package/tests/step-definitions/clock.steps.js +128 -0
package/tests/step-definitions/cookie.steps.js +216 -0
package/tests/step-definitions/debug.steps.js +39 -0
package/tests/step-definitions/dialog.steps.js +193 -0
package/tests/step-definitions/drupal-canvas.steps.js +764 -0
package/tests/step-definitions/drupal-ckeditor.steps.js +108 -0
package/tests/step-definitions/drupal-core.steps.js +665 -0
package/tests/step-definitions/drupal-helpers.js +371 -0
package/tests/step-definitions/drupal-layout-builder.steps.js +466 -0
package/tests/step-definitions/drupal-media.steps.js +99 -0
package/tests/step-definitions/drupal-moderation.steps.js +71 -0
package/tests/step-definitions/drupal-paragraphs.steps.js +50 -0
package/tests/step-definitions/element.steps.js +356 -0
package/tests/step-definitions/field.steps.js +653 -0
package/tests/step-definitions/file-download.steps.js +211 -0
package/tests/step-definitions/form.steps.js +333 -0
package/tests/step-definitions/iframe.steps.js +228 -0
package/tests/step-definitions/input.steps.js +202 -0
package/tests/step-definitions/javascript.steps.js +232 -0
package/tests/step-definitions/keyboard.steps.js +112 -0
package/tests/step-definitions/link.steps.js +142 -0
package/tests/step-definitions/metatag.steps.js +91 -0
package/tests/step-definitions/modal.steps.js +244 -0
package/tests/step-definitions/navigation.steps.js +218 -0
package/tests/step-definitions/network.steps.js +280 -0
package/tests/step-definitions/path.steps.js +141 -0
package/tests/step-definitions/response.steps.js +98 -0
package/tests/step-definitions/responsive.steps.js +125 -0
package/tests/step-definitions/rest.steps.js +111 -0
package/tests/step-definitions/screenshot.steps.js +423 -0
package/tests/step-definitions/scroll.steps.js +189 -0
package/tests/step-definitions/selectors.steps.js +1003 -0
package/tests/step-definitions/storage.steps.js +194 -0
package/tests/step-definitions/table.steps.js +181 -0
package/tests/step-definitions/varbase-e2e.js +897 -0
package/tests/step-definitions/varbase.steps.js +458 -0
package/tests/step-definitions/video.steps.js +178 -0
package/tests/step-definitions/wait.steps.js +400 -0
package/tests/step-definitions/web-first.steps.js +298 -0
package/tests/step-definitions/xml.steps.js +411 -0
package/tests/step-definitions/yaml.steps.js +913 -0
package/tsconfig.json +26 -0

package/examples/dynamic-examples.html ADDED Viewed

@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dynamic Content Examples - Varbase E2E Testing</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .example-section {
+            background: white;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        input, select {
+            padding: 8px;
+            margin: 5px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 10px 0;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 10px;
+            text-align: left;
+        }
+        th {
+            background: #f8f9fa;
+        }
+        .hidden {
+            display: none;
+        }
+        .modal {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+            z-index: 1000;
+        }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 999;
+        }
+        .success-message {
+            color: green;
+            padding: 10px;
+            margin: 10px 0;
+            background: #d4edda;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Dynamic Content Testing Examples</h1>
+    <p>This page demonstrates various dynamic content scenarios for automated testing.</p>
+    <!-- Example 1: Dynamically loaded button -->
+    <div class="example-section">
+        <h2>Example 1: Dynamically Loaded Button</h2>
+        <div id="dynamic-button-container"></div>
+    </div>
+    <!-- Example 2: Dynamic form fields -->
+    <div class="example-section">
+        <h2>Example 2: Dynamic Registration Form</h2>
+        <button onclick="showRegistrationForm()">Show Registration Form</button>
+        <div id="registration-form-container"></div>
+    </div>
+    <!-- Example 3: Dynamic dropdown options -->
+    <div class="example-section">
+        <h2>Example 3: Dynamic Dropdown</h2>
+        <button onclick="loadCountries()">Load Countries</button>
+        <div id="country-dropdown-container"></div>
+        <div id="country-selection"></div>
+    </div>
+    <!-- Example 4: Dynamic table rows -->
+    <div class="example-section">
+        <h2>Example 4: Dynamic Table</h2>
+        <button onclick="loadUsersTable()">Load Users Table</button>
+        <div id="users-table-container"></div>
+        <div id="edit-message"></div>
+    </div>
+    <!-- Example 5: Dynamic checkboxes -->
+    <div class="example-section">
+        <h2>Example 5: Dynamic Checkboxes</h2>
+        <button onclick="showPreferences()">Show Preferences</button>
+        <div id="preferences-container"></div>
+    </div>
+    <!-- Example 6: Dynamic file upload -->
+    <div class="example-section">
+        <h2>Example 6: Dynamic File Upload</h2>
+        <button onclick="enableFileUpload()">Enable File Upload</button>
+        <div id="file-upload-container"></div>
+        <div id="file-message"></div>
+    </div>
+    <!-- Example 7: Dynamic scrollable content -->
+    <div class="example-section">
+        <h2>Example 7: Dynamic Scrollable Content</h2>
+        <button onclick="loadMoreContent()">Load More Content</button>
+        <div id="content-container" style="height: 300px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px;"></div>
+    </div>
+    <!-- Example 8: Temporary elements -->
+    <div class="example-section">
+        <h2>Example 8: Temporary Element</h2>
+        <button onclick="showTemporaryButton()">Show Temporary Button</button>
+        <button onclick="removeButton()">Remove Button</button>
+        <div id="temp-button-container"></div>
+    </div>
+    <!-- Example 9: SPA Navigation -->
+    <div class="example-section">
+        <h2>Example 9: SPA Navigation</h2>
+        <button data-page="products" onclick="navigateTo('products')">Products</button>
+        <button data-page="cart" onclick="navigateTo('cart')">Cart</button>
+        <div id="spa-content"></div>
+    </div>
+    <!-- Example 10: Batch form filling -->
+    <div class="example-section">
+        <h2>Example 10: Dynamic Contact Form</h2>
+        <button onclick="showContactForm()">Show Contact Form</button>
+        <div id="contact-form-container"></div>
+    </div>
+    <!-- Example 11: AJAX Search -->
+    <div class="example-section">
+        <h2>Example 11: AJAX Search</h2>
+        <input type="text" id="search-input" placeholder="Enter search term">
+        <button onclick="performSearch()">Search</button>
+        <div id="search-results-container"></div>
+    </div>
+    <!-- Example 13: Infinite Scroll -->
+    <div class="example-section">
+        <h2>Example 13: Infinite Scroll</h2>
+        <div id="infinite-scroll-container" style="height: 400px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px;">
+            <div id="items-list"></div>
+        </div>
+    </div>
+    <!-- Example 14: React-like component -->
+    <div class="example-section">
+        <h2>Example 14: Component Rendering</h2>
+        <button onclick="initializeApp()">Initialize App</button>
+        <div id="react-app-container"></div>
+    </div>
+    <!-- Example 15: Conditional rendering -->
+    <div class="example-section">
+        <h2>Example 15: Conditional Form Fields</h2>
+        <label>Account Type:</label>
+        <select id="account-type" onchange="handleAccountTypeChange(this.value)">
+            <option value="">Select...</option>
+            <option value="personal">Personal</option>
+            <option value="Business">Business</option>
+        </select>
+        <div id="conditional-fields-container"></div>
+    </div>
+    <script>
+        // Example 1: Load button after 1 second
+        setTimeout(() => {
+            document.getElementById('dynamic-button-container').innerHTML = `
+                <p>Dynamic Content Loaded</p>
+                <button value="Submit Form" onclick="submitForm()">Submit Form</button>
+            `;
+        }, 1000);
+        function submitForm() {
+            alert('Form submitted successfully');
+            document.getElementById('dynamic-button-container').innerHTML += '<div class="success-message">Form submitted successfully</div>';
+        }
+        // Example 2: Show registration form
+        function showRegistrationForm() {
+            setTimeout(() => {
+                document.getElementById('registration-form-container').innerHTML = `
+                    <form id="registration-form">
+                        <input type="email" id="email" placeholder="Email" required><br>
+                        <input type="text" id="fullname" placeholder="Full Name" required><br>
+                        <input type="password" id="password" placeholder="Password" required><br>
+                        <button type="button" value="Register" onclick="register()">Register</button>
+                    </form>
+                `;
+            }, 500);
+        }
+        function register() {
+            document.getElementById('registration-form-container').innerHTML += '<div class="success-message">Registration successful</div>';
+        }
+        // Example 3: Load countries dropdown
+        function loadCountries() {
+            setTimeout(() => {
+                document.getElementById('country-dropdown-container').innerHTML = `
+                    <select name="country" id="country" onchange="selectCountry(this.value)">
+                        <option value="">Select Country</option>
+                        <option value="United States">United States</option>
+                        <option value="Canada">Canada</option>
+                        <option value="United Kingdom">United Kingdom</option>
+                    </select>
+                `;
+            }, 1000);
+        }
+        function selectCountry(country) {
+            document.getElementById('country-selection').innerHTML = `<p>You selected: ${country}</p>`;
+        }
+        // Example 4: Load users table
+        function loadUsersTable() {
+            setTimeout(() => {
+                document.getElementById('users-table-container').innerHTML = `
+                    <table>
+                        <tr>
+                            <th>Name</th>
+                            <th>Email</th>
+                            <th>Actions</th>
+                        </tr>
+                        <tr>
+                            <td>John Smith</td>
+                            <td>john@example.com</td>
+                            <td><button onclick="editUser('john@example.com')">Edit</button></td>
+                        </tr>
+                        <tr>
+                            <td>Jane Doe</td>
+                            <td>jane@example.com</td>
+                            <td><button onclick="editUser('jane@example.com')">Edit</button></td>
+                        </tr>
+                    </table>
+                `;
+            }, 1000);
+        }
+        function editUser(email) {
+            document.getElementById('edit-message').innerHTML = `<p>Editing user: ${email}</p>`;
+        }
+        // Example 5: Show preferences
+        function showPreferences() {
+            setTimeout(() => {
+                document.getElementById('preferences-container').innerHTML = `
+                    <label><input type="checkbox" id="newsletter"> Newsletter</label><br>
+                    <label><input type="checkbox" id="notifications"> Notifications</label>
+                `;
+            }, 500);
+        }
+        // Example 6: Enable file upload
+        function enableFileUpload() {
+            setTimeout(() => {
+                document.getElementById('file-upload-container').innerHTML = `
+                    <input type="file" id="file-upload" onchange="handleFileSelect(this)">
+                `;
+            }, 500);
+        }
+        function handleFileSelect(input) {
+            if (input.files.length > 0) {
+                document.getElementById('file-message').innerHTML = `<p>File selected: ${input.files[0].name}</p>`;
+            }
+        }
+        // Example 7: Load more content
+        function loadMoreContent() {
+            setTimeout(() => {
+                let content = '<div style="padding: 20px;">';
+                for (let i = 1; i <= 20; i++) {
+                    content += `<p>Dynamic content item ${i}</p>`;
+                }
+                content += '<p><strong>End of dynamic content</strong></p></div>';
+                document.getElementById('content-container').innerHTML = content;
+            }, 1000);
+        }
+        // Example 8: Temporary button
+        function showTemporaryButton() {
+            setTimeout(() => {
+                document.getElementById('temp-button-container').innerHTML = `
+                    <button id="temp-action">Temporary Action</button>
+                `;
+            }, 500);
+        }
+        function removeButton() {
+            setTimeout(() => {
+                document.getElementById('temp-button-container').innerHTML = '';
+            }, 500);
+        }
+        // Example 9: SPA Navigation
+        function navigateTo(page) {
+            setTimeout(() => {
+                if (page === 'products') {
+                    document.getElementById('spa-content').innerHTML = `
+                        <h3>Product Catalog</h3>
+                        <table>
+                            <tr>
+                                <th>Product</th>
+                                <th>Price</th>
+                                <th>Actions</th>
+                            </tr>
+                            <tr>
+                                <td>Laptop Pro 15</td>
+                                <td>$1,299</td>
+                                <td><button onclick="addToCart('Laptop Pro 15')">Add to Cart</button></td>
+                            </tr>
+                        </table>
+                    `;
+                }
+            }, 500);
+        }
+        function addToCart(product) {
+            alert('Item added to cart');
+            document.getElementById('spa-content').innerHTML += '<div class="success-message">Item added to cart</div>';
+        }
+        // Example 10: Contact form
+        function showContactForm() {
+            setTimeout(() => {
+                document.getElementById('contact-form-container').innerHTML = `
+                    <form>
+                        <input type="text" id="contact-name" placeholder="Name"><br>
+                        <input type="email" id="contact-email" placeholder="Email"><br>
+                        <input type="tel" id="contact-phone" placeholder="Phone"><br>
+                        <textarea id="contact-message" placeholder="Message"></textarea><br>
+                        <button type="button" value="Send Message" onclick="sendMessage()">Send Message</button>
+                    </form>
+                `;
+            }, 1000);
+        }
+        function sendMessage() {
+            document.getElementById('contact-form-container').innerHTML += '<div class="success-message">Message sent successfully</div>';
+        }
+        // Example 11: AJAX Search
+        function performSearch() {
+            const query = document.getElementById('search-input').value;
+            document.getElementById('search-results-container').innerHTML = '<p>Loading...</p>';
+            setTimeout(() => {
+                document.getElementById('search-results-container').innerHTML = `
+                    <h3>Search Results</h3>
+                    <table>
+                        <tr>
+                            <th>Product</th>
+                            <th>Actions</th>
+                        </tr>
+                        <tr>
+                            <td>Laptop Pro 15</td>
+                            <td><button onclick="viewDetails('Laptop Pro 15')">View Details</button></td>
+                        </tr>
+                    </table>
+                `;
+            }, 1000);
+        }
+        function viewDetails(product) {
+            document.getElementById('search-results-container').innerHTML = `
+                <h3>Product Details</h3>
+                <p>Showing details for ${product}</p>
+            `;
+        }
+        // Example 12: Modal
+        function openSettings() {
+            setTimeout(() => {
+                const modalHTML = `
+                    <div class="overlay" onclick="closeModal()"></div>
+                    <div class="modal" id="settings-modal">
+                        <h3>Settings Modal</h3>
+                        <label>Theme:</label>
+                        <select id="theme-select">
+                            <option value="Light">Light</option>
+                            <option value="Dark">Dark</option>
+                        </select><br><br>
+                        <button value="Save Settings" onclick="saveSettings()">Save Settings</button>
+                        <button onclick="closeModal()">Cancel</button>
+                    </div>
+                `;
+                document.body.insertAdjacentHTML('beforeend', modalHTML);
+            }, 500);
+        }
+        function saveSettings() {
+            alert('Settings saved');
+            closeModal();
+            document.querySelector('.example-section:nth-child(12)').innerHTML += '<div class="success-message">Settings saved</div>';
+        }
+        function closeModal() {
+            document.querySelector('.overlay')?.remove();
+            document.querySelector('.modal')?.remove();
+        }
+        // Example 13: Infinite scroll
+        let itemCount = 0;
+        function loadInitialItems() {
+            for (let i = 1; i <= 20; i++) {
+                itemCount++;
+                document.getElementById('items-list').innerHTML += `<p>Item ${itemCount}</p>`;
+            }
+        }
+        loadInitialItems();
+        document.getElementById('infinite-scroll-container').addEventListener('scroll', function() {
+            if (this.scrollTop + this.clientHeight >= this.scrollHeight - 10) {
+                document.getElementById('items-list').innerHTML += '<p><em>Loading more items...</em></p>';
+                setTimeout(() => {
+                    document.querySelectorAll('#items-list em').forEach(el => el.remove());
+                    for (let i = 1; i <= 20; i++) {
+                        itemCount++;
+                        document.getElementById('items-list').innerHTML += `<p>Item ${itemCount}</p>`;
+                    }
+                }, 3000);
+            }
+        });
+        // Example 14: React-like component
+        let count = 0;
+        function initializeApp() {
+            setTimeout(() => {
+                document.getElementById('react-app-container').innerHTML = `
+                    <p>React App Loaded</p>
+                    <p>Count: <span id="counter">0</span></p>
+                    <button id="increment-btn" onclick="incrementCounter()">Increment</button>
+                `;
+            }, 1000);
+        }
+        function incrementCounter() {
+            count++;
+            setTimeout(() => {
+                document.getElementById('counter').textContent = count;
+            }, 100);
+        }
+        // Example 15: Conditional rendering
+        function handleAccountTypeChange(type) {
+            setTimeout(() => {
+                if (type === 'Business') {
+                    document.getElementById('conditional-fields-container').innerHTML = `
+                        <input type="text" name="company-name" class="company-name" placeholder="Company Name"><br>
+                        <input type="text" name="tax-id" class="tax-id" placeholder="Tax ID"><br>
+                        <button value="Continue" onclick="createBusinessAccount()">Continue</button>
+                    `;
+                } else {
+                    document.getElementById('conditional-fields-container').innerHTML = '';
+                }
+            }, 500);
+        }
+        function createBusinessAccount() {
+            document.getElementById('conditional-fields-container').innerHTML += '<div class="success-message">Business account created</div>';
+        }
+    </script>
+</body>
+</html>

package/examples/element.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html><head><title>Element Demo</title></head>
+<body>
+  <h1 id="title" data-test="hero">Welcome</h1>
+  <p class="lead" data-role="intro">First paragraph</p>
+  <p class="lead" data-role="outro">Second paragraph</p>
+  <div id="hidden" style="display:none">hidden text</div>
+  <div id="centered" style="margin:0 auto;width:200px">center</div>
+  <button id="btn" onclick="document.getElementById('msg').textContent='clicked'">Click Me</button>
+  <span id="msg"></span>
+</body></html>

package/examples/example-api.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "data": [{
+    "type": "articles",
+    "id": "1",
+    "attributes": {
+      "title": "JSON:API paints my bikeshed!",
+      "body": "The shortest article. Ever.",
+      "created": "2015-05-22T14:56:29.000Z",
+      "updated": "2015-05-22T14:56:28.000Z"
+    },
+    "relationships": {
+      "author": {
+        "data": {"id": "42", "type": "people"}
+      }
+    }
+  }],
+  "included": [
+    {
+      "type": "people",
+      "id": "42",
+      "attributes": {
+        "name": "John",
+        "age": 80,
+        "gender": "male"
+      }
+    }
+  ]
+}

package/examples/existing-page.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>Existing Page</title>
+</head>
+<body>
+  <h1>Existing Page</h1>
+  <p>An example page that returns a 200 response code</p>
+</body>
+</html>

package/examples/field.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html><head><title>Field Demo</title></head>
+<body>
+  <form id="f">
+    <label for="username">Username</label>
+    <input id="username" name="username" type="text" required />
+    <label for="bio">Bio</label>
+    <textarea id="bio" name="bio"></textarea>
+    <label for="role">Role</label>
+    <select id="role" name="role">
+      <option value="">--</option>
+      <option value="admin">Admin</option>
+      <option value="user">User</option>
+    </select>
+    <label><input type="checkbox" id="agree" name="agree" /> Agree</label>
+    <label><input type="radio" name="color" value="red" id="r-red"/> Red</label>
+    <label><input type="radio" name="color" value="blue" id="r-blue"/> Blue</label>
+    <input type="color" id="fav" name="fav" value="#000000" />
+  </form>
+</body></html>

package/examples/index.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Varbase E2E Examples</title>
+    <style>
+      a:link{font-size: 30px; text-decoration: none;}
+      a:active {color: blue;}
+      a:visited {color: blue;}
+    </style>
+  </head>
+  <body>
+    <h1>Step Definitions Examples:</h1>
+    <h3>Welcome to the homepage of the Varbase E2E Examples</h3>
+    <ul>
+      <li><a href="/">Given I go to homepage</a></li>
+      <li><a href="about-us.html">About Us</a></li>
+      <li><a href="test--when--i-press-button.html">When I press "Button"</a></li>
+      <li><a href="test--when--i-reload-page.html">When I go reload page</a></li>
+      <li><a href="test--when--i-click-link.html">When I click "link"</a></li>
+      <li><a href="test--when--i-fill-in.html">When I fill in input text with value</a></li>
+      <li><a href="test--when--i-select-option-from-dropdownlist.html">When I select option from select box</a></li>
+      <li><a href="test--then--i-should--not--see-text-in-element.html">Then I sould (not) see test in element</a></li>
+      <li><a href="test--then--the-element-should_not-contain-cssproperty.html">Then the element should (not) contain css property</a></li>
+      <li><a href="test--then--the-checkbox-checked.html">Then the checkbox (is/should be) (not) checked</a></li>
+      <li><a href="test--when-i-wait-specific-time.html">When I Wait a specific Time</a></li>
+      <li><a href="test--when-i-wait-max-of-time.html">When I Wait a Maximum of Time</a></li>
+      <li><a href="test--modal-dialogs.html">Modal Dialog Interactions</a></li>
+    </ul>
+    <h3>Diffy visual-regression examples</h3>
+    <ul>
+      <li><a href="diffy/index.html">Diffy — examples index</a></li>
+      <li><a href="diffy/baseline.html">Diffy — Baseline page</a></li>
+      <li><a href="diffy/changed.html">Diffy — Changed page (visible regressions)</a></li>
+    </ul>
+  </body>
+</html>

package/examples/keyboard.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html><head><title>Keyboard</title></head>
+<body>
+  <input id="inp" />
+  <span id="last"></span>
+  <script>
+    document.getElementById('inp').addEventListener('keydown', (e) => {
+      document.getElementById('last').textContent = e.key;
+    });
+  </script>
+</body></html>

package/examples/links.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html><head><title>Links</title></head>
+<body>
+  <a href="/about" title="About us">About</a>
+  <a href="https://example.com" title="External">Example</a>
+  <div id="nav">
+    <a href="/contact">Contact</a>
+  </div>
+</body></html>

package/examples/modal.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html><head><title>Modal Demo</title>
+<style>
+  .modal { display: none; position: fixed; top: 20%; left: 30%; padding: 20px; background: #fff; border: 1px solid #ccc; }
+  .modal.show { display: block; }
+</style>
+</head>
+<body>
+  <button id="open" onclick="document.getElementById('m').classList.add('show')">Open</button>
+  <div id="m" class="modal" role="dialog" aria-label="Welcome dialog">
+    <p>Welcome modal text</p>
+    <button id="close-btn" class="close" aria-label="Close" onclick="document.getElementById('m').classList.remove('show')">X</button>
+  </div>
+</body></html>

package/examples/path.html ADDED Viewed

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html><head><title>Path</title></head>
+<body><h1 id="t">Path page</h1></body></html>

package/examples/table.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html><head><title>Tables</title></head>
+<body>
+  <table id="users">
+    <thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead>
+    <tbody>
+      <tr><td>Alice</td><td>Admin</td><td>Active</td></tr>
+      <tr><td>Bob</td><td>User</td><td>Active</td></tr>
+      <tr><td>Carol</td><td>User</td><td>Pending</td></tr>
+    </tbody>
+  </table>
+  <table id="empty"><thead><tr><th>X</th></tr></thead><tbody></tbody></table>
+</body></html>