[1874] Added key to widgets

[TheNoumanDev]

Ticket: #1874

• Used existing testId property in Ensemble widgets.
• Wrap returned widget with KeyedSubtree, using testId as its key.

Example EDL:

Button:
  testId: navigate_button
  label: Navigate to Goodbye Screen
  onTap:
    navigateScreen:
      name: Goodbye

Example Flutter Test code:

final navigateButtonFinder = find.byKey(
          ValueKey('navigate_button'), 
          skipOffstage: false
        );

2025-02-26.04-56-25.mp4

[sharjeelyunus]

@TheNoumanDev can you suggest any framework which we can use to run these automated tests? Maybe we can add them to build system, or directly in the studio. End goal is after defining the test ids, user should have a way to run these tests

Even if not in studio or build system for now, but there should be a yaml way to define the test cases, user shouldn't have to wrote dart code to write the test cases

[TheNoumanDev]

Above PR was for KPN Sports app, they have there our tests defined in dart, they wanted to access to ensemble widgets uisng key, thats why did that to unblock them, but yeah from products perspective, we should provide a proper testing environment in future but that would be a whole new feature being added to Ensemble, below is the basic flow we can start with if we want to:

1. Test Definition Format: Create a comprehensive YAML format for defining tests that aligns with Ensemble's declarative approach:

test_suite:
  name: Login Flow Tests
  tests:
    - name: Successful Login
      setup:
        screen: LoginScreen
      steps:
        - action: enterText
          target: username_input
          value: "[email protected]"
        - action: enterText
          target: password_input
          value: "password123"
        - action: tap
          target: login_button
        - action: waitForNavigation
          timeout: 5 # seconds
        - action: expectVisible
          target: dashboard_welcome_text
          text: "Welcome, testuser!"
        - action: expectProperty
          target: error_message
          visible: false

2. CI/CD Integration: Convert these YAML tests to Dart codeand then process in our CI/CD pipeline (e.g., CodeMagic), run them, and capture results.

3. Test Results: Add a new "Tests" tab in Ensemble Studio where users can:

   • Edit test definitions in YAML (similar to how screens are defined)
   • Trigger test runs manually
   • View test results (pass/fail status and details)

4. Future Enhancements:

   • Add a visual test editor that generates YAML (similar to the screen editor)
   • Provide more detailed test visualization with screenshots and failure details
   • Support for more complex test scenarios and environment configurations

   For now i will be merging this PR if that is fine?.
   CC: @sharjeelyunus