diff --git a/.github/workflows/run-e2e-tests.yaml b/.github/workflows/run-e2e-tests.yaml index 5d7ad5e26b..05743e60ec 100644 --- a/.github/workflows/run-e2e-tests.yaml +++ b/.github/workflows/run-e2e-tests.yaml @@ -17,6 +17,10 @@ jobs: browser: chrome wait-on: 'http://localhost:3000' config: baseUrl=http://localhost:3000 + command: npm run cypress:percy + env: + # pass the Percy Token + PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} - uses: actions/upload-artifact@v4 if: failure() with: diff --git a/cypress/package-lock.json b/cypress/package-lock.json index e90667df94..462d8a9cb8 100644 --- a/cypress/package-lock.json +++ b/cypress/package-lock.json @@ -11,8 +11,10 @@ "devDependencies": { "@cypress/browserify-preprocessor": "^3.0.0", "@cypress/code-coverage": "^3.9.12", + "@percy/cli": "^1.29.3", + "@percy/cypress": "^3.1.3-beta.0", "cross-env": "^7.0.0", - "cypress": "^13.0.0", + "cypress": "^13.14.2", "cypress-dotenv": "2.0.0", "cypress-grep": "~2.14.0", "cypress-log-to-output": "^1.1.2", @@ -2047,9 +2049,9 @@ } }, "node_modules/@cypress/request": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", - "integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.5.tgz", + "integrity": "sha512-v+XHd9XmWbufxF1/bTaVm2yhbxY+TB4YtWRqF2zaXBlDNMkls34KiATz0AVDLavL3iB6bQk9/7n3oY1EoLSWGA==", "dev": true, "dependencies": { "aws-sign2": "~0.7.0", @@ -2058,14 +2060,14 @@ "combined-stream": "~1.0.6", "extend": "~3.0.2", "forever-agent": "~0.6.1", - "form-data": "~2.3.2", - "http-signature": "~1.3.6", + "form-data": "~4.0.0", + "http-signature": "~1.4.0", "is-typedarray": "~1.0.0", "isstream": "~0.1.2", "json-stringify-safe": "~5.0.1", "mime-types": "~2.1.19", "performance-now": "^2.1.0", - "qs": "6.10.4", + "qs": "6.13.0", "safe-buffer": "^5.1.2", "tough-cookie": "^4.1.3", "tunnel-agent": "^0.6.0", @@ -3076,6 +3078,276 @@ "@octokit/openapi-types": "^12.11.0" } }, + "node_modules/@percy/cli": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.30.0.tgz", + "integrity": "sha512-d5mJQkhYJdL/fOZGuk2sBymYSYCncM+adpOrI3kINVLSXH7CAvYfrnJNLZ5Ib2xQDS85QeCFIb9noivPqXtkPw==", + "dev": true, + "dependencies": { + "@percy/cli-app": "1.30.0", + "@percy/cli-build": "1.30.0", + "@percy/cli-command": "1.30.0", + "@percy/cli-config": "1.30.0", + "@percy/cli-exec": "1.30.0", + "@percy/cli-snapshot": "1.30.0", + "@percy/cli-upload": "1.30.0", + "@percy/client": "1.30.0", + "@percy/logger": "1.30.0" + }, + "bin": { + "percy": "bin/run.cjs" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-app": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.30.0.tgz", + "integrity": "sha512-omBN3mwZVlOv06pIL1sHfN18iQ6fJcyJtWVtPS82idSHBm0xWe4ulcAAXAJAI31opKUIh1dM1LDxFDJBQEA1Tw==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.30.0", + "@percy/cli-exec": "1.30.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-build": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.30.0.tgz", + "integrity": "sha512-VEdKQQCdfdjZHLBjQMXILSeiCEwuKaGvfi9TQqE+4ZPWzOUorjf/Knpnm5+FvvpJYcB3TgNIZ7H/jQE9LokChg==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.30.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-command": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.30.0.tgz", + "integrity": "sha512-5gUZfUaYY4O4UdS4yAKCkVuEQov8ZmBRez2oE9wZti1kCavcRJ3cps31qMiXWyRBzAru+MdDxpoDD40KGK5m5g==", + "dev": true, + "dependencies": { + "@percy/config": "1.30.0", + "@percy/core": "1.30.0", + "@percy/logger": "1.30.0" + }, + "bin": { + "percy-cli-readme": "bin/readme.js" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-config": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.30.0.tgz", + "integrity": "sha512-LUVrQZMjswTS5bifrpbU/vL/fFCx+Pl8FG+rRA5f8tnVBnLxnMpGeOFhKf8mmkg32YJxGhmmXn//pR4aupN4oA==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.30.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-exec": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.30.0.tgz", + "integrity": "sha512-9uSrPY+VhRXmuIiPO0+XoZNJcwrfdZqmCcR8nZdSlLvgoGbm/4/gzMNnlazzgY+NHkMSVpZyE6tTiAePjweuIA==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.30.0", + "@percy/logger": "1.30.0", + "cross-spawn": "^7.0.3", + "which": "^2.0.2" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-snapshot": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.30.0.tgz", + "integrity": "sha512-EdCnZUcq7O5SDymmzzdJSuoAvWa25fZtAn7ji4W7moWDAY3r62Q4S8ZC4NfMbvihbBa1FJTzbgOHbfS3gSgbkQ==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.30.0", + "yaml": "^2.0.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/cli-upload": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.30.0.tgz", + "integrity": "sha512-vtgQU6JbnDUUe/+8teN2E0vfHS/NeRRe0n9Nc/e8MgMXWXhgZEWWPC8jlwwIliCFgkiWl+zWXD6OAbSlyoBtYw==", + "dev": true, + "dependencies": { + "@percy/cli-command": "1.30.0", + "fast-glob": "^3.2.11", + "image-size": "^1.0.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/client": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.30.0.tgz", + "integrity": "sha512-kNAoa07QtlIHvail0+vjd0xfvO4OxI97fV73pefe6PtJ1u3Cze+q4DEFPWxcJ39wjUD4C2f3TgJ2CzhEm53yiw==", + "dev": true, + "dependencies": { + "@percy/env": "1.30.0", + "@percy/logger": "1.30.0", + "pako": "^2.1.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/client/node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==", + "dev": true + }, + "node_modules/@percy/config": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.30.0.tgz", + "integrity": "sha512-mOhLn9fqQTMgXA8Li1UxjZCcLQcokeQtsedlCXdzzt2QbS9DFcV3koMyooabOO6MsCNh4wI7J/zcXu08c4H9Vw==", + "dev": true, + "dependencies": { + "@percy/logger": "1.30.0", + "ajv": "^8.6.2", + "cosmiconfig": "^8.0.0", + "yaml": "^2.0.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/core": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.30.0.tgz", + "integrity": "sha512-MeAhFWCf97xVvx8c6XsSpC+uWRbM0RE5llXmC7U5JH2cYZXoyzul2eZacYUmQJPVzEaWduXLDCukYIa0nDo1+A==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@percy/client": "1.30.0", + "@percy/config": "1.30.0", + "@percy/dom": "1.30.0", + "@percy/logger": "1.30.0", + "@percy/webdriver-utils": "1.30.0", + "content-disposition": "^0.5.4", + "cross-spawn": "^7.0.3", + "extract-zip": "^2.0.1", + "fast-glob": "^3.2.11", + "micromatch": "^4.0.8", + "mime-types": "^2.1.34", + "pako": "^2.1.0", + "path-to-regexp": "^6.3.0", + "rimraf": "^3.0.2", + "ws": "^8.17.1", + "yaml": "^2.4.1" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/core/node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==", + "dev": true + }, + "node_modules/@percy/core/node_modules/ws": { + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", + "dev": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/@percy/cypress": { + "version": "3.1.3-beta.0", + "resolved": "https://registry.npmjs.org/@percy/cypress/-/cypress-3.1.3-beta.0.tgz", + "integrity": "sha512-g+NM11EWEKf/32Ov3b3Qs7j9FLNRyeiHegJ5NPmydd+/sYIryZ8oWNWAOV46hUY0ouMce1rr7Xx8YO5C+F15zA==", + "dev": true, + "dependencies": { + "@percy/sdk-utils": "^1.3.1" + }, + "peerDependencies": { + "cypress": ">=3" + } + }, + "node_modules/@percy/dom": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.30.0.tgz", + "integrity": "sha512-i3uHFDAzXCLAeI0oTDDWIaRq1wiGwoRknS1QfIfy7usAia+ipeWhWb+m3sXtfg/g6WyBzcg3OtG1tIB8TO7/4g==", + "dev": true + }, + "node_modules/@percy/env": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.30.0.tgz", + "integrity": "sha512-+h7c0lxB01bnymTZfM24RrjMIL28rQWeT4aQ/BJVlvAELstZaYwl0vv8RrAtBUKnSZaXUkNIOWZtgFiuer/y0g==", + "dev": true, + "dependencies": { + "@percy/logger": "1.30.0" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/logger": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.30.0.tgz", + "integrity": "sha512-p5ZxD9fFRjCiMF630xIDRv2hPH70TI20r9yIyHgjmCM4ES0Cfu+61gaRpiSaay0DWKfG6iwpmUhZsKafRMSYCw==", + "dev": true, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/sdk-utils": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.30.0.tgz", + "integrity": "sha512-GPEexJ0gxiFXqjFpL8EtILZo/arrwdz96oyZMsCeRu9bVSQ8ZvptFlwO8hYKtXvZcY7CJfGnUyOcza8CYPxM3g==", + "dev": true, + "engines": { + "node": ">=14" + } + }, + "node_modules/@percy/webdriver-utils": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@percy/webdriver-utils/-/webdriver-utils-1.30.0.tgz", + "integrity": "sha512-93S0U1enM9mHR99iEjPSekrZc3/DI+GYYXicvM8nFD9FHlXuMbykHCU0hKJAZF/IvlucVnH04s3yomn/58cXAw==", + "dev": true, + "dependencies": { + "@percy/config": "1.30.0", + "@percy/sdk-utils": "1.30.0" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/@tokenizer/token": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz", @@ -3438,7 +3710,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.16.0.tgz", "integrity": "sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==", "dev": true, - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "json-schema-traverse": "^1.0.0", @@ -3729,9 +4000,9 @@ } }, "node_modules/aws4": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.0.tgz", - "integrity": "sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz", + "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==", "dev": true }, "node_modules/babel-loader": { @@ -4224,6 +4495,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/camelcase": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", @@ -4616,6 +4896,18 @@ "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==", "dev": true }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dev": true, + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -4649,6 +4941,32 @@ "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", "dev": true }, + "node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", @@ -4762,13 +5080,13 @@ "dev": true }, "node_modules/cypress": { - "version": "13.13.0", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.13.0.tgz", - "integrity": "sha512-ou/MQUDq4tcDJI2FsPaod2FZpex4kpIK43JJlcBgWrX8WX7R/05ZxGTuxedOuZBfxjZxja+fbijZGyxiLP6CFA==", + "version": "13.15.0", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.15.0.tgz", + "integrity": "sha512-53aO7PwOfi604qzOkCSzNlWquCynLlKE/rmmpSPcziRH6LNfaDUAklQT6WJIsD8ywxlIy+uVZsnTMCCQVd2kTw==", "dev": true, "hasInstallScript": true, "dependencies": { - "@cypress/request": "^3.0.0", + "@cypress/request": "^3.0.4", "@cypress/xvfb": "^1.2.4", "@types/sinonjs__fake-timers": "8.1.1", "@types/sizzle": "^2.3.2", @@ -5448,6 +5766,15 @@ "node": ">=8.6" } }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, "node_modules/es-define-property": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", @@ -5728,8 +6055,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true, - "peer": true + "dev": true }, "node_modules/fast-glob": { "version": "3.3.2", @@ -5950,17 +6276,17 @@ } }, "node_modules/form-data": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", - "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", "dev": true, "dependencies": { "asynckit": "^0.4.0", - "combined-stream": "^1.0.6", + "combined-stream": "^1.0.8", "mime-types": "^2.1.12" }, "engines": { - "node": ">= 0.12" + "node": ">= 6" } }, "node_modules/franc-min": { @@ -6541,14 +6867,14 @@ "dev": true }, "node_modules/http-signature": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz", - "integrity": "sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz", + "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==", "dev": true, "dependencies": { "assert-plus": "^1.0.0", "jsprim": "^2.0.2", - "sshpk": "^1.14.1" + "sshpk": "^1.18.0" }, "engines": { "node": ">=0.10" @@ -6650,6 +6976,46 @@ "integrity": "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==", "dev": true }, + "node_modules/image-size": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz", + "integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==", + "dev": true, + "dependencies": { + "queue": "6.0.2" + }, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=16.x" + } + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/import-fresh/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/imurmurhash": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", @@ -6740,6 +7106,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -7277,8 +7649,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true, - "peer": true + "dev": true }, "node_modules/json-schema": { "version": "0.4.0", @@ -7290,8 +7661,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dev": true, - "peer": true + "dev": true }, "node_modules/json-stable-stringify": { "version": "0.0.1", @@ -7492,6 +7862,12 @@ "integrity": "sha512-z34TU6GlMram52Tss5mt1m//ifRIpKH5Dqm7yUVOdHI+BQCs9qGPHFaCUTIzsWX7edN30aa2WrPwR7IO10FHaw==", "dev": true }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true + }, "node_modules/listr2": { "version": "3.14.0", "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz", @@ -7955,9 +8331,9 @@ } }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { "braces": "^3.0.3", @@ -9299,6 +9675,18 @@ "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", "dev": true }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/parents": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parents/-/parents-1.0.1.tgz", @@ -9391,6 +9779,24 @@ "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==", "dev": true }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/parse-link-header": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/parse-link-header/-/parse-link-header-2.0.0.tgz", @@ -9457,6 +9863,12 @@ "node": ">= 0.8.0" } }, + "node_modules/path-to-regexp": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz", + "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==", + "dev": true + }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -9813,12 +10225,12 @@ "dev": true }, "node_modules/qs": { - "version": "6.10.4", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz", - "integrity": "sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dev": true, "dependencies": { - "side-channel": "^1.0.4" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -9860,6 +10272,15 @@ "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", "dev": true }, + "node_modules/queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "dev": true, + "dependencies": { + "inherits": "~2.0.3" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -11360,7 +11781,6 @@ "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", "dev": true, - "peer": true, "dependencies": { "punycode": "^2.1.0" } @@ -11370,7 +11790,6 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", "dev": true, - "peer": true, "engines": { "node": ">=6" } @@ -11395,21 +11814,6 @@ "requires-port": "^1.0.0" } }, - "node_modules/url/node_modules/qs": { - "version": "6.12.3", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.3.tgz", - "integrity": "sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==", - "dev": true, - "dependencies": { - "side-channel": "^1.0.6" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/utif2": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/utif2/-/utif2-4.1.0.tgz", @@ -12135,6 +12539,18 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, + "node_modules/yaml": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz", + "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==", + "dev": true, + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14" + } + }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/cypress/package.json b/cypress/package.json index d4c3248d38..ba3da87bd1 100644 --- a/cypress/package.json +++ b/cypress/package.json @@ -4,15 +4,18 @@ "description": "Boilerplate E2E tests", "scripts": { "cypress:open": "cypress open --browser chrome --config-file cypress.config.js", - "cypress:run": "cypress run --config-file cypress.config.js" + "cypress:run": "cypress run --config-file cypress.config.js", + "cypress:percy": "percy exec -- cypress run --config-file cypress.config.js" }, "author": "Adobe Commerce", "license": "Apache License 2.0", "devDependencies": { "@cypress/browserify-preprocessor": "^3.0.0", "@cypress/code-coverage": "^3.9.12", + "@percy/cli": "^1.29.3", + "@percy/cypress": "^3.1.3-beta.0", "cross-env": "^7.0.0", - "cypress": "^13.0.0", + "cypress": "^13.14.2", "cypress-dotenv": "2.0.0", "cypress-grep": "~2.14.0", "cypress-log-to-output": "^1.1.2", diff --git a/cypress/src/actions/index.js b/cypress/src/actions/index.js index c60abf5bea..33f688d866 100644 --- a/cypress/src/actions/index.js +++ b/cypress/src/actions/index.js @@ -1,50 +1,45 @@ import * as fields from '../fields/index'; +import { + assertSearchIconVisible, +} from '../assertions'; export const setGuestEmail = (customerEmail) => { cy.get(fields.shippingFormGuestEmail).clear().type(customerEmail); }; export const setGuestShippingAddress = (customerAddress, isSelectableState) => { - cy.get(fields.shippingFormFirstName).clear().type(customerAddress.firstName); - cy.get(fields.shippingFormLastName).clear().type(customerAddress.lastName); - cy.get(fields.shippingFormStreet).clear().type(customerAddress.street); - cy.get(fields.shippingFormStreet1).clear().type(customerAddress.street1); + cy.get(fields.shippingFormFirstName).should('be.visible'); + cy.get(fields.shippingFormFirstName).focus().clear().type(customerAddress.firstName); + cy.get(fields.shippingFormLastName).focus().clear().type(customerAddress.lastName); + cy.get(fields.shippingFormStreet).focus().clear().type(customerAddress.street); + cy.get(fields.shippingFormStreet1).focus().clear().type(customerAddress.street1); if (isSelectableState) { cy.get(fields.shippingFormState).select(customerAddress.region); } else { cy.get(fields.shippingFormInputState).type(customerAddress.region); } - cy.get(fields.shippingFormCity).clear().type(customerAddress.city); - cy.get(fields.shippingFormPostCode).clear().type(customerAddress.postCode); - cy.get(fields.shippingFormTelephone).clear().type(customerAddress.telephone); + cy.get(fields.shippingFormCity).focus().clear().type(customerAddress.city); + cy.get(fields.shippingFormPostCode).focus().clear().type(customerAddress.postCode); + cy.get(fields.shippingFormTelephone).focus().clear().type(customerAddress.telephone); }; export const setGuestBillingAddress = (customerAddress, isSelectableState) => { - cy.wait(1000); - cy.get(fields.billingFormFirstName).should("not.be.disabled").clear().type(customerAddress.firstName, { force: true }); - cy.wait(1000); - cy.get(fields.billingFormLastName).should("not.be.disabled").clear().type(customerAddress.lastName, { force: true }); - cy.wait(1000); - cy.get(fields.billingFormStreet).should("not.be.disabled").clear().type(customerAddress.street, { force: true }); - cy.wait(1000); - cy.get(fields.billingFormStreet1).should("not.be.disabled").clear().type(customerAddress.street1, { force: true }); + cy.get(fields.billingFormFirstName).focus().should("not.be.disabled").clear().type(customerAddress.firstName, { force: true }); + cy.get(fields.billingFormLastName).focus().should("not.be.disabled").clear().type(customerAddress.lastName, { force: true }); + cy.get(fields.billingFormStreet).focus().should("not.be.disabled").clear().type(customerAddress.street, { force: true }); + cy.get(fields.billingFormStreet1).focus().should("not.be.disabled").clear().type(customerAddress.street1, { force: true }); if (isSelectableState) { - cy.wait(1000); - cy.get(fields.billingFormState).should("not.be.disabled").select(customerAddress.region, { force: true }); + cy.get(fields.billingFormState).focus().should("not.be.disabled").select(customerAddress.region, { force: true }); } else { - cy.wait(1000); - cy.get(fields.billingFormInputState).should("not.be.disabled").type(customerAddress.region, { force: true }); + cy.get(fields.billingFormInputState).focus().should("not.be.disabled").type(customerAddress.region, { force: true }); } - cy.wait(1000); - cy.get(fields.billingFormCity).should("not.be.disabled").clear().type(customerAddress.city, { force: true }); - cy.wait(1000); - cy.get(fields.billingFormPostCode).should("not.be.disabled").clear().type(customerAddress.postCode, { force: true }); - cy.wait(1000); - cy.get(fields.billingFormTelephone).should("not.be.disabled").clear().type(customerAddress.telephone, { force: true }); + cy.get(fields.billingFormCity).focus().should("not.be.disabled").clear().type(customerAddress.city, { force: true }); + cy.get(fields.billingFormPostCode).focus().should("not.be.disabled").clear().type(customerAddress.postCode, { force: true }); + cy.get(fields.billingFormTelephone).focus().should("not.be.disabled").clear().type(customerAddress.telephone, { force: true }); }; export const uncheckBillToShippingAddress = () => { - cy.get(fields.billToShippingAddress).uncheck({ force: true }); + cy.get(fields.billToShippingAddress).focus().should("not.be.disabled").uncheck({ force: true }); }; export const placeOrder = () => { @@ -64,7 +59,7 @@ export const signUpUser = (sign_up, isValid = true) => { cy.get(fields.authFormUserCompany).clear().type(sign_up.company); } if (sign_up.email) { - cy.get(fields.authFormUserEmail).eq(1).clear({force: true}).type(username); + cy.get(fields.authFormUserEmail).eq(1).clear({ force: true }).type(username); } cy.get(fields.authFormUserFirstName).clear().type(sign_up.firstName); cy.get(fields.authFormUserLastName).clear().type(sign_up.lastName); @@ -76,5 +71,13 @@ export const signUpUser = (sign_up, isValid = true) => { cy.get(fields.authFormUserPassword).eq(1).clear().type(sign_up.shortPassword); } cy.get('.dropin-picker__select').select('Male'); + assertSearchIconVisible(); + closeHamburgerMenu(); + cy.percyTakeSnapshot('Auth Create Account', 1280) createAccount(); }; + + +export const closeHamburgerMenu = () => { + cy.get('[aria-label="Close navigation"]').click({ force: true }); +}; diff --git a/cypress/src/assertions/index.js b/cypress/src/assertions/index.js index afaa3c73d8..2a876c1ead 100644 --- a/cypress/src/assertions/index.js +++ b/cypress/src/assertions/index.js @@ -6,28 +6,26 @@ export const assertCartSummaryProduct = productPrice, totalPrice, productPosition - ) => - (elem = '.commerce-cart-wrapper') => { - cy.get(`${elem} .dropin-cart-item__title`) - .eq(productPosition) - .should('contain', productName); - cy.get(`${elem} .dropin-cart-item__sku`) + ) => (elem = '.commerce-cart-wrapper') => { + cy.get(`${elem} .dropin-cart-item__title`) + .eq(productPosition) + .should('contain', productName); + cy.get(`${elem} .dropin-cart-item__sku`) + .eq(productPosition) + .should('contain', productSku); + if (elem === '.commerce-cart-wrapper') { + cy.get(`${elem} .dropin-incrementer__input`) .eq(productPosition) - .should('contain', productSku); - - if (elem === '.commerce-cart-wrapper') { - cy.get(`${elem} .dropin-incrementer__input`) - .eq(productPosition) - .should('have.value', productQty); - } + .should('have.value', productQty); + } - cy.get(`${elem} .dropin-cart-item__price`) - .eq(productPosition) - .should('contain', productPrice); - cy.get(`${elem} .dropin-cart-item__total`) - .eq(productPosition) - .should('contain', totalPrice); - }; + cy.get(`${elem} .dropin-cart-item__price`) + .eq(productPosition) + .should('contain', productPrice); + cy.get(`${elem} .dropin-cart-item__total`) + .eq(productPosition) + .should('contain', totalPrice); + }; export const assertCartSummaryProductsOnCheckout = ( @@ -85,7 +83,7 @@ export const assertOrderSummaryMisc = (subtotal, shipping, total) => { export const assertTitleHasLink = (productName, productHref) => (elem = '.cart-cart') => { - cy.get(`${elem} .dropin-cart-item`) + cy.get(`${elem} .dropin-cart-item__title`) .contains(productName) .should('have.attr', 'href', productHref); }; @@ -170,5 +168,10 @@ export const assertAuthUser = (sign_up) => { // cy.contains(sign_up.email).should("be.visible"); }; +export const assertSearchIconVisible = () => { + cy.get('.nav-search-button').should('be.visible'); +}; + // imports and re-exports the functions from ./adobeDataLayer.js export * from './adobeDataLayer'; + diff --git a/cypress/src/support/index.js b/cypress/src/support/index.js index e60ceea637..3d3f3ec963 100644 --- a/cypress/src/support/index.js +++ b/cypress/src/support/index.js @@ -2,3 +2,5 @@ import './deleteCustomer'; import './getUserTokenCookie'; import './waitForResource'; import './sessionStorage'; +import '@percy/cypress'; +import './percyTakeSnapshot' \ No newline at end of file diff --git a/cypress/src/support/percyTakeSnapshot.js b/cypress/src/support/percyTakeSnapshot.js new file mode 100644 index 0000000000..39dd24388c --- /dev/null +++ b/cypress/src/support/percyTakeSnapshot.js @@ -0,0 +1,7 @@ +const percyTakeSnapshot = ( nameOfSnapshot, screenWidth) => { + cy + .viewport(1280, 1024) + .percySnapshot(nameOfSnapshot, { width: screenWidth }); +}; + +Cypress.Commands.add('percyTakeSnapshot', percyTakeSnapshot); \ No newline at end of file diff --git a/cypress/src/tests/e2eTests/verifyAuthUserCheckout.spec.js b/cypress/src/tests/e2eTests/verifyAuthUserCheckout.spec.js index 9f50ed6e7f..f39a7d7636 100644 --- a/cypress/src/tests/e2eTests/verifyAuthUserCheckout.spec.js +++ b/cypress/src/tests/e2eTests/verifyAuthUserCheckout.spec.js @@ -31,13 +31,14 @@ describe('Verify auth user can place order', () => { it('Verify auth user can place order', () => { // TODO: replace with single "test" product shared between all tests (not this vs products.configurable.urlPathWithOptions). cy.visit('/products/hollister-backyard-sweatshirt/MH05'); - cy.get('[id="Y29uZmlndXJhYmxlLzI3Ny8yMDI="]').click({ + cy.get('[aria-label="Color: White swatch"]').click({ force: true, - }); - cy.get('[id="Y29uZmlndXJhYmxlLzU1Ni81MjM="]').click({ + }); + cy.get('[aria-label="Size: XS swatch"]').click({ force: true, - }); - cy.wait(5000); + }); + cy.get('[aria-label="Color: White swatch selected"]').should('exist'); + cy.get('[aria-label="Size: XS swatch selected"]').should('exist'); cy.contains('Add to Cart').click(); cy.get('.minicart-wrapper').click(); assertCartSummaryProduct( @@ -71,7 +72,6 @@ describe('Verify auth user can place order', () => { cy.fixture('userInfo').then(({ sign_up }) => { signUpUser(sign_up); assertAuthUser(sign_up); - cy.wait(5000); }); cy.get('.minicart-wrapper').click(); assertCartSummaryProduct( @@ -166,9 +166,8 @@ describe('Verify auth user can place order', () => { '$52.00', '1' ); - setGuestShippingAddress(customerShippingAddress, true); uncheckBillToShippingAddress(); - cy.wait(2000); + setGuestShippingAddress(customerShippingAddress, true); setGuestBillingAddress(customerBillingAddress, true); assertOrderSummaryMisc('$90.00', '$10.00', '$86.50'); assertSelectedPaymentMethod('checkmo', 0); diff --git a/cypress/src/tests/e2eTests/verifyGuestUserCheckout.spec.js b/cypress/src/tests/e2eTests/verifyGuestUserCheckout.spec.js index f0bdaf52e1..9360d561e1 100644 --- a/cypress/src/tests/e2eTests/verifyGuestUserCheckout.spec.js +++ b/cypress/src/tests/e2eTests/verifyGuestUserCheckout.spec.js @@ -2,6 +2,7 @@ import { setGuestEmail, setGuestShippingAddress, placeOrder, + closeHamburgerMenu, } from '../../actions'; import { assertCartSummaryProduct, @@ -14,6 +15,7 @@ import { assertOrderConfirmationShippingDetails, assertOrderConfirmationBillingDetails, assertOrderConfirmationShippingMethod, + assertSearchIconVisible, } from '../../assertions'; import { @@ -22,6 +24,9 @@ import { import { customerShippingAddress, } from '../../fixtures/index'; +import { + estimatedShippingCountrySelector, + } from '../../fields'; describe('Verify guest user can place order', () => { it('Verify guest user can place order', () => { @@ -29,7 +34,10 @@ describe('Verify guest user can place order', () => { cy.get('.nav-drop') .contains('Catalog') .click(); - cy.wait(1000); + cy.contains('Crown Summit Backpack') + .should('be.visible') + .should("have.attr", "href", "/products/crown-summit-backpack/24-MB03") + .should("have.text", "Crown Summit Backpack"); cy.contains('Crown Summit Backpack').click(); cy.get('.dropin-incrementer__increase-button').click(); cy.get('.dropin-incrementer__input').should('have.value', '2'); @@ -50,7 +58,7 @@ describe('Verify guest user can place order', () => { '/products/crown-summit-backpack/24-MB03' )('.cart-mini-cart'); assertProductImage('/mb03-black-0.jpg')('.cart-mini-cart'); - cy.contains('View Cart').click(); + cy.contains('View Cart').click({ force: true }); assertCartSummaryProduct( 'Crown Summit Backpack', '24-MB03', @@ -65,9 +73,15 @@ describe('Verify guest user can place order', () => { )('.commerce-cart-wrapper'); assertProductImage('/mb03-black-0.jpg')('.commerce-cart-wrapper'); cy.contains('Estimated Shipping').should('be.visible'); + cy.get('.cart-order-summary--loading').should('not.exist'); + cy.get('.dropin-picker__placeholder').should('not.be.visible'); + cy.get(estimatedShippingCountrySelector).should('have.value', 'US'); + assertSearchIconVisible(); + closeHamburgerMenu(); + cy.percyTakeSnapshot('Cart page', 1280); cy.get('.dropin-button--primary') .contains('Checkout') - .click(); + .click({ force: true }); assertCartSummaryMisc(2); assertCartSummaryProductsOnCheckout( 'Crown Summit Backpack', @@ -77,7 +91,11 @@ describe('Verify guest user can place order', () => { '$76.00', '0' ); - cy.contains('Estimated Shipping').should('be.visible') + cy.contains('Estimated Shipping').should('be.visible'); + assertSearchIconVisible(); + cy.get('.cart-order-summary--loading').should('not.exist'); + closeHamburgerMenu(); + cy.percyTakeSnapshot('Checkout Page', 1280); const apiMethod = 'setGuestEmailOnCart'; const urlTest = Cypress.env('graphqlEndPoint'); cy.intercept('POST', urlTest, (req) => { @@ -99,6 +117,9 @@ describe('Verify guest user can place order', () => { assertOrderConfirmationShippingDetails(customerShippingAddress); assertOrderConfirmationBillingDetails(customerShippingAddress); assertOrderConfirmationShippingMethod(customerShippingAddress); + assertSearchIconVisible(); + cy.get('[aria-label="Open navigation"]').should('exist'); + cy.percyTakeSnapshot('Order Confirmation', 1280); /** * TODO - when /order-details page will be ready * Redirect to /order-details?orderRef={ORDER_TOKEN} diff --git a/cypress/src/tests/e2eTests/verifyLowStockInfoMessage.spec.js b/cypress/src/tests/e2eTests/verifyLowStockInfoMessage.spec.js index eb77b427e7..69db2b0abe 100644 --- a/cypress/src/tests/e2eTests/verifyLowStockInfoMessage.spec.js +++ b/cypress/src/tests/e2eTests/verifyLowStockInfoMessage.spec.js @@ -1,3 +1,9 @@ +import { + closeHamburgerMenu, +} from '../../actions'; +import { + assertSearchIconVisible, +} from '../../assertions'; describe('Verify stock notification message', () => { it('Verify low stock and max qty allowed notification message', () => { cy.visit('/products/compete-track-tote/24-WB02'); @@ -18,5 +24,8 @@ describe('Verify stock notification message', () => { cy.wait(1000); cy.contains('Add to Cart').click(); cy.contains('The requested qty exceeds the maximum qty allowed in shopping cart').should('be.visible'); + assertSearchIconVisible(); + closeHamburgerMenu(); + cy.percyTakeSnapshot('PDP page with Low Stock Notifiction', 1280); }); }); \ No newline at end of file