Add Cypress onboarding setup with BrowserStack Automate integration

Cypress/README.md

@@ -0,0 +1,165 @@
+# BrowserStack Automate — Cypress Onboarding
+
+Run your Cypress tests on 3,000+ real browsers and devices in the BrowserStack cloud.
+
+---
+
+## Prerequisites
+
+- **Node.js** v14 or later
+- A **BrowserStack account** — [sign up free](https://www.browserstack.com/users/sign_up)
+- Your **BrowserStack credentials** (Username and Access Key) from [Account Settings](https://www.browserstack.com/accounts/settings)
+
+---
+
+## Setup
+
+### 1. Install dependencies
+
+```bash
+cd Cypress
+npm install
+```
+
+### 2. Set your BrowserStack credentials
+
+Export them as environment variables (recommended — keeps secrets out of source control):
+
+**macOS / Linux:**
+```bash
+export BROWSERSTACK_USERNAME="your_username"
+export BROWSERSTACK_ACCESS_KEY="your_access_key"
+```
+
+**Windows (cmd):**
+```cmd
+set BROWSERSTACK_USERNAME=your_username
+set BROWSERSTACK_ACCESS_KEY=your_access_key
+```
+
+**Windows (PowerShell):**
+```powershell
+$env:BROWSERSTACK_USERNAME="your_username"
+$env:BROWSERSTACK_ACCESS_KEY="your_access_key"
+```
+
+> Find your credentials at: https://www.browserstack.com/accounts/settings
+
+---
+
+## Running Tests
+
+### Run on BrowserStack Automate (cloud)
+
+Runs all tests across the platforms defined in `browserstack.json`:
+
+```bash
+npm run test:bstack
+```
+
+### Run locally
+
+Runs tests directly in the local Electron browser (no BrowserStack account needed):
+
+```bash
+npm test
+```
+
+> **Note:** When running locally inside VS Code or any Electron-based environment, prefix the command with `env -u ELECTRON_RUN_AS_NODE` to prevent the host Electron process from interfering with Cypress:
+> ```bash
+> env -u ELECTRON_RUN_AS_NODE npx cypress run
+> ```
+
+---
+
+## Configuration
+
+### `browserstack.json`
+
+Controls which browsers and devices your tests run on in the cloud.
+
+Key settings:
+
+| Setting | Description |
+|---|---|
+| `auth.username` / `auth.access_key` | Your BrowserStack credentials (use env vars — leave blank) |
+| `browsers` | List of browsers/OS to test on |
+| `run_settings.specs` | Glob pattern for test files to run |
+| `run_settings.parallels` | Number of parallel sessions |
+| `run_settings.build_name` | Label for this test run in the BrowserStack dashboard |
+| `run_settings.project_name` | Groups builds under a project |
+| `run_settings.cypress_version` | Cypress version to use on BrowserStack |
+| `connection_settings.local` | Set `true` to test internal/localhost URLs via BrowserStack Local tunnel |
+
+**Supported browsers for Cypress on BrowserStack:**
+
+| Browser | `browser` value |
+|---|---|
+| Chrome | `chrome` |
+| Firefox | `firefox` |
+| Edge | `edge` |
+| WebKit (experimental) | `webkit` |
+
+> ⚠️ WebKit support requires `experimentalWebKitSupport: true` in `cypress.config.js`.
+
+### `cypress.config.js`
+
+Standard Cypress configuration. Key settings:
+
+| Setting | Description |
+|---|---|
+| `baseUrl` | The URL your tests navigate to |
+| `defaultCommandTimeout` | How long Cypress retries commands (ms) |
+| `pageLoadTimeout` | How long to wait for page load events (ms) |
+| `experimentalWebKitSupport` | Enables WebKit browser support |
+
+---
+
+## Project Structure
+
+```
+Cypress/
+├── cypress/
+│   ├── e2e/                          # Test specs
+│   │   └── e2e-login-add-transaction.cy.js
+│   └── support/
+│       └── e2e.js                    # Support file (global config/commands)
+├── browserstack.json                 # BrowserStack platform & build config
+├── cypress.config.js                 # Cypress configuration
+├── package.json                      # Scripts and dependencies
+└── README.md                         # This file
+```
+
+---
+
+## Viewing Results
+
+After a run, open the BrowserStack dashboards:
+
+- **Automate dashboard**: https://automate.browserstack.com
+- **Test Reporting & Analytics**: https://automation.browserstack.com
+
+Each build shows session videos, logs, screenshots, and network traces per platform.
+
+---
+
+## Troubleshooting
+
+| Error | Fix |
+|---|---|
+| `bad option: --no-sandbox` | Run with `env -u ELECTRON_RUN_AS_NODE` prefix (VS Code / Electron environment sets this var) |
+| `BROWSERSTACK_USERNAME is not set` | Set `BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY` env vars |
+| `Your project has set supportFile` | Ensure `cypress/support/e2e.js` exists |
+| Page load timeout on bstackdemo.com | Increase `pageLoadTimeout` in `cypress.config.js` or use `cy.visit('/', { timeout: 120000 })` |
+| Tests time out on internal URLs | Set `"local": true` in `browserstack.json` and start BrowserStack Local |
+| WebKit SSL error | Ensure `experimentalWebKitSupport: true` is set in `cypress.config.js` |
+
+---
+
+## Useful Links
+
+- [BrowserStack Cypress docs](https://www.browserstack.com/docs/automate/cypress)
+- [Supported browsers & devices](https://www.browserstack.com/list-of-browsers-and-platforms/automate)
+- [Cypress WebKit support](https://www.browserstack.com/docs/automate/cypress/browsers-and-os#using-webkit-experimental)
+- [BrowserStack Local (tunnel)](https://www.browserstack.com/local-testing)
+- [Test Observability](https://www.browserstack.com/docs/test-observability)

Cypress/browserstack.json

@@ -0,0 +1,48 @@
+{
+  "auth": {
+    "username": "",
+    "access_key": ""
+  },
+  "browsers": [
+    {
+        "browser": "chrome",
+        "os": "Windows 10",
+        "versions": ["latest"]
+    },
+    {
+        "browser": "firefox",
+        "os": "OS X Tahoe",
+        "versions": ["latest"]
+    },
+    {
+        "browser": "edge",
+        "os": "Windows 11",
+        "versions": ["latest"]
+    },
+    {
+        "browser": "webkit",
+        "os": "OS X Sonoma",
+        "versions": ["latest"]
+    },
+    {
+        "browser": "webkit",
+        "os": "OS X Sequoia",
+        "versions": ["latest"]
+    }
+  ],
+  "run_settings": {
+    "cypress_config_file": "./cypress.config.js",
+    "project_name": "Automate_Onboarding",
+    "build_name": "Onboarding_Build",
+    "build_tag": "e2e",
+    "exclude": [],
+    "specs": "./cypress/e2e/**/*.cy.js",
+    "spec_timeout": 5,
+    "interactiveDebugging": true,
+    "network_logs": true,
+    "parallels": 5
+  },
+  "connection_settings": {
+    "local": true
+  }
+}

Cypress/cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  experimentalWebKitSupport: true,
+  e2e: {
+    baseUrl: 'https://bstackdemo.com',
+    defaultCommandTimeout: 15000,
+    pageLoadTimeout: 60000,
+    setupNodeEvents(on, config) {},
+  },
+})

Cypress/cypress/e2e/e2e-login-add-transaction.cy.js

@@ -0,0 +1,41 @@
+describe('E2E: Add to Cart and Checkout on BStackDemo', () => {
+  it('should add a product to cart and complete checkout', () => {
+    // Step 1: Visit the homepage
+    cy.visit('/', { failOnStatusCode: false, timeout: 120000 })
+    cy.get('h3', { timeout: 30000 }).contains('25 Product(s) found.').should('be.visible')
+
+    // Step 2: Add iPhone 12 to cart (product id="1")
+    cy.get('.shelf-item[id="1"] .shelf-item__buy-btn').click()
+
+    // Step 3: Verify cart opens
+    cy.get('.float-cart--open').should('be.visible')
+
+    // Step 4: Click Checkout button in cart
+    cy.get('.float-cart--open .buy-btn').click()
+
+    // Step 5: Sign in - select username (demouser)
+    cy.get('#react-select-2-input').click({ force: true })
+    cy.get('#react-select-2-option-0-0').click()
+
+    // Step 6: Select password (testingisfun99)
+    cy.get('#react-select-3-input').click({ force: true })
+    cy.get('#react-select-3-option-0-0').click()
+
+    // Step 7: Click LOG IN
+    cy.get('#login-btn').click()
+
+    // Step 8: Fill shipping details
+    cy.get('#firstNameInput').should('be.visible').type('Test')
+    cy.get('#lastNameInput').type('User')
+    cy.get('#addressLine1Input').type('123 Test Street')
+    cy.get('#provinceInput').type('CA')
+    cy.get('#postCodeInput').type('12345')
+
+    // Step 9: Submit shipping form
+    cy.get('#checkout-shipping-continue').click()
+
+    // Step 10: Verify order confirmation page
+    cy.url().should('include', '/confirmation')
+    cy.contains('Continue Shopping').should('be.visible')
+  })
+})

Cypress/cypress/support/e2e.js

@@ -0,0 +1,2 @@
+// Cypress support file
+// Add custom commands or global configuration here

Cypress/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "cypress-e2e",
+  "version": "1.0.0",
+  "description": "Cypress E2E tests for BStackBank",
+  "scripts": {
+    "test": "cypress run",
+    "test:open": "cypress open",
+    "test:bstack": "browserstack-cypress run --sync"
+  },
+  "devDependencies": {
+    "browserstack-cypress-cli": "^1.36.18",
+    "cypress": "^15.8.2"
+  }
+}