Slot testing in Cypress - Framework Patterns

Framework Mode - Slot testing

Folder Structure for Slot Testing with Cypress

  cypress/
  ├── e2e/
  │   ├── slots/
  │   │   ├── slotBasic.spec.js       # Basic slot functionality tests
  │   │   ├── slotPayout.spec.js      # Tests for payout calculations
  │   │   └── slotBonus.spec.js       # Bonus feature tests
  │   └── support/
  │       ├── commands.js             # Custom Cypress commands
  │       └── hooks.js                # Global hooks for tests
  ├── fixtures/
  │   └── slotData.json               # Test data for slot scenarios
  ├── support/
  │   ├── pageObjects/
  │   │   └── slotPage.js             # Page Object for slot game UI
  │   └── utils/
  │       └── slotHelpers.js          # Helper functions for slot tests
  └── cypress.config.js                # Cypress configuration file
  

Test Framework Layers for Slot Testing

• Test Layer (e2e/slots/*.spec.js): Contains test scripts that simulate user actions on slot games and verify outcomes.
• Page Object Layer (support/pageObjects/slotPage.js): Encapsulates selectors and UI interactions for the slot game interface.
• Utility Layer (support/utils/slotHelpers.js): Contains reusable helper functions like spin simulation, payout calculations, or random seed generators.
• Fixtures (fixtures/slotData.json): Holds test data such as slot symbols, payout tables, and bonus triggers.
• Support Layer (support/commands.js, hooks.js): Custom Cypress commands and global hooks to setup or teardown tests.
• Configuration (cypress.config.js): Defines environment variables, base URLs, browser settings, and test retries.

Configuration Patterns for Slot Testing

• Environment Variables: Use cypress.env.json or cypress.config.js to set different URLs for dev, staging, and production slot servers.
• Browser Settings: Configure supported browsers (Chrome, Firefox) and headless mode for CI runs in cypress.config.js.
• Credentials Management: Store sensitive data like user tokens or API keys in environment variables, never in source code.
• Test Data: Use fixture files to separate test data from test logic, enabling easy updates and data-driven testing.
• Retries and Timeouts: Configure retries for flaky slot animations and set appropriate command timeouts to handle UI delays.

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in Mochawesome reporter or integrate with third-party tools to generate HTML and JSON reports.
• Video and Screenshot Capture: Enable automatic video recording and screenshots on test failures for debugging slot UI issues.
• CI/CD Integration: Integrate Cypress tests into pipelines (GitHub Actions, Jenkins, GitLab CI) to run slot tests on every code push or pull request.
• Notifications: Configure email or Slack notifications to alert the team about test results and failures.

Best Practices for Slot Testing Framework

• Use Page Object Model: Keep selectors and UI actions in page objects to make tests easier to maintain and read.
• Isolate Tests: Each test should be independent and reset the slot game state to avoid flaky results.
• Data-Driven Testing: Use fixtures to run the same test with different slot symbols and payout scenarios.
• Explicit Waits: Use Cypress commands like cy.wait() or cy.get().should() to handle animations and asynchronous UI updates reliably.
• Custom Commands: Create reusable commands for common slot actions like spinning or checking balance to reduce code duplication.

Self Check Question

Where would you add a new page object file for a "Bonus Round" feature in this Cypress slot testing framework?

Key Result

Organize Cypress slot tests with clear folder layers: e2e tests, page objects, utilities, fixtures, and config for maintainability and scalability.

Practice

1. What is the main purpose of slot testing in Cypress?

easy

A. To check network requests made by the application

B. To validate CSS styles of static elements

C. To test database connections

D. To verify dynamic content inside component slots renders correctly

Solution

1. Step 1: Understand slot testing concept

   Slot testing focuses on dynamic content areas called slots inside components.

2. Step 2: Identify Cypress role in slot testing

   Cypress commands are used to find slots and verify their content correctness.

3. Final Answer:

   To verify dynamic content inside component slots renders correctly -> Option D

4. Quick Check:

   Slot testing = Verify dynamic slot content [OK]

Hint: Slots hold dynamic content; test their presence and correctness [OK]

Common Mistakes:

• Confusing slot testing with network or database testing
• Ignoring fallback content in slots
• Testing only static elements instead of slots

2. Which Cypress command correctly selects a named slot with the name 'header'?

easy

A. cy.get('#header')

B. cy.get('slot[name="header"]')

C. cy.get('div.header')

D. cy.get('slot#header')

Solution

1. Step 1: Understand slot selector syntax

   Named slots use the slot tag with a name attribute, so selector is slot[name="header"].

2. Step 2: Match Cypress command to selector

   Only cy.get('slot[name="header"]') correctly targets the named slot.

3. Final Answer:

   cy.get('slot[name="header"]') -> Option B

4. Quick Check:

   Named slot selector = slot[name="..."] [OK]

Hint: Use attribute selector for named slots: slot[name="..."] [OK]

Common Mistakes:

• Using class or id selectors instead of slot attribute
• Confusing slot tag with div or other elements
• Missing quotes around attribute value

3. Given this Cypress test snippet:

cy.get('slot[name="footer"]').should('contain.text', 'Contact us')

What will happen if the slot named 'footer' contains the text 'Contact us today'?

medium

A. Test passes because 'Contact us' is part of the slot text

B. Test fails because exact text does not match

C. Test throws a syntax error

D. Test passes only if the slot is visible

Solution

1. Step 1: Understand the assertion used

   The assertion should('contain.text', 'Contact us') checks if the slot text includes the substring 'Contact us'.

2. Step 2: Analyze the slot content

   The slot text is 'Contact us today', which contains 'Contact us' as a substring.

3. Final Answer:

   Test passes because 'Contact us' is part of the slot text -> Option A

4. Quick Check:

   contain.text checks substring presence [OK]

Hint: contain.text checks substring, not exact match [OK]

Common Mistakes:

• Assuming contain.text requires exact match
• Confusing contain.text with equals assertion
• Ignoring slot visibility requirement

4. You wrote this Cypress test:

cy.get('slot[name="main"]').should('have.text', 'Welcome')

But the test fails even though the slot shows 'Welcome to our site'. What is the likely problem?

medium

A. Cypress cannot test slot content

B. The slot selector is incorrect

C. Using 'have.text' requires exact text match, so it fails

D. The slot is not visible on the page

Solution

1. Step 1: Understand 'have.text' assertion

   'have.text' checks for exact text equality, not substring.

2. Step 2: Compare expected and actual slot text

   Expected 'Welcome' does not exactly match 'Welcome to our site', so assertion fails.

3. Final Answer:

   Using 'have.text' requires exact text match, so it fails -> Option C

4. Quick Check:

   have.text = exact match, contain.text = substring [OK]

Hint: Use contain.text for partial matches, have.text for exact [OK]

Common Mistakes:

• Confusing have.text with contain.text
• Assuming slot selector is wrong without checking
• Ignoring visibility but test fails due to text mismatch

5. You want to test a component with a default slot and a named slot 'sidebar'. The default slot shows fallback text 'No content'. Which Cypress test correctly verifies fallback and named slot content?

hard

A. cy.get('slot:not([name])').should('contain.text', 'No content'); cy.get('slot[name="sidebar"]').should('contain.text', 'Menu')

B. cy.get('slot[name="default"]').should('contain.text', 'No content'); cy.get('slot#sidebar').should('contain.text', 'Menu')

C. cy.get('slot').should('contain.text', 'No content'); cy.get('slot[name="sidebar"]').should('contain.text', 'Menu')

D. cy.get('slot.default').should('contain.text', 'No content'); cy.get('slot.sidebar').should('contain.text', 'Menu')

Solution

1. Step 1: Select default slot correctly

   The default slot has no name attribute, so selector is slot:not([name]).

2. Step 2: Select named slot 'sidebar'

   Named slot selector is slot[name="sidebar"].

3. Step 3: Verify fallback and named slot content

   Use contain.text to check fallback 'No content' and sidebar 'Menu'.

4. Final Answer:

   cy.get('slot:not([name])').should('contain.text', 'No content'); cy.get('slot[name="sidebar"]').should('contain.text', 'Menu') -> Option A

5. Quick Check:

   Default slot = slot:not([name]), named slot = slot[name="..."] [OK]

Hint: Default slot has no name attribute; use :not([name]) selector [OK]

Common Mistakes:

• Using slot[name="default"] which does not exist
• Using class or id selectors on slot elements
• Not distinguishing default slot from named slots