feat: add Playwright e2e tests and update CI workflow

- Introduced a new job in the CI workflow for running Playwright end-to-end tests.
- Added Playwright as a dependency in package.json and package-lock.json.
- Created Playwright configuration file for test setup.
- Implemented multiple e2e tests covering existing repo entry, landing page interactions, repo scan functionality, stack navigation, and summary generation.
- Enhanced various components with data-testid attributes for better test targeting.
- Updated existing components to improve accessibility and maintainability.

Author: spivx

.github/workflows/ci-tests.yml

@@ -26,3 +26,27 @@ jobs:
 
       - name: Run unit tests
         run: npm run test:run
+
+  e2e-tests:
+    name: Run Playwright e2e tests
+    runs-on: ubuntu-latest
+    needs: unit-tests
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run e2e tests
+        run: npm run test:e2e
+        env:
+          CI: true

app/existing/[repoUrl]/repo-scan-client.tsx

@@ -148,7 +148,10 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
     }, [scanResult])
 
     return (
-        <div className="relative flex min-h-screen flex-col bg-background text-foreground">
+        <div
+            className="relative flex min-h-screen flex-col bg-background text-foreground"
+            data-testid="repo-scan-page"
+        >
             <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background" aria-hidden="true" />
             <header className="relative z-10 flex items-center justify-between px-6 py-6 lg:px-12 lg:py-8">
                 <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
@@ -178,28 +181,42 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
                                 </div>
                             </div>
                         ) : promptVisible ? (
-                            <div className="space-y-4">
+                            <div className="space-y-4" data-testid="repo-scan-prompt">
                                 <h3 className="text-xl font-semibold text-foreground">Scan {repoSlug ?? repoUrlForScan}?</h3>
                                 <p className="text-sm text-muted-foreground">We will detect languages, frameworks, tooling, and testing info.</p>
-                                <Button onClick={handleStartScan} className="w-full sm:w-auto">Yes, scan this repo</Button>
+                                <Button
+                                    onClick={handleStartScan}
+                                    className="w-full sm:w-auto"
+                                    data-testid="repo-scan-confirm-button"
+                                >
+                                    Yes, scan this repo
+                                </Button>
                             </div>
                         ) : isLoading ? (
                             <div className="flex justify-center py-16">
                                 <RepoScanLoader />
                             </div>
                         ) : error ? (
-                            <div className="flex flex-col items-center gap-3 py-10 text-center">
+                            <div
+                                className="flex flex-col items-center gap-3 py-10 text-center"
+                                data-testid="repo-scan-error"
+                            >
                                 <AlertTriangle className="size-8 text-destructive" aria-hidden="true" />
                                 <div>
                                     <p className="text-base font-semibold text-foreground">Unable to scan repository</p>
                                     <p className="mt-1 text-sm text-muted-foreground">{error}</p>
                                 </div>
                                 {canRetry ? (
-                                    <Button onClick={handleRetryScan}>Try again</Button>
+                                    <Button
+                                        onClick={handleRetryScan}
+                                        data-testid="repo-scan-retry-button"
+                                    >
+                                        Try again
+                                    </Button>
                                 ) : null}
                             </div>
                         ) : scanResult ? (
-                            <div className="space-y-8">
+                            <div className="space-y-8" data-testid="repo-scan-results">
                                 <section className="space-y-2">
                                     <h3 className="text-lg font-semibold text-foreground">Detected snapshot</h3>
                                     <p className="text-sm text-muted-foreground">
@@ -291,7 +308,10 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
                                         </div>
                                     </div>
                                 ) : null}
-                                <div className="rounded-2xl border border-border/60 bg-background/70 p-5">
+                                <div
+                                    className="rounded-2xl border border-border/60 bg-background/70 p-5"
+                                    data-testid="repo-scan-raw-json"
+                                >
                                     <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Raw response</h3>
                                     <pre className="mt-3 max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground">
                                         {JSON.stringify(scanResult, null, 2)}

app/existing/existing-repo-entry-client.tsx

