@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
  1. package/AGENTS.md +148 -0
  2. package/CLAUDE.md +544 -0
  3. package/README.md +22 -0
  4. package/bin/generate-reports.js +363 -0
  5. package/bin/init-varbase-e2e.js +330 -0
  6. package/bin/postinstall.js +26 -0
  7. package/cucumber.js +125 -0
  8. package/docs/00-quick-start.md +102 -0
  9. package/docs/01-getting-started.md +102 -0
  10. package/docs/02-bbr-smart-waits.md +77 -0
  11. package/docs/03-selector-registry.md +95 -0
  12. package/docs/04-step-reference.md +801 -0
  13. package/docs/05-web-first-assertions.md +91 -0
  14. package/docs/06-network-and-dialogs.md +83 -0
  15. package/docs/07-auth-state.md +75 -0
  16. package/docs/08-clock-mocking.md +59 -0
  17. package/docs/09-api-testing.md +114 -0
  18. package/docs/10-accessibility.md +167 -0
  19. package/docs/11-debugging.md +129 -0
  20. package/docs/12-ai-agent-guide.md +338 -0
  21. package/docs/13-faq.md +236 -0
  22. package/docs/14-recipes-cookbook.md +255 -0
  23. package/docs/15-tag-conventions.md +76 -0
  24. package/docs/16-ci-cd.md +90 -0
  25. package/docs/README.md +125 -0
  26. package/docs/advanced-screenshots/then-i-save-fullscreen-screenshot.md +36 -0
  27. package/docs/advanced-screenshots/then-i-save-width-x-height-screenshot.md +34 -0
  28. package/docs/advanced-screenshots/when-i-save-screenshot-name-filename.md +45 -0
  29. package/docs/advanced-screenshots.md +52 -0
  30. package/docs/advanced-selectors.md +18 -0
  31. package/docs/api-step-definitions.md +45 -0
  32. package/docs/global-settings.md +267 -0
  33. package/docs/install-varbase-e2e/ddev-varbase-e2e.md +52 -0
  34. package/docs/install-varbase-e2e.md +34 -0
  35. package/docs/overview.md +40 -0
  36. package/docs/step-definitions/given-i-am-anonymous-user.md +67 -0
  37. package/docs/step-definitions/given-i-am-homepage.md +68 -0
  38. package/docs/step-definitions/given-i-am-specific-page.md +72 -0
  39. package/docs/step-definitions/then-i-should-be.md +56 -0
  40. package/docs/step-definitions/then-i-should-see.md +62 -0
  41. package/docs/step-definitions/then-item-checkbox.md +54 -0
  42. package/docs/step-definitions/then-item-link-should-contain-url.md +84 -0
  43. package/docs/step-definitions/then-item-should-contain.md +67 -0
  44. package/docs/step-definitions/then-radio-button-value-should-be-selected.md +68 -0
  45. package/docs/step-definitions/then-response-status-code-should-be-number.md +69 -0
  46. package/docs/step-definitions/then-value-radio-button-selected.md +62 -0
  47. package/docs/step-definitions/when-i-attach-file-file-name-element.md +71 -0
  48. package/docs/step-definitions/when-i-check-checkbox.md +60 -0
  49. package/docs/step-definitions/when-i-click-link.md +51 -0
  50. package/docs/step-definitions/when-i-click-operation-text-row.md +71 -0
  51. package/docs/step-definitions/when-i-fill.md +59 -0
  52. package/docs/step-definitions/when-i-go-homepage.md +60 -0
  53. package/docs/step-definitions/when-i-go-specific-page.md +67 -0
  54. package/docs/step-definitions/when-i-move-backward-one-page.md +49 -0
  55. package/docs/step-definitions/when-i-move-forward-one-page.md +58 -0
  56. package/docs/step-definitions/when-i-press-button.md +58 -0
  57. package/docs/step-definitions/when-i-reload-page.md +51 -0
  58. package/docs/step-definitions/when-i-scroll.md +73 -0
  59. package/docs/step-definitions/when-i-select-option-select-list.md +53 -0
  60. package/docs/step-definitions/when-i-select-radio-button-value.md +62 -0
  61. package/docs/step-definitions/when-i-uncheck-checkbox.md +57 -0
  62. package/docs/step-definitions/when-i-wait-ajax-finish.md +64 -0
  63. package/docs/step-definitions/when-i-wait.md +62 -0
  64. package/docs/step-definitions.md +82 -0
  65. package/docs/steps/README.md +137 -0
  66. package/docs/steps/a11y.md +731 -0
  67. package/docs/steps/action.md +181 -0
  68. package/docs/steps/api.md +679 -0
  69. package/docs/steps/assertion.md +328 -0
  70. package/docs/steps/auth.md +108 -0
  71. package/docs/steps/clock.md +171 -0
  72. package/docs/steps/cookie.md +293 -0
  73. package/docs/steps/debug.md +52 -0
  74. package/docs/steps/dialog.md +226 -0
  75. package/docs/steps/drupal-canvas.md +414 -0
  76. package/docs/steps/drupal-ckeditor.md +118 -0
  77. package/docs/steps/drupal-core.md +688 -0
  78. package/docs/steps/drupal-layout-builder.md +437 -0
  79. package/docs/steps/drupal-media.md +107 -0
  80. package/docs/steps/drupal-moderation.md +81 -0
  81. package/docs/steps/drupal-paragraphs.md +36 -0
  82. package/docs/steps/element.md +455 -0
  83. package/docs/steps/field.md +648 -0
  84. package/docs/steps/file-download.md +235 -0
  85. package/docs/steps/form.md +344 -0
  86. package/docs/steps/iframe.md +248 -0
  87. package/docs/steps/input.md +220 -0
  88. package/docs/steps/javascript.md +111 -0
  89. package/docs/steps/keyboard.md +107 -0
  90. package/docs/steps/link.md +217 -0
  91. package/docs/steps/metatag.md +99 -0
  92. package/docs/steps/modal.md +232 -0
  93. package/docs/steps/navigation.md +275 -0
  94. package/docs/steps/network.md +284 -0
  95. package/docs/steps/path.md +203 -0
  96. package/docs/steps/response.md +102 -0
  97. package/docs/steps/responsive.md +139 -0
  98. package/docs/steps/rest.md +140 -0
  99. package/docs/steps/screenshot.md +211 -0
  100. package/docs/steps/scroll.md +266 -0
  101. package/docs/steps/selectors.md +848 -0
  102. package/docs/steps/storage.md +254 -0
  103. package/docs/steps/table.md +216 -0
  104. package/docs/steps/varbase.md +391 -0
  105. package/docs/steps/video.md +111 -0
  106. package/docs/steps/wait.md +553 -0
  107. package/docs/steps/web-first.md +289 -0
  108. package/docs/steps/xml.md +505 -0
  109. package/docs/steps/yaml.md +951 -0
  110. package/examples/a11y.html +31 -0
  111. package/examples/about-us.html +11 -0
  112. package/examples/account.html +32 -0
  113. package/examples/ajax-wait-examples.html +147 -0
  114. package/examples/contact-us.html +10 -0
  115. package/examples/cookies.html +10 -0
  116. package/examples/date.html +12 -0
  117. package/examples/dynamic-examples.html +498 -0
  118. package/examples/element.html +11 -0
  119. package/examples/example-api.json +28 -0
  120. package/examples/existing-page.html +11 -0
  121. package/examples/field.html +24 -0
  122. package/examples/index.html +37 -0
  123. package/examples/keyboard.html +11 -0
  124. package/examples/links.html +9 -0
  125. package/examples/modal.html +14 -0
  126. package/examples/path.html +3 -0
  127. package/examples/table.html +13 -0
  128. package/examples/test--modal-dialogs.html +252 -0
  129. package/examples/test--then--i-should--not--see-text-in-element.html +48 -0
  130. package/examples/test--then--i-should--see-text-in-element.html +48 -0
  131. package/examples/test--then--i-should--see-text-matching-pattern.html +31 -0
  132. package/examples/test--then--i-should-see-text-in-table-row.html +232 -0
  133. package/examples/test--then--the-checkbox-checked.html +68 -0
  134. package/examples/test--then--the-element-should_not-contain-cssproperty.html +47 -0
  135. package/examples/test--then--the-link-should-contain.html +21 -0
  136. package/examples/test--when--i-additionally-select.html +27 -0
  137. package/examples/test--when--i-attach-file-to-feild.html +50 -0
  138. package/examples/test--when--i-check-uncheck-checkbox.html +47 -0
  139. package/examples/test--when--i-click-link.html +18 -0
  140. package/examples/test--when--i-click-text-in-table-row.html +178 -0
  141. package/examples/test--when--i-fill-in.html +48 -0
  142. package/examples/test--when--i-press-button.html +31 -0
  143. package/examples/test--when--i-reload-page.html +27 -0
  144. package/examples/test--when--i-scroll-functionality.html +177 -0
  145. package/examples/test--when--i-scroll-left-right-functionality.html +149 -0
  146. package/examples/test--when--i-select-option-from-dropdownlist.html +35 -0
  147. package/examples/test--when--i-select-radio-button.html +95 -0
  148. package/examples/test--when-i-wait-max-of-time.html +39 -0
  149. package/examples/test--when-i-wait-page-until-is-loaded.html +47 -0
  150. package/examples/test--when-i-wait-specific-time.html +39 -0
  151. package/examples/test-acceptable-url-path.html +11 -0
  152. package/examples/video-demo.html +43 -0
  153. package/package.json +56 -0
  154. package/playwright.config.ts +39 -0
  155. package/tests/assets/test-document.pdf +14 -0
  156. package/tests/assets/vardot.png +0 -0
  157. package/tests/features/a11y.feature +39 -0
  158. package/tests/features/ajax-wait-examples.feature +24 -0
  159. package/tests/features/api-step-definitions-individual.feature +185 -0
  160. package/tests/features/complete-api-testing-examples.feature +205 -0
  161. package/tests/features/cookie.feature +13 -0
  162. package/tests/features/date.feature +11 -0
  163. package/tests/features/dynamic-content-examples.feature +156 -0
  164. package/tests/features/element.feature +16 -0
  165. package/tests/features/field.feature +25 -0
  166. package/tests/features/keyboard.feature +10 -0
  167. package/tests/features/link.feature +11 -0
  168. package/tests/features/modal-advanced-example.feature +54 -0
  169. package/tests/features/modal-basic-example.feature +42 -0
  170. package/tests/features/modal-error-handling-example.feature +37 -0
  171. package/tests/features/modal.feature +11 -0
  172. package/tests/features/path.feature +16 -0
  173. package/tests/features/response.feature +8 -0
  174. package/tests/features/responsive.feature +10 -0
  175. package/tests/features/table.feature +18 -0
  176. package/tests/features/test--given--i-am-an-anonymous-user.feature +10 -0
  177. package/tests/features/test--given--i-am-on-homepage.feature +16 -0
  178. package/tests/features/test--then--i-save-screenshot.feature +33 -0
  179. package/tests/features/test--then--i-see-locator.feature +320 -0
  180. package/tests/features/test--then--i-should--not--see-text-in-element.feature +13 -0
  181. package/tests/features/test--then--i-should--see-text-in-element-by-attr.feature +10 -0
  182. package/tests/features/test--then--i-should--see-text-in-element.feature +10 -0
  183. package/tests/features/test--then--i-should--see-text-matching-pattern-in-element.feature +13 -0
  184. package/tests/features/test--then--i-should--see-text-matching-pattern.feature +18 -0
  185. package/tests/features/test--then--i-should-be-on-page.feature +10 -0
  186. package/tests/features/test--then--i-should-be-on-the-homepage.feature +10 -0
  187. package/tests/features/test--then--i-should-not-see-an-element-by-attr.feature +8 -0
  188. package/tests/features/test--then--i-should-not-see-an-element.feature +8 -0
  189. package/tests/features/test--then--i-should-see-an-element-by-attr.feature +8 -0
  190. package/tests/features/test--then--i-should-see-an-element.feature +8 -0
  191. package/tests/features/test--then--i-should-see-n-elements.feature +24 -0
  192. package/tests/features/test--then--i-should-see-text-in-table-row.feature +96 -0
  193. package/tests/features/test--then--print-current-url-and-response.feature +21 -0
  194. package/tests/features/test--then--the-checkbox-is-checked.feature +18 -0
  195. package/tests/features/test--then--the-checkbox-should-be-checked.feature +16 -0
  196. package/tests/features/test--then--the-element-should-contain-cssproperty.feature +9 -0
  197. package/tests/features/test--then--the-element-should-not-contain-cssproperty.feature +10 -0
  198. package/tests/features/test--then--the-field-should-contain-value.feature +11 -0
  199. package/tests/features/test--then--the-response-should-contain.feature +11 -0
  200. package/tests/features/test--then--the-response-status-code-should-be.feature +31 -0
  201. package/tests/features/test--then--the-url-should-match.feature +7 -0
  202. package/tests/features/test--then-the-link-should-contain-by-attribute.feature +18 -0
  203. package/tests/features/test--then-the-link-should-contain.feature +7 -0
  204. package/tests/features/test--when--i-additionally-select.feature +30 -0
  205. package/tests/features/test--when--i-attach-file-to-feild.feature +9 -0
  206. package/tests/features/test--when--i-check-checkbox.feature +21 -0
  207. package/tests/features/test--when--i-click-link-by-attribute.feature +21 -0
  208. package/tests/features/test--when--i-click-link.feature +9 -0
  209. package/tests/features/test--when--i-click-text-in-table-row.feature +37 -0
  210. package/tests/features/test--when--i-fill-in-by-attr.feature +31 -0
  211. package/tests/features/test--when--i-fill-in-table-by-attr.feature +19 -0
  212. package/tests/features/test--when--i-fill-in.feature +32 -0
  213. package/tests/features/test--when--i-follow.feature +22 -0
  214. package/tests/features/test--when--i-go-to-homepage.feature +9 -0
  215. package/tests/features/test--when--i-move-forward-backward-one-page.feature +14 -0
  216. package/tests/features/test--when--i-press-button-by-attribute.feature +18 -0
  217. package/tests/features/test--when--i-press-button.feature +13 -0
  218. package/tests/features/test--when--i-reload-page.feature +11 -0
  219. package/tests/features/test--when--i-scroll-left-right.feature +48 -0
  220. package/tests/features/test--when--i-scroll.feature +48 -0
  221. package/tests/features/test--when--i-select-option-from-dropdownlist.feature +21 -0
  222. package/tests/features/test--when--i-select-radio-button.feature +37 -0
  223. package/tests/features/test--when--i-wait-page-is-loaded.feature +8 -0
  224. package/tests/features/test--when--i-wait-time.feature +21 -0
  225. package/tests/features/video.feature +18 -0
  226. package/tests/features/wait.feature +7 -0
  227. package/tests/features/yaml.feature +102 -0
  228. package/tests/selectors/_canonical-keys.json +113 -0
  229. package/tests/selectors/back-end-selectors.json +19 -0
  230. package/tests/selectors/cms-contentful-admin.json +35 -0
  231. package/tests/selectors/cms-craft-admin.json +39 -0
  232. package/tests/selectors/cms-drupal-cms-gin.json +56 -0
  233. package/tests/selectors/cms-drupal-core-claro.json +50 -0
  234. package/tests/selectors/cms-generic-admin.json +34 -0
  235. package/tests/selectors/cms-ghost-admin.json +34 -0
  236. package/tests/selectors/cms-joomla-admin.json +41 -0
  237. package/tests/selectors/cms-magento2-admin.json +32 -0
  238. package/tests/selectors/cms-prestashop-admin.json +38 -0
  239. package/tests/selectors/cms-shopify-admin.json +25 -0
  240. package/tests/selectors/cms-strapi-admin.json +42 -0
  241. package/tests/selectors/cms-typo3-admin.json +41 -0
  242. package/tests/selectors/cms-woocommerce-front.json +50 -0
  243. package/tests/selectors/cms-wordpress-admin.json +31 -0
  244. package/tests/selectors/framework-ant-design.json +80 -0
  245. package/tests/selectors/framework-bootstrap.json +86 -0
  246. package/tests/selectors/framework-bulma.json +74 -0
  247. package/tests/selectors/framework-chakra.json +58 -0
  248. package/tests/selectors/framework-foundation.json +51 -0
  249. package/tests/selectors/framework-material-ui.json +72 -0
  250. package/tests/selectors/framework-shadcn.json +51 -0
  251. package/tests/selectors/framework-tailwind.json +40 -0
  252. package/tests/selectors/framework-vuetify.json +61 -0
  253. package/tests/selectors/front-end-selectors.json +16 -0
  254. package/tests/selectors/homepage-selectors.json +13 -0
  255. package/tests/step-definitions/a11y.steps.js +800 -0
  256. package/tests/step-definitions/action.steps.js +167 -0
  257. package/tests/step-definitions/api.steps.js +732 -0
  258. package/tests/step-definitions/assertion.steps.js +352 -0
  259. package/tests/step-definitions/auth.steps.js +126 -0
  260. package/tests/step-definitions/clock.steps.js +128 -0
  261. package/tests/step-definitions/cookie.steps.js +216 -0
  262. package/tests/step-definitions/debug.steps.js +39 -0
  263. package/tests/step-definitions/dialog.steps.js +193 -0
  264. package/tests/step-definitions/drupal-canvas.steps.js +764 -0
  265. package/tests/step-definitions/drupal-ckeditor.steps.js +108 -0
  266. package/tests/step-definitions/drupal-core.steps.js +665 -0
  267. package/tests/step-definitions/drupal-helpers.js +371 -0
  268. package/tests/step-definitions/drupal-layout-builder.steps.js +466 -0
  269. package/tests/step-definitions/drupal-media.steps.js +99 -0
  270. package/tests/step-definitions/drupal-moderation.steps.js +71 -0
  271. package/tests/step-definitions/drupal-paragraphs.steps.js +50 -0
  272. package/tests/step-definitions/element.steps.js +356 -0
  273. package/tests/step-definitions/field.steps.js +653 -0
  274. package/tests/step-definitions/file-download.steps.js +211 -0
  275. package/tests/step-definitions/form.steps.js +333 -0
  276. package/tests/step-definitions/iframe.steps.js +228 -0
  277. package/tests/step-definitions/input.steps.js +202 -0
  278. package/tests/step-definitions/javascript.steps.js +232 -0
  279. package/tests/step-definitions/keyboard.steps.js +112 -0
  280. package/tests/step-definitions/link.steps.js +142 -0
  281. package/tests/step-definitions/metatag.steps.js +91 -0
  282. package/tests/step-definitions/modal.steps.js +244 -0
  283. package/tests/step-definitions/navigation.steps.js +218 -0
  284. package/tests/step-definitions/network.steps.js +280 -0
  285. package/tests/step-definitions/path.steps.js +141 -0
  286. package/tests/step-definitions/response.steps.js +98 -0
  287. package/tests/step-definitions/responsive.steps.js +125 -0
  288. package/tests/step-definitions/rest.steps.js +111 -0
  289. package/tests/step-definitions/screenshot.steps.js +423 -0
  290. package/tests/step-definitions/scroll.steps.js +189 -0
  291. package/tests/step-definitions/selectors.steps.js +1003 -0
  292. package/tests/step-definitions/storage.steps.js +194 -0
  293. package/tests/step-definitions/table.steps.js +181 -0
  294. package/tests/step-definitions/varbase-e2e.js +897 -0
  295. package/tests/step-definitions/varbase.steps.js +458 -0
  296. package/tests/step-definitions/video.steps.js +178 -0
  297. package/tests/step-definitions/wait.steps.js +400 -0
  298. package/tests/step-definitions/web-first.steps.js +298 -0
  299. package/tests/step-definitions/xml.steps.js +411 -0
  300. package/tests/step-definitions/yaml.steps.js +913 -0
  301. package/tsconfig.json +26 -0
