diff --git a/Cypress/README.md b/Cypress/README.md new file mode 100644 index 0000000..f68c091 --- /dev/null +++ b/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) diff --git a/Cypress/browserstack.json b/Cypress/browserstack.json new file mode 100644 index 0000000..d0381cd --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/Cypress/cypress.config.js b/Cypress/cypress.config.js new file mode 100644 index 0000000..17b49a0 --- /dev/null +++ b/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) {}, + }, +}) diff --git a/Cypress/cypress/e2e/e2e-login-add-transaction.cy.js b/Cypress/cypress/e2e/e2e-login-add-transaction.cy.js new file mode 100644 index 0000000..a036e61 --- /dev/null +++ b/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') + }) +}) diff --git a/Cypress/cypress/support/e2e.js b/Cypress/cypress/support/e2e.js new file mode 100644 index 0000000..9fff8ed --- /dev/null +++ b/Cypress/cypress/support/e2e.js @@ -0,0 +1,2 @@ +// Cypress support file +// Add custom commands or global configuration here diff --git a/Cypress/package.json b/Cypress/package.json new file mode 100644 index 0000000..bf05fb0 --- /dev/null +++ b/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" + } +}