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/test--when--i-scroll-left-right-functionality.html ADDED Viewed

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>Scrolling Functionality Test</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+    }
+    .indicator {
+      display: none;
+      font-size: 22px;
+      font-weight: bold;
+      color: #007bff;
+      padding: 12px 20px;
+      margin: 10px 0;
+      border: 2px solid #007bff;
+      background-color: #e7f3ff;
+      border-radius: 4px;
+    }
+    .content-block {
+      height: 300px;
+      background: #f0f4f8;
+      border: 1px solid #ccc;
+      margin: 10px 0;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      color: #555;
+    }
+    #scrollable-container {
+      width: 100%;
+      height: 150px;
+      overflow-y: scroll;
+      border: 2px solid #333;
+      margin: 20px 0;
+      padding: 10px;
+      background-color: #f9f9f9;
+      box-sizing: border-box;
+    }
+    .scrollable-inner {
+      height: 500px;
+      background: linear-gradient(to bottom, #ff9999, #99ff99, #9999ff);
+      padding: 10px;
+    }
+    #element-scroll-top { display: none; font-size: 18px; font-weight: bold; padding: 8px; }
+    #element-scroll-bottom { display: none; font-size: 18px; font-weight: bold; padding: 8px; }
+  </style>
+</head>
+<body>
+  <h1>Scrolling Functionality Test Page</h1>
+  <div id="basic-scroll-down" class="indicator">Basic scroll down works</div>
+  <div id="basic-scroll-up" class="indicator">Basic scroll up works</div>
+  <div id="custom-scroll-down" class="indicator">Custom scroll down works</div>
+  <div id="custom-scroll-up" class="indicator">Custom scroll up works</div>
+  <div id="scroll-to-top" class="indicator">Scroll to top works</div>
+  <div id="scroll-to-bottom" class="indicator">Scroll to bottom works</div>
+  <div class="content-block">Section 1 - Scroll down to see more</div>
+  <div class="content-block">Section 2</div>
+  <div class="content-block">Section 3</div>
+  <div class="content-block">Section 4</div>
+  <div class="content-block">Section 5</div>
+  <div class="content-block">Section 6</div>
+  <div class="content-block">Section 7</div>
+  <div class="content-block">Section 8</div>
+  <div class="content-block">Section 9</div>
+  <div class="content-block">Section 10 - Near the bottom</div>
+  <h2>Scrollable Element Container</h2>
+  <div id="scrollable-container">
+    <div class="scrollable-inner">
+      <div id="element-scroll-top">Element scroll to top works</div>
+      <p>Scrollable content - scroll this container to see indicators</p>
+      <div id="element-scroll-bottom">Element scroll to bottom works</div>
+    </div>
+  </div>
+  <div class="content-block">End of page content</div>
+  <script>
+    var lastScrollY = 0;
+    var wasAtBottom = false;
+    var everScrolledDown = false;
+    window.addEventListener('scroll', function () {
+      var scrollY = window.scrollY;
+      var docHeight = document.documentElement.scrollHeight;
+      var winHeight = window.innerHeight;
+      var maxScroll = docHeight - winHeight;
+      var atBottom = scrollY >= maxScroll - 10;
+      var atTop = scrollY <= 0;
+      var goingDown = scrollY > lastScrollY;
+      document.getElementById('basic-scroll-down').style.display = 'none';
+      document.getElementById('basic-scroll-up').style.display = 'none';
+      document.getElementById('custom-scroll-down').style.display = 'none';
+      document.getElementById('custom-scroll-up').style.display = 'none';
+      document.getElementById('scroll-to-top').style.display = 'none';
+      document.getElementById('scroll-to-bottom').style.display = 'none';
+      if (atTop && everScrolledDown) {
+        document.getElementById('scroll-to-top').style.display = 'block';
+      } else if (atBottom) {
+        document.getElementById('scroll-to-bottom').style.display = 'block';
+        wasAtBottom = true;
+        everScrolledDown = true;
+      } else if (wasAtBottom && !goingDown) {
+        var distFromBottom = maxScroll - scrollY;
+        if (distFromBottom >= 340) {
+          document.getElementById('basic-scroll-up').style.display = 'block';
+        } else {
+          document.getElementById('custom-scroll-up').style.display = 'block';
+        }
+      } else if (scrollY >= 450) {
+        document.getElementById('custom-scroll-down').style.display = 'block';
+      } else if (scrollY > 0) {
+        document.getElementById('basic-scroll-down').style.display = 'block';
+        everScrolledDown = true;
+      }
+      lastScrollY = scrollY;
+    });
+    var scrollContainer = document.getElementById('scrollable-container');
+    var containerWasAtBottom = false;
+    scrollContainer.addEventListener('scroll', function () {
+      var scrollTop = this.scrollTop;
+      var maxScrollTop = this.scrollHeight - this.clientHeight;
+      document.getElementById('element-scroll-top').style.display = 'none';
+      document.getElementById('element-scroll-bottom').style.display = 'none';
+      if (scrollTop >= maxScrollTop - 5) {
+        document.getElementById('element-scroll-bottom').style.display = 'block';
+        containerWasAtBottom = true;
+      } else if (scrollTop <= 0 && containerWasAtBottom) {
+        document.getElementById('element-scroll-top').style.display = 'block';
+      }
+    });
+  </script>
+</body>
+</html>

package/examples/test--when--i-select-option-from-dropdownlist.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>Select Option</title>
+  <style>
+    .style{
+      height: 50px;
+      font-size: 26px;
+      line-height: 50px;
+    }
+  </style>
+  <script>
+    function onClick(){
+      const cars = document.getElementById("cars");
+      const selectedOption = cars.options[cars.selectedIndex].text;
+      const element = document.getElementById("result");
+      element.innerText = "Option ( " + selectedOption + " ) has been selected successfully";
+    }
+  </script>
+</head>
+<body>
+  <h1>Select Option</h1>
+  <label for="cars">Choose a car:</label>
+  <select name="cars" id="cars">
+    <option value="volvo">Volvo</option>
+    <option value="saab">Saab</option>
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </select>
+  <input id="btnClick" class="btnClick" name="btnClick" type="button" value="Submit" onclick="onClick()">
+  <div id="result" class="style"></div><br/>
+</body>
+</html>

package/examples/test--when--i-select-radio-button.html ADDED Viewed

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>Select Radio Button</title>
+  <style>
+    .style {
+      height: 50px;
+      font-size: 26px;
+      line-height: 50px;
+    }
+    .section {
+      margin: 20px 0;
+      padding: 15px;
+      border: 1px solid #ccc;
+    }
+  </style>
+  <script>
+    function onGenderSubmit() {
+      var genderForm = document.forms[0];
+      var selectedGender = "";
+      for (var i = 0; i < genderForm.length; i++) {
+        if (genderForm[i].type === 'radio' && genderForm[i].checked) {
+          selectedGender = genderForm[i].value;
+          break;
+        }
+      }
+      const element = document.getElementById("gender-result");
+      element.innerText = "Selected: " + selectedGender;
+    }
+    function onPlanSubmit() {
+      var planForm = document.forms[2];
+      var selectedPlan = "";
+      for (var i = 0; i < planForm.length; i++) {
+        if (planForm[i].type === 'radio' && planForm[i].checked) {
+          selectedPlan = planForm[i].value;
+          break;
+        }
+      }
+      const element = document.getElementById("plan-result");
+      element.innerText = "Plan: " + selectedPlan;
+    }
+  </script>
+</head>
+<body>
+  <h1>Select Radio Button Options</h1>
+  <div class="section">
+    <h2>Gender Selection (by Label)</h2>
+    <form>
+      <input type="radio" id="gender-male" name="gender" value="Male">
+      <label for="gender-male">Male</label><br>
+      <input type="radio" id="gender-female" name="gender" value="Female">
+      <label for="gender-female">Female</label><br>
+      <input type="radio" id="gender-other" name="gender" value="Other">
+      <label for="gender-other">Other</label><br>
+    </form>
+    <input type="button" value="Submit" onclick="onGenderSubmit()">
+    <div id="gender-result" class="style"></div>
+  </div>
+  <div class="section">
+    <h2>Color Selection (by Value)</h2>
+    <form>
+      <label>
+        <input type="radio" name="color" value="red"> Red
+      </label><br>
+      <label>
+        <input type="radio" name="color" value="blue"> Blue
+      </label><br>
+      <label>
+        <input type="radio" name="color" value="green"> Green
+      </label><br>
+    </form>
+  </div>
+  <div class="section">
+    <h2>Plan Selection (by ID Selector)</h2>
+    <form>
+      <input type="radio" id="plan-basic" name="plan" value="Basic">
+      <label for="plan-basic">Basic Plan</label><br>
+      <input type="radio" id="plan-premium" name="plan" value="Premium">
+      <label for="plan-premium">Premium Plan</label><br>
+      <input type="radio" id="plan-enterprise" name="plan" value="Enterprise">
+      <label for="plan-enterprise">Enterprise Plan</label><br>
+    </form>
+    <input type="button" value="Plan Submit" onclick="onPlanSubmit()">
+    <div id="plan-result" class="style"></div>
+  </div>
+</body>
+</html>

package/examples/test--when-i-wait-max-of-time.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>I wait time</title>
+  <style>
+    .container,
+    .container input,
+    .container button {
+      font-size: 26px;
+    }
+    .style {
+      font-size: 22px;
+      line-height: 50px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Waiting Max number of Time</h1>
+  <div class="container">
+  <b><div id="result" class="style">Waiting . . .</div></b>
+  </div>
+</body>
+<script>
+  const element = document.getElementById("result");
+  const timeWate = 3;
+  setTimeout(() => {
+    element.innerText = 'Welcome with waiting until page load';
+  }, timeWate * 1000);
+</script>
+</html>

package/examples/test--when-i-wait-page-until-is-loaded.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>I wait page until is loaded</title>
+  <style>
+    .container,
+    .container input,
+    .container button {
+      font-size: 26px;
+    }
+    .style {
+      font-size: 22px;
+      line-height: 30px;
+    }
+    #complete{
+      font-size: 32px;
+      line-height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Waiting for the page to load</h1>
+  <div id="complete">
+  </div>
+  <div id="container">
+  </div>
+</body>
+<script>
+  for(var i=0; i<2000; i++){
+    document.getElementById("container").innerHTML += '<p class="style">' + i + '</p>';
+  }
+  document.getElementById("complete").innerHTML += "The waiting process was completed successfully.";
+</script>
+</html>

package/examples/test--when-i-wait-specific-time.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <title>I wait time</title>
+  <style>
+    .container,
+    .container input,
+    .container button {
+      font-size: 26px;
+    }
+    .style {
+      font-size: 22px;
+      line-height: 50px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Waiting a Specific number of Time</h1>
+  <div class="container">
+  <b><div id="result" class="style">Waiting . . .</div></b>
+  </div>
+</body>
+<script>
+  const element = document.getElementById("result");
+  const timeWate = 3;
+  setTimeout(() => {
+    element.innerText = 'Welcome with waiting full time';
+  }, timeWate * 1000);
+</script>
+</html>

package/examples/test-acceptable-url-path.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <title>Test Acceptable URL Path</title>
+</head>
+<body>
+  Example for test acceptable URL path that have "-" between words.
+</body>
+</html>

package/examples/video-demo.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>🎬 Video Demo</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 720px; margin: 2rem auto; padding: 1rem; background: linear-gradient(180deg, #fdf6e3 0%, #eee8d5 100%); color: #073642; }
+    h1 { font-size: 2rem; }
+    main { background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
+    button { font-size: 1.1rem; padding: 0.6rem 1.2rem; background: #268bd2; color: #fff; border: 0; border-radius: 8px; cursor: pointer; margin-right: 0.5rem; }
+    button:hover { background: #2aa198; }
+    .status { font-size: 1.4rem; padding: 1rem; margin-top: 1rem; border-radius: 8px; background: #fdf6e3; min-height: 2rem; }
+    .smile { font-size: 3rem; }
+  </style>
+</head>
+<body>
+  <h1>🎬 Varbase E2E Video Demo</h1>
+  <main role="main">
+    <p>Click a button below — the recording captures the page state change.</p>
+    <button id="wave">👋 Wave</button>
+    <button id="rocket">🚀 Launch</button>
+    <button id="party">🎉 Celebrate</button>
+    <div class="status" id="status">Ready to record ⏺️</div>
+    <div class="smile" id="smile"></div>
+  </main>
+  <script>
+    const status = document.getElementById('status');
+    const smile = document.getElementById('smile');
+    document.getElementById('wave').addEventListener('click', () => {
+      status.textContent = 'Hello, world 👋';
+      smile.textContent = '😀';
+    });
+    document.getElementById('rocket').addEventListener('click', () => {
+      status.textContent = 'Liftoff! 🚀';
+      smile.textContent = '🌕';
+    });
+    document.getElementById('party').addEventListener('click', () => {
+      status.textContent = 'Party time 🎉';
+      smile.textContent = '🥳';
+    });
+  </script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,56 @@
+{
+  "name": "@vardot/varbase-e2e",
+  "version": "2.0.0",
+  "description": "Varbase E2E automated functional testing.",
+  "main": "index.js",
+  "bin": {
+    "init-varbase-e2e": "./bin/init-varbase-e2e.js",
+    "generate-reports": "./bin/generate-reports.js"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "engines": {
+    "node": ">= 20.0"
+  },
+  "scripts": {
+    "postinstall": "node ./bin/postinstall.js",
+    "test": "cucumber-js --config cucumber.js",
+    "test:chromium": "BROWSER=chromium cucumber-js --config cucumber.js",
+    "test:firefox": "BROWSER=firefox cucumber-js --config cucumber.js",
+    "test:webkit": "BROWSER=webkit cucumber-js --config cucumber.js",
+    "test:headed": "HEADLESS=false cucumber-js --config cucumber.js",
+    "test:fast": "SLOW_MO=0 cucumber-js --config cucumber.js",
+    "generate-reports": "node ./bin/generate-reports.js",
+    "start": "http-server examples -p 8080 -s"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Vardot/varbase-e2e.git"
+  },
+  "author": "Vardot",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/Vardot/varbase-e2e/issues"
+  },
+  "homepage": "https://github.com/Vardot/varbase-e2e",
+  "dependencies": {
+    "@axe-core/playwright": "^4.11.3",
+    "@cucumber/cucumber": "*",
+    "@cucumber/pretty-formatter": "~1",
+    "@types/node": "~20",
+    "ajv": "^8.20.0",
+    "ajv-formats": "^3.0.1",
+    "axe-core": "^4.11.4",
+    "axios": "~1",
+    "cucumber-html-reporter": "^6.0.0",
+    "http-server": "^14.1.1",
+    "js-yaml": "^4.1.1",
+    "playwright": "^1.58.2",
+    "tsx": "^4.19.2",
+    "typescript": "~5"
+  }
+}

package/playwright.config.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import type { LaunchOptions, BrowserContextOptions } from 'playwright';
+type BrowserName = 'chromium' | 'firefox' | 'webkit';
+const browser = (process.env.BROWSER || 'chromium') as BrowserName;
+const chromiumArgs: string[] = [
+  '--no-sandbox',
+  '--disable-dev-shm-usage',
+  '--disable-setuid-sandbox',
+  '--disable-web-security',
+  '--ignore-certificate-errors',
+  '--disable-extensions',
+  '--incognito',
+  '--disable-infobars',
+  '--start-maximized',
+];
+interface PlaywrightConfig {
+  browser: BrowserName;
+  launchOptions: LaunchOptions;
+  contextOptions: BrowserContextOptions;
+}
+const config: PlaywrightConfig = {
+  browser,
+  launchOptions: {
+    headless: process.env.HEADLESS !== 'false',
+    // SLOW_MO env var: 0 in CI for speed, 800ms when watching headed runs.
+    slowMo: parseInt(process.env.SLOW_MO || (process.env.HEADLESS === 'false' ? '800' : '300'), 10),
+    args: browser === 'chromium' ? chromiumArgs : [],
+  },
+  contextOptions: {
+    viewport: null,
+    ignoreHTTPSErrors: true,
+  },
+};
+export = config;

package/tests/assets/test-document.pdf ADDED Viewed

@@ -0,0 +1,14 @@
+%PDF-1.4
+1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj
+2 0 obj<</Type/Pages/Kids[3 0 R]/Count 1>>endobj
+3 0 obj<</Type/Page/MediaBox[0 0 612 792]/Parent 2 0 R>>endobj
+xref
+0 4
+0000000000 65535 f
+0000000009 00000 n
+0000000058 00000 n
+0000000115 00000 n
+trailer<</Size 4/Root 1 0 R>>
+startxref
+190
+%%EOF

package/tests/assets/vardot.png ADDED Viewed

Binary file

package/tests/features/a11y.feature ADDED Viewed

@@ -0,0 +1,39 @@
+Feature: Accessibility (a11y) smoke checks
+  Scenario: Page-level landmarks and language
+    Given I am on "/a11y.html"
+     Then the page should declare a language
+      And the page language should be "en"
+      And the page should have a main landmark
+      And the page should have a navigation landmark
+      And the page should have exactly one h1
+  Scenario: Image alt text and form labels
+    Given I am on "/a11y.html"
+     Then every image should have an alt attribute
+      And every form field should have an accessible label
+  Scenario: Focused element assertions
+    Given I am on "/a11y.html"
+     When I focus on the element "#email"
+     Then the focused element should match "#email"
+      And the focused element should be labeled "Email"
+  Scenario: WCAG hygiene checks (custom probes)
+    Given I am on "/a11y.html"
+     Then the page should have a title
+      And user zoom should be allowed
+      And the heading hierarchy should be valid
+      And every button should have an accessible name
+      And every link should have an accessible name
+      And no element should have a positive tabindex
+      And every ARIA reference should resolve
+      And every ARIA role should be valid
+      And required fields should be consistently marked
+  Scenario: axe-core full WCAG audit
+    Given I am on "/a11y.html"
+     Then the page should have no critical accessibility violations
+      And the page should not violate the accessibility rule "image-alt"
+      And the page should not violate the accessibility rule "label"
+      And the page should pass the accessibility rules "image-alt, label, button-name"

package/tests/features/ajax-wait-examples.feature ADDED Viewed

@@ -0,0 +1,24 @@
+Feature: AJAX Wait Examples
+  As a tester
+  I want to wait for AJAX requests to complete
+  So that I can verify content that loads asynchronously
+  Background:
+    Given I am on "/ajax-wait-examples.html"
+  # Example 1: Wait for AJAX to finish before verifying content
+  Scenario: Wait for AJAX to finish after search
+    When I fill in "laptop" for "#search-input" by attr
+    And I press "Search" button
+    And I wait for AJAX to finish
+    Then I should see "Search Results"
+    And I should see "Laptop Pro 15"
+  # Example 2: Wait for AJAX to finish after form submission
+  Scenario: Wait for AJAX to finish after submitting form
+    When I fill in "John Doe" for "#name-input" by attr
+    And I fill in "john@example.com" for "#email-input" by attr
+    And I press "Submit" button
+    And I wait for AJAX to finish
+    Then I should see "Form submitted successfully"
+    And I should see "Thank you, John Doe"