@@ -0,0 +1,252 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Modal Dialogs Test</title>
7
+ <style>
8
+ body { font-family: Arial, sans-serif; padding: 20px; }
9
+ button { margin: 5px; padding: 8px 16px; cursor: pointer; border-radius: 4px; border: 1px solid #ccc; }
10
+ .open-settings { background: #6c757d; color: white; border-color: #6c757d; }
11
+ table { border-collapse: collapse; width: 100%; margin: 20px 0; }
12
+ th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
13
+ th { background: #f2f2f2; }
14
+ #notification { margin-top: 10px; padding: 8px; display: none; color: green; }
15
+
16
+ /* Modal overlay */
17
+ .modal-overlay {
18
+ display: none;
19
+ position: fixed;
20
+ top: 0; left: 0; width: 100%; height: 100%;
21
+ background: rgba(0,0,0,0.5);
22
+ z-index: 1000;
23
+ justify-content: center;
24
+ align-items: center;
25
+ }
26
+ .modal-overlay.active {
27
+ display: flex;
28
+ }
29
+ .modal {
30
+ background: white;
31
+ border-radius: 8px;
32
+ padding: 24px;
33
+ max-width: 500px;
34
+ width: 90%;
35
+ position: relative;
36
+ box-shadow: 0 4px 20px rgba(0,0,0,0.3);
37
+ }
38
+ .modal-title { margin: 0 0 16px; font-size: 1.3em; }
39
+ .modal-body { margin-bottom: 16px; }
40
+ .modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
41
+ .modal-footer button { padding: 8px 16px; }
42
+ .btn-primary { background: #007bff; color: white; border-color: #007bff; }
43
+ .btn-danger { background: #dc3545; color: white; border-color: #dc3545; }
44
+ .btn-secondary { background: #6c757d; color: white; border-color: #6c757d; }
45
+ .close {
46
+ position: absolute;
47
+ top: 12px; right: 16px;
48
+ font-size: 1.4em;
49
+ cursor: pointer;
50
+ background: none;
51
+ border: none;
52
+ color: #888;
53
+ }
54
+ .modal-success { color: green; margin-top: 10px; display: none; }
55
+ input[type="text"], input[type="email"], textarea {
56
+ width: 100%; padding: 6px; margin: 4px 0 10px; box-sizing: border-box;
57
+ border: 1px solid #ddd; border-radius: 4px;
58
+ }
59
+ </style>
60
+ </head>
61
+ <body>
62
+ <h1>Modal Dialogs Test Page</h1>
63
+
64
+ <!-- Trigger buttons -->
65
+ <button id="show-welcome-modal" onclick="openModal('welcome-modal')">Show Welcome Modal</button>
66
+ <button class="open-settings" onclick="openModal('settings-modal')">Open Settings</button>
67
+ <button id="contact-form-btn" onclick="openModal('contact-modal')">Contact Form</button>
68
+ <button id="show-modal" onclick="openModal('basic-modal')">Show Modal</button>
69
+ <button id="trigger-modal" onclick="openModal('confirm-modal')">Trigger Modal</button>
70
+ <button id="delete-btn" onclick="openModal('delete-confirmation-modal')">Delete Item</button>
71
+
72
+ <div id="notification">Project deleted successfully</div>
73
+
74
+ <!-- Projects table for modal-error-handling-example -->
75
+ <h2>Projects</h2>
76
+ <table id="projects-table">
77
+ <thead>
78
+ <tr><th>Project</th><th>Status</th><th>Actions</th></tr>
79
+ </thead>
80
+ <tbody>
81
+ <tr>
82
+ <td>Project Alpha</td>
83
+ <td>Active</td>
84
+ <td><button onclick="openDeleteModal('Project Alpha')">Delete</button></td>
85
+ </tr>
86
+ <tr>
87
+ <td>Project Beta</td>
88
+ <td>Active</td>
89
+ <td><button onclick="openDeleteModal('Project Beta')">Delete</button></td>
90
+ </tr>
91
+ </tbody>
92
+ </table>
93
+
94
+ <!-- Welcome Modal -->
95
+ <div id="welcome-modal-overlay" class="modal-overlay" role="dialog" aria-label="Welcome Message">
96
+ <div class="modal" id="welcome-modal">
97
+ <button class="close" onclick="closeModal('welcome-modal-overlay')">&times;</button>
98
+ <h2 class="modal-title">Welcome Message</h2>
99
+ <div class="modal-body">
100
+ <p>Thank you for joining us!</p>
101
+ <p>We're glad to have you here.</p>
102
+ </div>
103
+ <div class="modal-footer">
104
+ <button class="btn-primary" onclick="closeModal('welcome-modal-overlay')">OK</button>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Settings Modal -->
110
+ <div id="settings-modal-overlay" class="modal-overlay" role="dialog" aria-label="User Settings">
111
+ <div class="modal" id="settings-modal">
112
+ <button class="close" onclick="closeModal('settings-modal-overlay')">&times;</button>
113
+ <h2 class="modal-title">User Settings</h2>
114
+ <div class="modal-body">
115
+ <label>Username:</label>
116
+ <input type="text" id="username" name="username" placeholder="Enter username">
117
+ <label>Email:</label>
118
+ <input type="email" id="email" name="email" placeholder="Enter email">
119
+ <div class="modal-success" id="settings-success">Settings saved successfully</div>
120
+ </div>
121
+ <div class="modal-footer">
122
+ <button class="btn-primary" onclick="saveSettings()">Save Changes</button>
123
+ <button class="btn-secondary" onclick="closeModal('settings-modal-overlay')">Close</button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Contact Modal -->
129
+ <div id="contact-modal-overlay" class="modal-overlay" role="dialog" aria-label="Contact Form">
130
+ <div class="modal" id="contact-modal">
131
+ <button class="close" onclick="closeModal('contact-modal-overlay')">&times;</button>
132
+ <h2 class="modal-title">Contact Us</h2>
133
+ <div class="modal-body">
134
+ <p>Enter payment details</p>
135
+ <input type="text" id="contact-name" name="contact-name" placeholder="Your name">
136
+ <input type="email" id="contact-email" name="contact-email" placeholder="Your email">
137
+ <textarea id="contact-message" name="contact-message" rows="3" placeholder="Message"></textarea>
138
+ <div class="modal-success" id="contact-success">Message sent successfully</div>
139
+ </div>
140
+ <div class="modal-footer">
141
+ <button class="btn-primary" onclick="submitContact()">Submit</button>
142
+ <button class="btn-secondary" onclick="closeModal('contact-modal-overlay')">Cancel</button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Basic Modal -->
148
+ <div id="basic-modal-overlay" class="modal-overlay" role="dialog">
149
+ <div class="modal" id="basic-modal">
150
+ <button class="close" onclick="closeModal('basic-modal-overlay')">&times;</button>
151
+ <h2 class="modal-title">Welcome</h2>
152
+ <div class="modal-body">
153
+ <p>This is a sample modal dialog</p>
154
+ </div>
155
+ <div class="modal-footer">
156
+ <button class="btn-primary" onclick="closeModal('basic-modal-overlay')">OK</button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Confirm Modal -->
162
+ <div id="confirm-modal-overlay" class="modal-overlay" role="dialog">
163
+ <div class="modal" id="confirm-modal">
164
+ <button class="close" onclick="closeModal('confirm-modal-overlay')">&times;</button>
165
+ <h2 class="modal-title">Confirm Action</h2>
166
+ <div class="modal-body">
167
+ <p>Are you sure you want to proceed?</p>
168
+ </div>
169
+ <div class="modal-footer">
170
+ <button class="btn-primary" onclick="closeModal('confirm-modal-overlay')">Confirm</button>
171
+ <button class="btn-secondary" onclick="closeModal('confirm-modal-overlay')">Cancel</button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Delete Confirmation Modal -->
177
+ <div id="delete-confirmation-modal-overlay" class="modal-overlay" role="dialog">
178
+ <div class="modal" id="delete-confirmation-modal">
179
+ <button class="close" onclick="closeModal('delete-confirmation-modal-overlay')">&times;</button>
180
+ <h2 class="modal-title">Confirm Delete</h2>
181
+ <div class="modal-body">
182
+ <p>Are you sure you want to delete this item?</p>
183
+ <p>This action cannot be undone</p>
184
+ </div>
185
+ <div class="modal-footer">
186
+ <button class="btn-danger" onclick="confirmDelete()">Yes, Delete</button>
187
+ <button class="btn-secondary" onclick="closeModal('delete-confirmation-modal-overlay')">Cancel</button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Project Delete Confirmation Modal -->
193
+ <div id="project-delete-modal-overlay" class="modal-overlay" role="dialog">
194
+ <div class="modal" id="project-delete-modal">
195
+ <button class="close" onclick="closeModal('project-delete-modal-overlay')">&times;</button>
196
+ <h2 class="modal-title">Confirm Delete</h2>
197
+ <div class="modal-body">
198
+ <p id="project-delete-message">Are you sure you want to delete this project?</p>
199
+ </div>
200
+ <div class="modal-footer">
201
+ <button class="btn-danger" onclick="confirmProjectDelete()">Yes, Delete</button>
202
+ <button class="btn-secondary" onclick="closeModal('project-delete-modal-overlay')">Cancel</button>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <script>
208
+ var currentProject = '';
209
+
210
+ function openModal(modalId) {
211
+ var overlay = document.getElementById(modalId + '-overlay');
212
+ if (overlay) overlay.classList.add('active');
213
+ }
214
+
215
+ function closeModal(overlayId) {
216
+ var overlay = document.getElementById(overlayId);
217
+ if (overlay) overlay.classList.remove('active');
218
+ }
219
+
220
+ function openDeleteModal(projectName) {
221
+ currentProject = projectName;
222
+ document.getElementById('project-delete-message').textContent =
223
+ 'Are you sure you want to delete ' + projectName + '?';
224
+ openModal('project-delete-modal');
225
+ }
226
+
227
+ function confirmDelete() {
228
+ closeModal('delete-confirmation-modal-overlay');
229
+ }
230
+
231
+ function confirmProjectDelete() {
232
+ closeModal('project-delete-modal-overlay');
233
+ var n = document.getElementById('notification');
234
+ n.style.display = 'block';
235
+ setTimeout(function() { n.style.display = 'none'; }, 5000);
236
+ }
237
+
238
+ function saveSettings() {
239
+ var s = document.getElementById('settings-success');
240
+ s.style.display = 'block';
241
+ }
242
+
243
+ function submitContact() {
244
+ var s = document.getElementById('contact-success');
245
+ s.style.display = 'block';
246
+ setTimeout(function() {
247
+ closeModal('contact-modal-overlay');
248
+ }, 3000);
249
+ }
250
+ </script>
251
+ </body>
252
+ </html>
@@ -0,0 +1,48 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <title>Press Button</title>
6
+ <style>
7
+ .container,
8
+ .container input,
9
+ .container button{
10
+ font-size: 26px;
11
+ }
12
+ .style{
13
+ width: 400px;
14
+ height: 50px;
15
+ font-size: 18px;
16
+ line-height: 50px;
17
+ text-align: center;
18
+ }
19
+ </style>
20
+
21
+ <script>
22
+ function onClick(){
23
+ const username = document.getElementById("uname");
24
+ const password = document.getElementById("pword");
25
+ const element = document.getElementById("result");
26
+ element.innerText = "You enter Username: " + username.value + " and Password: " + password.value;
27
+ }
28
+ </script>
29
+
30
+ </head>
31
+ <body>
32
+ <h1>Login</h1>
33
+
34
+ <div class="container">
35
+ <p><label for="uname">Username</label></p>
36
+ <p><input id="uname" class="unamecss" type="text" placeholder="Enter Username" name="username"></p>
37
+
38
+ <p><label for="pword">Password</label></p>
39
+ <p><input id="pword" class="pwordcss" type="password" placeholder="Enter Password" name="password"></p>
40
+
41
+ <p><input id="reset" type="reset" value="Reset" /><input id="btnLogin" class="btnLogin" name="btnLogin" type="button" value="Login" onclick="onClick()" /></p>
42
+
43
+ </div>
44
+
45
+ <div id="result" class="style"></div><br/>
46
+
47
+ </body>
48
+ </html>
@@ -0,0 +1,48 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <title>Press Button</title>
6
+ <style>
7
+ .container,
8
+ .container input,
9
+ .container button{
10
+ font-size: 26px;
11
+ }
12
+ .style{
13
+ width: 400px;
14
+ height: 50px;
15
+ font-size: 18px;
16
+ line-height: 50px;
17
+ text-align: center;
18
+ }
19
+ </style>
20
+
21
+ <script>
22
+ function onClick(){
23
+ const username = document.getElementById("uname");
24
+ const password = document.getElementById("pword");
25
+ const element = document.getElementById("result");
26
+ element.innerText = "You enter Username: " + username.value + " and Password: " + password.value;
27
+ }
28
+ </script>
29
+
30
+ </head>
31
+ <body>
32
+ <h1>Login</h1>
33
+
34
+ <div class="container">
35
+ <p><label for="uname">Username</label></p>
36
+ <p><input id="uname" class="unamecss" type="text" placeholder="Enter Username" name="username"></p>
37
+
38
+ <p><label for="pword">Password</label></p>
39
+ <p><input id="pword" class="pwordcss" type="password" placeholder="Enter Password" name="password"></p>
40
+
41
+ <p><input id="reset" type="reset" value="Reset" /><input id="btnLogin" class="btnLogin" name="btnLogin" type="button" value="Login" onclick="onClick()" /></p>
42
+
43
+ </div>
44
+
45
+ <div id="result" class="style"></div><br/>
46
+
47
+ </body>
48
+ </html>
@@ -0,0 +1,31 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset='utf-8'>
6
+ <title>Text Matching Pattern</title>
7
+ <style>
8
+ .container,
9
+ .container input,
10
+ .container button {
11
+ font-size: 26px;
12
+ }
13
+ </style>
14
+
15
+ </head>
16
+
17
+ <body>
18
+ <h1>Text Matching Pattern</h1>
19
+
20
+ <div class="container">
21
+ <p>Email:</p><p>info@vardot.com</p>
22
+ <p>Telephone:</p><p>0796-778899</p>
23
+ <p>Password conditions:</p><p>Pa$$word2023</p>
24
+ <div class="time"><p>Time:</p><p>10:30 AM</p></div>
25
+ <div id="date"><p>Date (Number):</p><p>22-03-2023</p></div>
26
+ <div id="countryCode"><p>Country code:</p><p id="ccode">JOR</p></div>
27
+ </div>
28
+
29
+ </body>
30
+
31
+ </html>
@@ -0,0 +1,232 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Table Row Text Assertion Test</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 20px;
11
+ }
12
+ table {
13
+ border-collapse: collapse;
14
+ width: 100%;
15
+ margin: 20px 0;
16
+ }
17
+ th, td {
18
+ border: 1px solid #ddd;
19
+ padding: 8px;
20
+ text-align: left;
21
+ }
22
+ th {
23
+ background-color: #f2f2f2;
24
+ }
25
+ .status-active { color: #28a745; font-weight: bold; }
26
+ .status-inactive { color: #dc3545; font-weight: bold; }
27
+ .status-pending { color: #ffc107; font-weight: bold; }
28
+ .price { color: #007bff; font-weight: bold; }
29
+ .stock-high { color: #28a745; }
30
+ .stock-low { color: #dc3545; }
31
+ .badge {
32
+ padding: 3px 8px;
33
+ border-radius: 3px;
34
+ font-size: 0.8em;
35
+ font-weight: bold;
36
+ text-transform: uppercase;
37
+ }
38
+ .badge-admin { background-color: #dc3545; color: white; }
39
+ .badge-user { background-color: #17a2b8; color: white; }
40
+ .badge-manager { background-color: #28a745; color: white; }
41
+ .badge-guest { background-color: #6c757d; color: white; }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <h1>Table Row Text Assertion Test Page</h1>
46
+ <p>This page demonstrates text visibility assertions within table rows for automated testing.</p>
47
+
48
+ <h2>Employee Directory</h2>
49
+ <table id="employees-table">
50
+ <thead>
51
+ <tr>
52
+ <th>Name</th>
53
+ <th>Email</th>
54
+ <th>Department</th>
55
+ <th>Role</th>
56
+ <th>Status</th>
57
+ <th>Salary</th>
58
+ </tr>
59
+ </thead>
60
+ <tbody>
61
+ <tr>
62
+ <td>John Smith</td>
63
+ <td>john.smith@company.com</td>
64
+ <td>Engineering</td>
65
+ <td><span class="badge badge-admin">Admin</span></td>
66
+ <td><span class="status-active">Active</span></td>
67
+ <td class="price">$85,000</td>
68
+ </tr>
69
+ <tr>
70
+ <td>Jane Doe</td>
71
+ <td>jane.doe@company.com</td>
72
+ <td>Marketing</td>
73
+ <td><span class="badge badge-user">User</span></td>
74
+ <td><span class="status-active">Active</span></td>
75
+ <td class="price">$65,000</td>
76
+ </tr>
77
+ <tr>
78
+ <td>Bob Johnson</td>
79
+ <td>bob.johnson@company.com</td>
80
+ <td>Sales</td>
81
+ <td><span class="badge badge-manager">Manager</span></td>
82
+ <td><span class="status-pending">On Leave</span></td>
83
+ <td class="price">$75,000</td>
84
+ </tr>
85
+ <tr>
86
+ <td>Alice Cooper</td>
87
+ <td>alice.cooper@company.com</td>
88
+ <td>HR</td>
89
+ <td><span class="badge badge-user">User</span></td>
90
+ <td><span class="status-inactive">Inactive</span></td>
91
+ <td class="price">$60,000</td>
92
+ </tr>
93
+ </tbody>
94
+ </table>
95
+
96
+ <h2>Product Inventory</h2>
97
+ <table id="inventory-table">
98
+ <thead>
99
+ <tr>
100
+ <th>Product Name</th>
101
+ <th>SKU</th>
102
+ <th>Category</th>
103
+ <th>Price</th>
104
+ <th>Stock</th>
105
+ <th>Availability</th>
106
+ </tr>
107
+ </thead>
108
+ <tbody>
109
+ <tr>
110
+ <td>Wireless Headphones</td>
111
+ <td>WH-2024-001</td>
112
+ <td>Electronics</td>
113
+ <td class="price">$199.99</td>
114
+ <td class="stock-high">150</td>
115
+ <td>In Stock</td>
116
+ </tr>
117
+ <tr>
118
+ <td>Gaming Mouse</td>
119
+ <td>GM-2024-002</td>
120
+ <td>Electronics</td>
121
+ <td class="price">$79.99</td>
122
+ <td class="stock-low">5</td>
123
+ <td>Low Stock</td>
124
+ </tr>
125
+ <tr>
126
+ <td>Office Chair</td>
127
+ <td>OC-2024-003</td>
128
+ <td>Furniture</td>
129
+ <td class="price">$299.99</td>
130
+ <td class="stock-low">0</td>
131
+ <td>Out of Stock</td>
132
+ </tr>
133
+ <tr>
134
+ <td>Laptop Stand</td>
135
+ <td>LS-2024-004</td>
136
+ <td>Accessories</td>
137
+ <td class="price">$49.99</td>
138
+ <td class="stock-high">87</td>
139
+ <td>In Stock</td>
140
+ </tr>
141
+ </tbody>
142
+ </table>
143
+
144
+ <h2>Order History</h2>
145
+ <table id="orders-table">
146
+ <thead>
147
+ <tr>
148
+ <th>Order ID</th>
149
+ <th>Customer</th>
150
+ <th>Product</th>
151
+ <th>Amount</th>
152
+ <th>Status</th>
153
+ <th>Date</th>
154
+ </tr>
155
+ </thead>
156
+ <tbody>
157
+ <tr>
158
+ <td>ORD-2024-001</td>
159
+ <td>Michael Chen</td>
160
+ <td>Wireless Headphones</td>
161
+ <td class="price">$199.99</td>
162
+ <td><span class="status-active">Completed</span></td>
163
+ <td>2024-08-15</td>
164
+ </tr>
165
+ <tr>
166
+ <td>ORD-2024-002</td>
167
+ <td>Sarah Wilson</td>
168
+ <td>Gaming Mouse</td>
169
+ <td class="price">$79.99</td>
170
+ <td><span class="status-pending">Processing</span></td>
171
+ <td>2024-08-16</td>
172
+ </tr>
173
+ <tr>
174
+ <td>ORD-2024-003</td>
175
+ <td>David Miller</td>
176
+ <td>Office Chair</td>
177
+ <td class="price">$299.99</td>
178
+ <td><span class="status-inactive">Cancelled</span></td>
179
+ <td>2024-08-14</td>
180
+ </tr>
181
+ <tr>
182
+ <td>ORD-2024-004</td>
183
+ <td>Emma Davis</td>
184
+ <td>Laptop Stand</td>
185
+ <td class="price">$49.99</td>
186
+ <td><span class="status-active">Shipped</span></td>
187
+ <td>2024-08-13</td>
188
+ </tr>
189
+ </tbody>
190
+ </table>
191
+
192
+ <h2>Project Status</h2>
193
+ <table id="projects-table">
194
+ <thead>
195
+ <tr>
196
+ <th>Project Name</th>
197
+ <th>Manager</th>
198
+ <th>Team Size</th>
199
+ <th>Progress</th>
200
+ <th>Priority</th>
201
+ <th>Due Date</th>
202
+ </tr>
203
+ </thead>
204
+ <tbody>
205
+ <tr>
206
+ <td>Website Redesign</td>
207
+ <td>John Smith</td>
208
+ <td>5 members</td>
209
+ <td>75%</td>
210
+ <td>High</td>
211
+ <td>2024-09-15</td>
212
+ </tr>
213
+ <tr>
214
+ <td>Mobile App</td>
215
+ <td>Jane Doe</td>
216
+ <td>8 members</td>
217
+ <td>45%</td>
218
+ <td>Medium</td>
219
+ <td>2024-10-30</td>
220
+ </tr>
221
+ <tr>
222
+ <td>API Integration</td>
223
+ <td>Bob Johnson</td>
224
+ <td>3 members</td>
225
+ <td>90%</td>
226
+ <td>High</td>
227
+ <td>2024-08-30</td>
228
+ </tr>
229
+ </tbody>
230
+ </table>
231
+ </body>
232
+ </html>
@@ -0,0 +1,68 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset='utf-8'>
6
+ <title>Item should be checked</title>
7
+ <style>
8
+ .container,
9
+ .container input,
10
+ .container button {
11
+ font-size: 22px;
12
+ }
13
+
14
+ .style {
15
+ width: 400px;
16
+ height: 50px;
17
+ font-size: 22px;
18
+ line-height: 50px;
19
+ text-align: center;
20
+ }
21
+ </style>
22
+
23
+ <script>
24
+ function onClick() {
25
+ const element = document.getElementById("result");
26
+ const PrivacyPolicy = document.getElementById("PrivacyPolicy");
27
+ if (PrivacyPolicy.checked) {
28
+ element.innerText = "Registration Done Successfully";
29
+ } else {
30
+ element.innerText = "Please check Agree to Privacy Policy";
31
+ }
32
+
33
+ }
34
+ </script>
35
+
36
+ </head>
37
+
38
+ <body>
39
+ <h1>Registration</h1>
40
+
41
+ <div class="container">
42
+ <p>
43
+ <label for="email">Email</label><br/>
44
+ <input type="text" placeholder="Enter Email" name="email" id="email" required>
45
+ </p>
46
+ <p>
47
+ <label for="psw">Password</label><br/>
48
+ <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
49
+ </p>
50
+ <p>
51
+ <label for="psw-repeat">Repeat Password</label><br/>
52
+ <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
53
+ </p>
54
+ <hr>
55
+
56
+ <p><input type="checkbox" value="lsRememberMe" id="rememberMe" name="rememberMe"> <label for="rememberMe">Remember me</label></p>
57
+ <p><input type="checkbox" value="lsPrivacyPolicy" id="PrivacyPolicy" name="PrivacyPolicy"> <label for="PrivacyPolicy">I Agree to Privacy Policy</label></p>
58
+
59
+ <p><input id="registerbtn" class="registerbtn" name="registerbtn" type="button" value="Register"
60
+ onclick="onClick()"></p>
61
+
62
+ </div>
63
+
64
+ <div id="result" class="style"></div><br />
65
+
66
+ </body>
67
+
68
+ </html>