Add comprehensive E2E testing setup with Cypress and Selenium WebDriver #5
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Install and configure Cypress for e2e testing - Install and configure Selenium WebDriver for e2e testing - Create custom Cypress commands for data-testid selection - Create WebDriver helper functions and TestIdHelpers class - Add comprehensive test examples for both frameworks - Verify data-testid prop support across all components - Add npm scripts for running e2e tests - Create comprehensive documentation and testing guide Verified that data-testid prop is properly managed through: - Element component HTMLAttributes inheritance - Proper prop forwarding in all components - Existing unit tests demonstrate correct usage All unit tests pass (View: 17 passed, Text: 7 passed, Image: 10 passed) WebDriver test examples execute successfully https://claude.ai/code/session_01UyfhHoLpBYXMEc5zqeFh9w
size-limit report 📦
|
…ration - Add 26 comprehensive tests for Form, Input, and Button components - All form components fully support data-testid prop - Add Cypress e2e tests for form components (form-components.cy.ts) - Add WebDriver e2e tests with FormTestHelpers class - Update Skeleton tests to include data-testid verification GitHub Actions CI/CD improvements: - Fix npm install issue by replacing bahmutov/npm-install with standard npm install - Update Node versions from 14.x to 18.x and 20.x - Add npm dependency caching with actions/setup-node@v3 - Integrate e2e WebDriver tests into CI pipeline - Update all commands to use npm instead of yarn Test Results: - All 65 unit tests passing - Form tests: 6 passed - Input tests: 9 passed - Button tests: 9 passed - Form integration tests: 2 passed - Skeleton tests: 8 passed (including new data-testid tests) - All e2e WebDriver tests executing successfully Updated E2E_TESTING_REPORT.md with: - Form components test documentation - FormTestHelpers class documentation - GitHub Actions CI/CD integration details - Complete test coverage summary https://claude.ai/code/session_01UyfhHoLpBYXMEc5zqeFh9w
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds complete end-to-end (E2E) testing infrastructure for the app-studio framework, including Cypress and Selenium WebDriver configurations, custom testing helpers, and comprehensive documentation verifying that the
data-testidprop is fully supported across all components.Key Changes
E2E Testing Report (
E2E_TESTING_REPORT.md): Comprehensive 358-line verification report documenting:data-testidprop is properly supported across all app-studio componentsdata-testidusageCypress Configuration:
cypress.config.ts: Full Cypress configuration with Storybook as base URLcypress/support/e2e.tsandcypress/support/component.ts: Support filescypress/support/commands.ts: Custom commands fordata-testidselection:cy.getByTestId(selector): Find elements by data-testidcy.findByTestId(selector): Find within parent elementscypress/e2e/data-testid.cy.ts: Basic E2E tests demonstrating data-testid usagecypress/e2e/component-integration.cy.ts: Integration tests for complex scenariosSelenium WebDriver Setup:
e2e-tests/webdriver/data-testid.test.ts: Helper functions for data-testid selectionfindByTestId(): Find single element by data-testidwaitForTestId(): Wait for element to appeare2e-tests/webdriver/component-tests.test.ts: ComprehensiveTestIdHelpersclass with methods:getByTestId(),getAllByTestId(),hasTestId()findByTestId()for nested elementsgetTextByTestId(),clickByTestId(),typeByTestId()Documentation:
e2e-tests/README.md: Complete guide covering:NPM Scripts (in package.json):
test:e2e:cypress: Run Cypress tests in headless modetest:e2e:cypress:open: Open Cypress interactive modetest:e2e:webdriver: Run WebDriver teststest:e2e: Alias for WebDriver testsImplementation Details
data-testid Support: Verified that all app-studio components support
data-testidthrough:HTMLAttributes<HTMLElement>{...props})Testing Framework Flexibility: Provides both Cypress (modern, UI-focused) and Selenium WebDriver (cross-browser, enterprise) options
Helper Abstractions: Custom commands and helper classes reduce boilerplate and provide consistent APIs for test authors
Zero Breaking Changes: All changes are additive; no modifications to existing component APIs or behavior
Testing
https://claude.ai/code/session_01UyfhHoLpBYXMEc5zqeFh9w