feat: add testcafe

README.md

@@ -23,4 +23,9 @@ Go to: ui_cypress folder
 ## Webdriver.io UI Testing
 ```
 Go to: ui_webdriver folder
+```
+
+## TestCafe UI Testing
+```
+Go to: ui_testcafe folder
 ```

ui_cypress/cypress/pages/checkout.ts

@@ -27,7 +27,7 @@ export function removeItem(itemPosition: string) {
 }
 
 // ASSERTSIONS //
-function validateItemsInCart(storedValues) {
+function validateItemsInCart(storedValues: any) {
   cy.contains(storedValues.title)
     .parents('[class="cart_item"]')
     .within((info) => {

ui_testcafe/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

ui_testcafe/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2020,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "plugin:@typescript-eslint/recommended",
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      "@typescript-eslint/no-unused-vars": ["warn"],
+      "@typescript-eslint/no-explicit-any": ["warn"]
+    }
+}

ui_testcafe/.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# failed tests
+screenshots/
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

ui_testcafe/.prettierrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: "all",
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2
+};

ui_testcafe/.testcaferc.json

@@ -0,0 +1,23 @@
+{
+    "browsers": "chrome",
+    "baseUrl": "https://www.saucedemo.com",
+    "src": ["tests/e2e/step_definitions/*.ts","tests/e2e/*.feature"],
+    "screenshots": {
+        "path": "screenshots/",
+        "takeOnFails": true,
+        "pathPattern": "${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png"
+    },
+    "quarantineMode": false,
+    "stopOnFirstFail": true,
+    "skipJsErrors": true,
+    "skipUncaughtErrors": true,
+    "concurrency": 1,
+    "selectorTimeout": 3000,
+    "assertionTimeout": 1000,
+    "pageLoadTimeout": 1000,
+    "disablePageCaching": true,
+    "disableNativeAutomation": true,
+    "clientScripts": [
+        { "module": "@testing-library/dom/dist/@testing-library/dom.umd.js" }
+      ]
+}

ui_testcafe/README.md

@@ -0,0 +1,49 @@
+## Installation
+```
+Install Node: https://nodejs.org/en/download/
+```
+
+## Project Setup
+In terminal, navigate to project root folder, then type:
+```
+npm install
+```
+
+## Run your end-to-end tests
+```
+npm run test:open
+```
+execute tests via GUI
+```
+npm run test:run
+```
+execute tests (run in background)
+```
+npm run test:test
+```
+execute chosen test against tags via GUI
+
+## Lints and fixes files
+```
+npm run lint
+```
+
+## VS Code Setup for Cucumber assistence
+
+### Cucumber (Gherkin) Full Support
+
+- Create Folder called `.vscode`
+
+- Add file called `settings.json`
+
+- Within `settings.json` add:
+```
+
+{
+  "cucumberautocomplete.steps": ["tests/e2e/step_definitions/*.ts"],
+  "cucumberautocomplete.syncfeatures": "tests/e2e/*.feature",
+  "cucumberautocomplete.strictGherkinCompletion": false,
+  "cucumberautocomplete.smartSnippets": true,
+  "cucumberautocomplete.stepsInvariants": true
+}
+```