> ## Documentation Index
> Fetch the complete documentation index at: https://parttio-dramafinder-4.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Drama Finder Documentation

> Type-safe Playwright wrappers for testing Vaadin applications with accessibility-first APIs

<div className="relative overflow-hidden bg-gradient-to-br from-[#0089C7] via-[#00B4F0] to-[#00E0FF] dark:from-[#0d1117] dark:via-[#0d1824] dark:to-[#0d1117] py-20">
  <div className="max-w-7xl mx-auto px-6 lg:px-8">
    <div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6">
          Drama Finder
        </h1>

        <p className="text-lg sm:text-xl text-white/90 dark:text-gray-200 max-w-2xl mb-8">
          Type-safe Playwright element wrappers for testing Vaadin applications. Find elements using accessibility-first patterns and test with confidence.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-white dark:bg-white text-[#00B4F0] dark:text-[#00B4F0] font-semibold hover:bg-gray-100 dark:hover:bg-gray-100 transition-colors">
            Get Started
          </a>

          <a href="/api/vaadin-element" className="inline-flex items-center px-6 py-3 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white font-semibold hover:bg-white/20 transition-colors">
            API Reference
          </a>
        </div>
      </div>

      <div className="hidden lg:block lg:col-span-5">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-[#00B4F0]/20 to-[#00E0FF]/20 blur-3xl" />

          <pre className="relative bg-[#1a1d27] dark:bg-[#0d1117] border border-[#27272a] rounded-xl p-6 text-sm overflow-x-auto">
            <code className="text-gray-300">
              {`@Test
                            public void testTextField() {
                            TextFieldElement field = 
                              TextFieldElement.getByLabel(
                                page, "Username"
                              );

                            field.setValue("john.doe");
                            field.assertValue("john.doe");
                            field.assertEnabled();
                            }`}
            </code>
          </pre>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Quick Start
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Get up and running with Drama Finder in minutes
  </p>

  <Steps>
    <Step title="Add the dependency">
      Add Drama Finder to your Maven project's test dependencies:

      ```xml pom.xml theme={null}
      <dependency>
        <groupId>org.vaadin.addons</groupId>
        <artifactId>dramafinder</artifactId>
        <version>1.1.0</version>
        <scope>test</scope>
      </dependency>
      ```
    </Step>

    <Step title="Create a test class">
      Extend `AbstractBasePlaywrightIT` to get automatic Playwright setup:

      ```java SimpleViewIT.java theme={null}
      @SpringBootTest(webEnvironment = WebEnvironment.RANDOM_PORT)
      public class SimpleViewIT extends AbstractBasePlaywrightIT {
        
        @LocalServerPort
        private int port;
        
        @Override
        public String getUrl() {
          return String.format("http://localhost:%d/", port);
        }
      }
      ```
    </Step>

    <Step title="Write your first test">
      Use element wrappers to interact with Vaadin components:

      ```java theme={null}
      @Test
      public void testLogin() {
        TextFieldElement username = TextFieldElement.getByLabel(page, "Username");
        PasswordFieldElement password = PasswordFieldElement.getByLabel(page, "Password");
        ButtonElement submit = ButtonElement.getByText(page, "Login");
        
        username.setValue("admin");
        password.setValue("secret");
        submit.click();
        
        // Assert navigation to dashboard
        assertThat(page).hasURL(Pattern.compile(".*/dashboard"));
      }
      ```
    </Step>

    <Step title="Run your tests">
      Execute integration tests with Maven:

      ```bash theme={null}
      mvn verify
      ```

      <Accordion title="Example test output">
        ```
        [INFO] Running SimpleViewIT
        [INFO] Tests run: 1, Failures: 0, Errors: 0, Skipped: 0
        [INFO] 
        [INFO] Results:
        [INFO] 
        [INFO] Tests run: 1, Failures: 0, Errors: 0, Skipped: 0
        ```
      </Accordion>
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Key Features
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Everything you need for robust Vaadin testing
  </p>

  <CardGroup cols={2}>
    <Card title="Type-Safe Wrappers" icon="shield-check" href="/concepts/element-lookup">
      40+ typed element classes for Vaadin components with compile-time safety
    </Card>

    <Card title="Accessibility-First" icon="universal-access" href="/concepts/aria-roles">
      Find elements using ARIA roles and accessible names, just like assistive technologies
    </Card>

    <Card title="Auto-Retry Assertions" icon="rotate" href="/concepts/assertions">
      Built-in assertions that automatically retry until timeout, eliminating flaky tests
    </Card>

    <Card title="Shadow DOM Support" icon="code" href="/concepts/locator-patterns">
      Automatic shadow DOM piercing with scoped element lookups
    </Card>

    <Card title="Mixin Interfaces" icon="layer-group" href="/api/shared/has-input-field">
      Shared behaviors through composable interfaces like HasInputFieldElement
    </Card>

    <Card title="Spring Boot Ready" icon="leaf" href="/guides/testing-setup">
      First-class integration with Spring Boot test framework
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Explore by Topic
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Deep dive into Drama Finder concepts and patterns
  </p>

  <CardGroup cols={3}>
    <Card title="Element Lookup" icon="magnifying-glass" href="/concepts/element-lookup">
      Learn how to find elements using factory methods and ARIA roles
    </Card>

    <Card title="Assertions" icon="check-circle" href="/concepts/assertions">
      Master assertion patterns with automatic retry logic
    </Card>

    <Card title="Locator Patterns" icon="location-dot" href="/concepts/locator-patterns">
      Understand locator delegation and scoped lookups
    </Card>

    <Card title="Best Practices" icon="star" href="/guides/best-practices">
      Follow proven patterns for maintainable tests
    </Card>

    <Card title="Common Patterns" icon="book" href="/guides/common-patterns">
      Explore real-world testing scenarios
    </Card>

    <Card title="Troubleshooting" icon="wrench" href="/guides/troubleshooting">
      Solutions to common issues
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Component Reference
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Browse element wrappers by category
  </p>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <a href="/api/text-field" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#00B4F0] dark:hover:border-[#00B4F0] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <span>Form Inputs</span>
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Text fields, checkboxes, date pickers, and more
        </p>

        <div className="text-sm text-[#00B4F0] group-hover:text-[#00E0FF] flex items-center gap-1">
          View elements

          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/api/button" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#00B4F0] dark:hover:border-[#00B4F0] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <span>Buttons & Actions</span>
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Interactive button elements with click actions
        </p>

        <div className="text-sm text-[#00B4F0] group-hover:text-[#00E0FF] flex items-center gap-1">
          View elements

          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/api/dialog" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#00B4F0] dark:hover:border-[#00B4F0] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <span>Overlays</span>
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Dialogs, notifications, and popover components
        </p>

        <div className="text-sm text-[#00B4F0] group-hover:text-[#00E0FF] flex items-center gap-1">
          View elements

          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/api/grid" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#00B4F0] dark:hover:border-[#00B4F0] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
          <span>Data Display</span>
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Grids, lists, and data visualization components
        </p>

        <div className="text-sm text-[#00B4F0] group-hover:text-[#00E0FF] flex items-center gap-1">
          View elements

          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>
  </div>
</div>

<div className="mt-20 mb-16 max-w-5xl mx-auto px-6">
  <div className="rounded-2xl border border-gray-200 dark:border-[#27272a] bg-gradient-to-br from-gray-50 to-white dark:from-[#1a1d27] dark:to-[#0f1117] p-8 lg:p-12">
    <h2 className="text-2xl lg:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
      Ready to write better tests?
    </h2>

    <p className="text-base text-gray-600 dark:text-gray-400 mb-6 max-w-2xl">
      Start testing your Vaadin application with type-safe, accessibility-first element wrappers.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#00B4F0] text-white font-semibold hover:bg-[#0089C7] transition-colors">
      Get Started Now
    </a>
  </div>
</div>