@@ -34,7 +34,10 @@ export function ExistingRepoEntryClient() {
   }
 
   return (
-    <div className="relative flex min-h-screen flex-col bg-background text-foreground">
+    <div
+      className="relative flex min-h-screen flex-col bg-background text-foreground"
+      data-testid="existing-repo-page"
+    >
       <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background" aria-hidden="true" />
       <header className="relative z-10 flex items-center justify-between px-6 py-6 lg:px-12 lg:py-8">
         <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
@@ -53,7 +56,11 @@ export function ExistingRepoEntryClient() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+            <form
+              className="flex flex-col gap-4"
+              onSubmit={handleSubmit}
+              data-testid="existing-repo-form"
+            >
               <div className="flex flex-col gap-2">
                 <label htmlFor="githubUrl" className="text-sm font-medium text-foreground">
                   GitHub repository URL
@@ -68,17 +75,27 @@ export function ExistingRepoEntryClient() {
                   onChange={(event) => setValue(event.target.value)}
                   aria-describedby={error ? "github-url-error" : undefined}
                   aria-invalid={error ? true : undefined}
+                  data-testid="existing-repo-input"
                 />
                 <p className="text-xs text-muted-foreground">
                   You can also paste an <code>owner/repo</code> slug and we will normalize it for you.
                 </p>
                 {error ? (
-                  <p id="github-url-error" className="text-sm text-destructive">
+                  <p
+                    id="github-url-error"
+                    className="text-sm text-destructive"
+                    data-testid="existing-repo-error"
+                  >
                     {error}
                   </p>
                 ) : null}
               </div>
-              <Button type="submit" disabled={isSubmitting} className="w-full">
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                className="w-full"
+                data-testid="existing-repo-submit"
+              >
                 {isSubmitting ? "Redirecting…" : "Analyze repository"}
               </Button>
             </form>

app/new/stack/stack-summary-page.tsx

@@ -240,15 +240,21 @@ export function StackSummaryPage({ stackId, mode }: StackSummaryPageProps) {
 
   if (isLoading) {
     return (
-      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+      <div
+        className="flex flex-1 items-center justify-center text-sm text-muted-foreground"
+        data-testid="stack-summary-loading"
+      >
         Preparing your summary…
       </div>
     )
   }
 
   if (errorMessage) {
     return (
-      <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center">
+      <div
+        className="flex flex-1 flex-col items-center justify-center gap-4 text-center"
+        data-testid="stack-summary-error"
+      >
         <p className="text-base text-muted-foreground">{errorMessage}</p>
         <Button asChild>
           <Link href={stackId ? `/new/stack/${stackId}` : "/new/stack"}>Back to wizard</Link>
@@ -262,7 +268,10 @@ export function StackSummaryPage({ stackId, mode }: StackSummaryPageProps) {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-5xl flex-col gap-6">
+    <div
+      className="mx-auto flex w-full max-w-5xl flex-col gap-6"
+      data-testid="stack-summary-page"
+    >
       <section className="rounded-3xl border border-border/80 bg-card/95 p-8 shadow-lg">
         <div className="space-y-4">
           <div className="space-y-2">

app/stacks/[stack]/page.tsx

@@ -142,7 +142,10 @@ export default function StackLandingPage({ params }: { params: { stack: string }
   const defaultSummaryUrl = `/new/stack/${slug}/default/summary`
 
   return (
-    <main className="mx-auto flex min-h-screen max-w-3xl flex-col gap-10 px-6 py-16 text-foreground">
+    <main
+      className="mx-auto flex min-h-screen max-w-3xl flex-col gap-10 px-6 py-16 text-foreground"
+      data-testid="stack-detail-page"
+    >
       <header className="space-y-6">
         <div className="flex items-center justify-between">
           <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">

app/stacks/page.tsx

@@ -29,7 +29,10 @@ export const metadata: Metadata = {
 
 export default function StacksIndexPage() {
   return (
-    <main className="mx-auto flex min-h-screen max-w-4xl flex-col gap-10 px-6 py-16 text-foreground">
+    <main
+      className="mx-auto flex min-h-screen max-w-4xl flex-col gap-10 px-6 py-16 text-foreground"
+      data-testid="stacks-index-page"
+    >
       <header className="space-y-6">
         <div className="flex items-center justify-between">
           <Link href="/" className="text-sm font-semibold text-foreground transition hover:text-primary">
@@ -52,6 +55,7 @@ export default function StacksIndexPage() {
             <article
               key={answer.value}
               className="flex flex-col gap-4 rounded-2xl border border-border/70 bg-card/95 p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
+              data-testid={`stack-card-${answer.value}`}
             >
               <div className="space-y-2">
                 <h2 className="text-2xl font-semibold tracking-tight">{answer.label}</h2>

components/Hero.tsx

@@ -67,6 +67,7 @@ export function Hero() {
       variants={containerVariants}
       initial="hidden"
       animate="show"
+      data-testid="hero-section"
     >
       <motion.div className="space-y-10" variants={itemVariants}>
         <motion.div
@@ -126,6 +127,7 @@ export function Hero() {
                       type="button"
                       onClick={() => handleStackClick(stack.value)}
                       className="group inline-flex items-center gap-3 rounded-full border border-border/70 bg-background/90 px-4 py-2 text-sm font-medium text-foreground shadow-sm transition hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                      data-testid={`hero-stack-${stack.value}`}
                     >
                       <span
                         className="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-border/40"
@@ -160,6 +162,7 @@ export function Hero() {
                   type="button"
                   onClick={handleMoreStacks}
                   className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/80 px-4 py-2 text-sm font-semibold text-foreground shadow-sm transition hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+                  data-testid="hero-more-stacks"
                 >
                   More stacks
                   <ArrowRight className="h-3.5 w-3.5" />
@@ -177,7 +180,11 @@ export function Hero() {
               </span>
             </div>
 
-            <form onSubmit={handleGithubSubmit} className={`${selectionCardClass} flex flex-col gap-4`}>
+            <form
+              onSubmit={handleGithubSubmit}
+              className={`${selectionCardClass} flex flex-col gap-4`}
+              data-testid="hero-scan-form"
+            >
               <div className="space-y-2 text-left">
                 <p className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                   Scan a GitHub repository
@@ -193,8 +200,9 @@ export function Hero() {
                   onChange={(event) => setGithubRepo(event.target.value)}
                   placeholder="github.com/owner/repo"
                   className="w-full rounded-xl border border-border/70 bg-background px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 sm:min-w-[260px]"
+                  data-testid="hero-repo-input"
                 />
-                <Button type="submit" size="sm" className="gap-2">
+                <Button type="submit" size="sm" className="gap-2" data-testid="hero-scan-button">
                   Scan repo
                   <Github className="h-4 w-4" />
                 </Button>

components/final-output-view.tsx

@@ -158,6 +158,7 @@ export default function FinalOutputView({ fileName, fileContent, mimeType, onClo
       aria-labelledby="final-output-title"
       aria-describedby="final-output-description"
       onClick={handleBackdropClick}
+      data-testid="final-output-dialog"
     >
       <div
         ref={dialogRef}
@@ -215,6 +216,7 @@ export default function FinalOutputView({ fileName, fileContent, mimeType, onClo
               className="min-h-0 h-full w-full resize-none rounded-2xl bg-transparent p-6 font-mono text-sm leading-relaxed text-foreground focus:outline-none"
               aria-label="Generated instructions content"
               placeholder="No content available."
+              data-testid="final-output-textarea"
             />
           </div>
         </div>

components/instructions-answer-card.tsx

@@ -17,6 +17,7 @@ export type InstructionsAnswerCardProps = {
   disabled?: boolean
   disabledLabel?: string
   onClick?: () => void
+  testId?: string
 } & Omit<ComponentPropsWithoutRef<"button">, "children">
 
 export function InstructionsAnswerCard({
@@ -31,6 +32,7 @@ export function InstructionsAnswerCard({
   disabled = false,
   disabledLabel,
   onClick,
+  testId,
   ...buttonProps
 }: InstructionsAnswerCardProps) {
   const [isTooltipOpen, setIsTooltipOpen] = useState(false)
@@ -51,6 +53,7 @@ export function InstructionsAnswerCard({
       type="button"
       onClick={onClick}
       aria-disabled={disabled}
+      data-testid={testId}
       className={cn(
         "group relative flex h-full items-center justify-between rounded-2xl border border-border/60 bg-background/90 px-5 py-4 text-left transition-all hover:border-primary/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         disabled && "cursor-not-allowed opacity-60 hover:border-border/60 hover:shadow-none focus-visible:ring-0",

components/instructions-wizard.tsx

@@ -541,7 +541,10 @@ export function InstructionsWizard({
   }
 
   const wizardLayout = (
-    <div className="mx-auto flex w-full max-w-4xl flex-col gap-6">
+    <div
+      className="mx-auto flex w-full max-w-4xl flex-col gap-6"
+      data-testid="instructions-wizard"
+    >
       <div className="flex items-center justify-start">
         <Link
           href="/"
@@ -552,7 +555,10 @@ export function InstructionsWizard({
       </div>
 
       {isStackFastTrackPromptVisible ? (
-        <section className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg">
+        <section
+          className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg"
+          data-testid="wizard-fast-track"
+        >
           <div className="flex flex-col gap-6">
             <div className="space-y-4">
               <div className="space-y-2">
@@ -574,7 +580,10 @@ export function InstructionsWizard({
           </div>
         </section>
       ) : (
-        <section className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg">
+        <section
+          className="rounded-3xl border border-border/80 bg-card/95 p-6 shadow-lg"
+          data-testid="wizard-question-section"
+        >
           <div className="flex flex-col gap-4">
             <div className="flex flex-wrap items-center gap-2">
               <Button
@@ -595,7 +604,10 @@ export function InstructionsWizard({
               </Button>
             </div>
 
-            <h1 className="text-3xl font-semibold text-foreground">
+            <h1
+              className="text-3xl font-semibold text-foreground"
+              data-testid="wizard-question-heading"
+            >
               {currentQuestion.question}
             </h1>
 
@@ -635,6 +647,7 @@ export function InstructionsWizard({
               answers={filteredAnswers}
               onAnswerClick={handleAnswerClick}
               isSelected={isAnswerSelected}
+              questionId={currentQuestion?.id ?? null}
             />
           )}